盒子的属性
文档的每个元素被构造成文档布局内的一个矩形盒子，盒子每层的大小都可以使用一些特定的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*。
