box-sizing: border-box;.

`box-sizing: border-box;` 是 CSS 中的一个属性设置，它改变了元素的盒模型计算方式。默认情况下，浏览器会将元素的总宽度和高度分为内容区(content)、内边距(padding)和外边框(border)，而 `border-box` 则将所有这三部分的空间都包含在了元素的声明尺寸之内。这意味着当你设置元素的宽度和高度时，所指定的尺寸已经包括了边框和内边距，不需要额外计算。这样可以避免布局时因为内边距和边框导致的实际大小超出预期。

例如，如果你设定了一个宽度为 300px 的 `width: 300px;` 的元素，并且有 20px 的 padding 和 1px 的 border，按照 `content-box` 模型，实际显示宽度将是 322px (300 + 2 * 20 + 1)；而在 `border-box` 下，这个元素的显示宽度就是 300px。

相关问题

-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;

这三行代码是用来设置CSS盒模型的box-sizing属性值为border-box的。这意味着元素的宽度和高度将包括其边框和内边距，而不是只包括内容。这样可以更方便地控制元素的大小和位置，特别是在使用百分比或响应式设计时。其中，-webkit-box-sizing和-moz-box-sizing是为了兼容不同的浏览器，而box-sizing是标准的CSS3属性。

*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}

这是一个CSS样式代码，用于设置元素的盒模型为border-box。border-box是一种盒模型，它将元素的宽度和高度包括了边框和内边距，而不会增加元素的总宽度和高度。这样可以更方便地控制元素的尺寸。

-webkit-box-sizing、-moz-box-sizing和box-sizing是CSS属性，用于分别在不同浏览器中设置盒模型。-webkit-box-sizing用于Webkit内核的浏览器（如Chrome、Safari），-moz-box-sizing用于Gecko内核的浏览器（如Firefox），而box-sizing是标准的CSS属性，适用于大多数现代浏览器。

使用box-sizing: border-box可以避免在设置元素宽度和高度时考虑边框和内边距的影响，使布局更加灵活和方便。