盒子的属性

文档的每个元素被构造成文档布局内的一个矩形盒子，盒子每层的大小都可以使用一些特定的CSS属性调整。相关属性如下:

• width和height

  width和height设置内容盒（content box）盒子的宽度和高度。内容盒是盒子内容显示的区域 — 包括盒子内的文本内容，以及表示嵌套子元素的其它盒子。注意: 还有其他属性可以更巧妙地处理内容的大小 — 设置大小约束而不是绝对的大小。这些属性包括min-width、max-width、min-height 和 max-height。

• padding

  padding表示一个 CSS 盒子的内边距 — 这一层位于内容盒的外边缘与边框的内边缘之间。该层的大小可以通过简写属性padding 一次设置所有四个边，或用 padding-top、padding-right、padding-bottom 和 padding-left 属性一次设置一个边。

• border

  CSS 盒的边框（border）是一个很明显的层，位于内边距的外边缘以及外边距的内边缘之间。边框的默认大小为 0 — 从而让它不可见 — 不过我们可以设置边框的厚度、风格和颜色让它出现。 border 简写属性可以让我们一次设置所有四个边，例如 border: 1px solid black。This can be broken down into numerous different longhand properties for more specific styling needs:

  border-top，border-right，border-bottom，border-left：设置厚度，款式和边境一侧的颜色。border-width，border-style，border-color：设置仅厚，样式或颜色独立，但边界的所有四个侧面。您还可以设置单独的边框的单面的三个属性之一，使用border-top-width，border-top-style，border-top-color，等。

• margin

  外边距（margin）代表 CSS 盒子周围的外部区域，在布局中推开其它 CSS 盒子。其表现与与 padding 很相似；简写属性为 margin，单个属性分别为 margin-top、margin-right、margin-bottom和 margin-left。

更改默认的盒模型

**box-sizing **属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。

值

• content-box

  默认值，标准盒子模型。width和height只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。

  **注意: 内边距, 边框 & 外边距 都在这个盒子的外部。 **

  比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;

  尺寸计算公式：width = 内容的宽度，height = 内容的高度。

• border-box

  width 和 height 属性包括内容，内边距和边框，但不包括外边距。

  这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。padding和border将属于盒子的一部分

  例如, .box {width: 350px; border: 10px solid black;}导致在浏览器中呈现的宽度为350px的盒子。这个例子虽然没有设置高度，但是因为设置了border，所以高度自动就成了20px。

  尺寸计算公式：width = border + padding + 内容的 width，height = border + padding + 内容的 height*。

参考地址：
盒模型mdn
盒模型