CSS结构布局的重点概念——盒子模型
盒子模型
盒子模型包括外边距，边框，内边距，元素本身的高度或者宽度
CSS框模型实质上是一个盒子。 它包括：页边距，边框，填充和实际内容。 下图说明了盒子模型：
- 内容content-盒子里面的内容，其中显示文本和图像
- 填充padding-清除内容周围的区域。 填充是透明的
- 边框border-围绕内边距和内容的边框
- 边距margin-清除边界border外的区域。 边距是透明的
重要提示：使用CSS设置元素的width和height属性时，你只是设置了内容区域的宽度和高度。 要计算元素的完整大小，还必须添加填充，边框和边距。
元素的总宽度应这样计算：
元素总宽度=宽度+左填充+右填充+左边框+右边框+左空白+右空白
元素的总高度应如下计算：
元素总高度=高度+顶部填充+底部填充+顶部边框+底部边框+顶部边距+底部边距
边框
边框属于盒子模型的一部分
html标签也有边框，并且是最外面的边框
body是仅次于html的第二层边框
默认有的浏览器html标签与body标签之间会有边距，可以将body的外边距设置为0，这是一个好习惯。
元素高度和宽度
设置元素的高度和宽度，仅仅是指元素内容本身的高度和宽度，不包括内边距，边框的宽度以及外边距
最大宽度最小宽度以及最大高度最小高度
在当屏幕大小发生变化的时候固定显示的大小，假如当设置最小宽度为800px的时候调整浏览器窗口大小小于800的时候就会出现水平滚动条，当设置最大宽度的时候，尽管屏幕大于800，钙元素的显示宽度仍然是800，不会变大。
外边距
外边距margin-top margin-right margin-bottom margin-left
外边距的属性值可以是：auto inherit px 百分比
提示：允许使用负值。
margin:auto; 将元素水平居中
auto您可以将margin属性设置为auto以自动将元素在其容器中水平居中。
然后，元素将占据指定的宽度，剩余空间将在左右外边距之间平均分配。
外边距崩溃
常识似乎表明<h1>和<h2>之间的垂直边距总计为70像素（50像素+ 20像素）。 但是由于边距崩溃，实际边距最终为50px。
内边距
CSS填充属性用于在任何定义的边框内，在元素内容周围生成空间。
内边距像外边距一样除了没有auto值，其他值都有，另外就是内边距不支持负数值，而外边距支持负数值
内边距和元素的宽度之间的关系
CSS width属性指定元素内容区域的宽度
如果希望内边距不影响整个元素的宽度大小，若要将宽度保持为300px，无论填充量如何，都可以使用box-sizing属性。 这将导致元素保持其宽度。 如果增加填充，则可用的内容空间将减少。
使用属性box-sizing: border-box;将内边距包含进元素宽度中