1、CSS盒子模型
在CSS盒子模型中，页面中的所有元素都可以看成是一个盒子，并且占据着一定页面的空间
1、内容区：
内容区是CSS盒子模型的中心，它主要呈现了盒子的主要内容比如文字，图案等，它是盒子的必备部分，其他三个是可选部分
content有三个属性：width、height、overflow。注意这边的宽度和高度属性不包括padding，只是这块区域的宽高。当内容信息太多超过content所
占据的范畴，这时候就需要overflow属性来处理
2、内边距padding
这块区域是内容区和边框之间的空间，可以看做是内容区的背景区域
五个属性：padding-top、padding-left、padding-right、padding-bottom、padding（综合前面四个属性），五个属性可以指定内容与各个边框之间的距离。
3、边框border
边框的属性有三个：border-style、border-color、border-width
4、外边距margin
这块区域是指两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离
外边距的属性也有五个：margin-top、margin-left、margin-bottom、margin-right、margin（综合前面四个属性）
深入border
Q：border：0与border：none有什么区别
A：
一性能差异：border：0虽然显示的时候没有边框，但是浏览器还是会对border进行渲染，渲染后，就相当于存在一个border：0的边框这时候border：0需要消耗内存
而border：none，设置边框为无，这时候浏览器解析的时候就不会对其进行渲染，也就是说border：none不占内存
二：兼容性差异：
border：0在浏览器中的显示效果一样，而border：none在IE6、7显示边框无效
来源：https://www.cnblogs.com/masanhe/p/8289229.html