box-sizing:+属性值

box-sizing是CSS3中的一个属性，用于控制元素的盒模型。它有两个属性值：content-box和border-box。

当设置为content-box时，元素的宽度和高度只包括内容的宽度和高度，不包括边框（border）、内边距（padding）和外边距（margin）。

当设置为border-box时，元素的宽度和高度包括内容、内边距和边框的宽度，但不包括外边距。

下面是一个使用box-sizing属性的例子：

div {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 1px solid black;
}

在这个例子中，div元素的宽度为200px，包括20px的内边距和2px的边框宽度。由于设置了box-sizing为border-box，所以内边距和边框的宽度不会影响元素的宽度。

相关问题

box-sizing: border-box; box-sizing: content-box; box-content: border-box;box-content: sizing-box;四个属性的区别

在CSS布局中，`box-sizing` 属性用于控制元素的盒模型如何处理尺寸。主要有两个值：

1. `box-sizing: content-box;` 这是默认的行为，也被称为标准盒模型。元素的总宽度（width）和总高度（height）等于内容区域（content）、内边距（padding）和边框（border）的总和。这意味着当你设置宽度或高度时，实际应用的尺寸会包括内边距和边框。

2. `box-sizing: border-box;` 或者写作 `box-content: border-box;`（这个书写方式并不常见，一般用 `box-sizing`）改变了盒模型的工作方式。在这种模式下，元素的总宽度和总高度仅仅包含内容区域，不包括内边距和边框。这样设置后，你设置的宽度和高度会直接作用于内容区域，而内边距和边框则会从这个区域内向外延伸。

简而言之，`content-box` 让你在设置尺寸时要考虑内边距和边框的空间，而 `border-box` 则提供了一个更直观的方式来指定元素占据的空间，更容易预测布局效果。后者在响应式设计、栅格系统等场景中尤其有用，因为它能避免意外的尺寸增加。

-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属性。