一、什么是盒子模型
盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。
从上图可以看到标准的盒子模型范围包括margin(外边距)、border(边框)、padding(内边距)、content(网页内容)。
网页内容就是盒子里面装的东西。在网页设计中，内容常指文字、图片等元素。
内边距(PADDING)可以理解为盒子里装的东西和边框的距离。
边框(BORDER)就是盒子本身。
外边距(MARGIN)就是边框外面自动留出的一段空白。
注意：
每个HTML元素都可以看做是一个盒子。
1、外边距(margin)
2、边框(border)
3、内边距(padding)
4、小结
4、1盒子模型总尺度
盒子模型总尺度=margin*2+border*2+padding*2+内容尺寸（宽/高）。
例如、一个盒子的margin为25px，border为2px，padding为10px，content的宽为200px、高为50px，假如用标准盒子模型解释，那么这个盒子需要占据的位置为：宽25*2+2*2+10*2+200=274px、高25*2+2*2*10*2+50=124px，盒子的实际大小为：宽 2*2+10*2+200=224px、高 2*2+10*2+50=74px；
4、2外边距可以用于设置网页水平居中
margin-left:auto;
margin-right:auto;
例如：margin 0px auto;
4、3块元素才能完全适用于盒子模型
使用display属性来相互转化
none：元素隐藏，不可见，不占据空间。
visibility:hidden 元素隐藏，但是占据空间。
block：转为块元素，独占一行。
inline：转为内联元素，不换行。
inline-block：行内块元素。