1、盒子型简介
在HTML文档中任何元素，都可以看作是一个盒子，因此理解盒子模型非常重要。一个盒子包含 盒子的内容、盒子内边距、盒子的边框、盒子的外边距。
image.png
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
2、浏览器兼容性
W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
IE8 及更早IE版本不支持 填充的宽度和边框的宽度属性设。
解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。
3、内联元素与块元素
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。如果让行内元素变成块元素，通过将 display 属性设置为 block。还可以通过把 display 设置为 none，隐藏元素，不在文档流中占据空间。
4、CSS3 box-sizing
属性值content-box
width=内容区宽度
height=内容区高度
.test1{
box-sizing:content-box;
width:200px;
padding:10px;
border:15px solid #eee;
}
image.png
属性值border-box
width=内容宽度+左填充+右填充+左边框+右边框
height=高度+顶部填充+底部填充+上边框+下边框
.test2{
box-sizing:border-box;
width:200px;
padding:10px;
border:15px solid #eee;
}
image.png
