盒模型的理解

前端的盒模型包括两种，分别是W3C盒模型和IE盒模型，IE盒子模型与W3C的盒子模型唯一区别就是元素的宽度。

W3C盒模型包括content、padding、border、margin。其中width = content。

IE盒模型包括content、padding、border、margin。其中width = content+padding+border。

后来W3C在CSS3中新增了box-sizing的样式，属性包含content-box和border-box；content-box就是默认的样式（W3C盒模型），border-box（IE盒模型）是width包含了content+padding+boder。

（1） content-box  元素的总宽度width=content+padding+border

.box{
			width: 200px;
			height: 100px;
			padding: 10px;
			margin: 20px;
			border: 5px solid #E19DEC;
			background: #CCCCCC;
			box-sizing: content-box;
		}
<div class="box">W3C盒模型</div>

                                                            

实际宽度为：width=200+10*2+5*2=230
实际高度为：height=100+10*2+5*2=130

 

（2） border-box   元素的总宽度width=width（用样式指定的宽度）

.box{
			width: 200px;
			height: 100px;
			padding: 10px;
			margin: 20px;
			border: 5px solid #E19DEC;
			background: #CCCCCC;
			box-sizing: border-box;
		}

<div class="box">IE盒模型</div>

 

 

                                                                 

实际宽度为：width=200
实际高度为：height=100