【前端学习】-盒模型

【前言】前端页面的构建过程中，盒模型相关的概念会一直如影随形，因此需要深刻地理解好盒模型。本文会先简单描述一下盒模型，然后描述一些平常会遇到的注意点。
本文将从1、盒模型描述；2、W3C标准盒模型/IE传统盒模型 ；3.box-sizing属性；4，常见问题。

一、盒模型描述

之前跟朋友一起打羽毛球的时候看到羽毛球场地，我X，这不就是传说中的盒模型么，因此我还被他们调侃代码中毒太深。首先，po一张图。

众所周知，羽毛球运动中，双打的安全区域是标注的红色线框内，单打的安全区域是标注的黄色线框内，单双打重叠的区域就是上面标注的蓝色框框了，一个羽毛球厂的边界线就是最外层的白色框框，且各个羽毛球场中间总会留一些间隙，就是外层白色框框与边界的距离。
将这些对比盒模型的话：

1.蓝色框框就是我们日常所说的内容框content，内容只会在这个区域展示；
2.最外层的那个边界线就是我们所说的border，
3.content和border中间的距离就是内边距padding
4.最外层的边界线与旁边的白边的间距就是外边距margin。

回归到盒模型就如下图所示：

二、W3C标准盒模型/IE传统盒模型

1.W3C标准盒模型 如下图如果设置<div class="box"><img src="img/demo.jpg"/></div>添加下面的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代替。