盒子模型

盒子模型包括：（1）标准W3C盒子模型；（2）IE盒子模型；

（1）标准W3C盒子模型

margin+border+padding+content(width只包含content部分)

（2）IE盒子模型

margin+border+padding+content（width包含content、padding以及border部分）

最近碰到的关于盒子模型的一个很容易出错的地方：

在一个长度确定的div（假设class="big"）里面，再放一个div（假设class="small"），要求内边距padding为20px。如果对big设置padding=20px;则会出现宽度发生变化的情况，与要求不符。此时应该给small加上padding=20px，才能达到效果。具体见图和代码：

html代码：

<div class="big">
    <div class="small"></div>
</div>

CSS代码： （错误的！）

.big{
       background-color: blue;
       width: 200px;
       height: 200px;
       padding: 20px;
}
.small{
       background-color: red;
       width: 100px;
       height: 100px;
}

结果：

正确的CSS代码应该是这样的：

.big{
	background-color: blue;
	width: 200px;
	height: 200px;
	position: absolute;
}
.small{
	background-color: red;
	width: 100px;
	height: 100px;
	margin: 20px;
}

正确效果图：

这里用到的其实就是标准W3C盒子模型的知识，给big添加padding=20px，会让显示的div的真正宽度在视觉上增加40px(20px*2)，因为W3C盒子模型的width并不包含padding部分。