【前言】前端页面的构建过程中，盒模型相关的概念会一直如影随形，因此需要深刻地理解好盒模型。本文会先简单描述一下盒模型，然后描述一些平常会遇到的注意点。
本文将从1、盒模型描述；2、W3C标准盒模型/IE传统盒模型 ；3.box-sizing属性；4，常见问题。
一、盒模型描述
之前跟朋友一起打羽毛球的时候看到羽毛球场地，我X，这不就是传说中的盒模型么，因此我还被他们调侃代码中毒太深。首先，po一张图。
众所周知，羽毛球运动中，双打的安全区域是标注的红色线框内，单打的安全区域是标注的黄色线框内，单双打重叠的区域就是上面标注的蓝色框框了，一个羽毛球厂的边界线就是最外层的白色框框，且各个羽毛球场中间总会留一些间隙，就是外层白色框框与边界的距离。
将这些对比盒模型的话：
1.蓝色框框就是我们日常所说的内容框content，内容只会在这个区域展示；
2.最外层的那个边界线就是我们所说的border，
3.content和border中间的距离就是内边距padding
4.最外层的边界线与旁边的白边的间距就是外边距margin。
回归到盒模型就如下图所示：
二、W3C标准盒模型/IE传统盒模型
1.W3C标准盒模型如下图如果设置添加下面的css属性，则在chrome下的预览效果及layout是
.box{
background-color:lightpink;
width:255px;
height:300px;
border:20px solid#f00;
padding:20px;
margin:20px;
}
从上方可以看出来
内盒尺寸（大小） = width + padding + border
外盒尺寸（空间尺寸）= width + pading + border + margin
经过计算可以得出：
div的内盒宽度 = width+ (padding + border )*2 = 335，内盒外盒高度= height+ (padding + border)*2=380
div的外盒宽度 = width+ (padding + border +margin)*2 = 375，外盒外盒高度= height+ (padding + border + margin*2=420
内容区域content的宽度 = width = 255,content的高度=height=300
2.IE传统盒模型如果在ie下预览及layout则是下面的效果
从上方可以看出来
内盒尺寸（大小） = width
外盒尺寸（空间尺寸）= winth + margin
div的内盒宽度 = width= 255，内盒外盒高度= height= 300
div的内盒高度 = height + margin=255+ 20*2=295，内盒外盒高度=300+ margin= 300+ 20*2=340
内容content的宽度 = 内盒宽度- padding -border =255- （20 + 20）*2 = 175,content的高度=内盒高度- padding -border =300- （40 + 10）*2 =220
【总结】
W3C标准盒模型：
内盒尺寸（大小） = width + padding + border
外盒尺寸（空间尺寸）= width + pading + border + margin
IE传统（IE6）盒模型
内盒尺寸（大小） = width
外盒尺寸（空间尺寸）= winth + margin
三、box-sizing属性
【基础概念】：以特定方式定义匹配某个区域的特定个元素【兼容性IE8+】
【属性值】
content-box:宽度和高度分别用到元素的内容框，即上方所示的W3C标准盒模型【默认值】
border-box:宽度和高度分别用到元素的内容框、内边距，边框，即上方所示的IE传统盒模型
inherit:继承父元素的box-sizing属性
【tpis】移动端，建议添加box-sizing:border-box值，因为我们页面局部基本上是按区域已经布局好了，但是有的时候改变一个元素的边距值，可能会导致钙元素的大小变大直接元素下移，页面错乱。但是添加了box-sizing:border-box可以保证页面整理布局不会乱。
三、常见问题
1.margin重叠问题
块级元素水平方向不会重叠，垂直方向可能会重叠（若重叠，边距取较大的值；出现负值则取两者差值的绝对值）
如下图所示，若上面的元素设置margin:20px；下面的元素设置margin:10px。则两个元素在垂直方向的margin会重叠且取相对大的值。
这里情况比较复杂，这里先简单说下，只有会在写一篇跟margin相关的文章详细阐述下。
2.margin不生效
最多出现在firefox，或者受浮动及定位影响，可以考虑用padding代替。
网友评论