【IE大叔的杀马特审美】之——CSS盒子模型

干前端，跑不了和IE大叔打交道.....有句话叫存在即合理，IE大叔在前端界是灰常的NB啊，既然咱改变不了世界，就只能改变自己。

先上定义：为了给浏览器上各个元素排版定位，浏览器会根据渲染模式为元素生产4个矩形框，分别从外到内为margin、border、

　　　　 padding、content，它们不可分割，但可能重合，这就是所谓的盒子模型，即CSS对一个元素渲染后的抽象形态。

来一起看看大叔的眼里的盒子。



总结一哈：

　　　　 盒子模型的范围也包括 margin、border、padding、content

但W3C认为：盒子大小= content

　　　　 IE认为： [b]盒子大小= [b]border + padding + content
[/b][/b]

小学应用题：

　　　　　　一个盒子， margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px，

求盒子在W3C和IE中，占据大小和实际大小。（占据大小：页面内容纳它所需的尺寸，包括margin。实际大小：也就是border以内的大小，它不包括margin）

解：W3C占据：宽 20*2+1*2+10*2+200=262px 高 20*2+1*2*10*2+50=112px

　　　　　　W3C实际：宽 1*2+10*2+200=222px 高 1*2+10*2+50=72px

　　　　　　IE占据： 宽 20*2+200=240px 高 20*2+50=90px

　　　　　　IE实际： 宽 200px 　　　　　　　　　　高 50px

解决方案：

　　　　　　为了统一渲染布局，在页面第一行要进行DOCTYPE声明，也就是DTD(文档类型定义)，声明成标准模式即可。

CSS3正名：

　　　　　　其实IE大叔的盒子模型也不无道理，只是对盒子的两种理解，在实际应用中也会感觉IE大叔的盒子模型在布局上也可能方便一些，尤其是需要设置border或者padding的时候。所以CSS3中提出了box-sizing的概念。

box-sizing中有三种值：

　　　　　　content-box（W3C盒模型）

　　　　　 border-box （IE盒模型）

　　　　　　padding-box（不含border的盒子模型，不常用，只有firefox支持）

下面来看看IE盒模型的可取之处：

问：设置两个并排的div，各占据页面总宽度的50%，同时要求div都有10px的边框、上下左右30px的补白，即如下效果

　


CSS:　　　　

body {
padding: 0;
margin: 0;
}

#div1, #div2 {
float: left;
width: 50%;
height: 200px;
box-sizing: border-box;
border: 10px solid #a00;
padding: 30px;
}

HTML:

<div id="div1">
div1
</div>
<div id="div2">
div2
</div>

再回到W3C盒子模型，也就是content-box，要实现此效果，请自行尝试（注意要各50%，可随容器大小自动变化）