css常见的两种盒模型及其区别
2019-09-18 本文已影响0人
貓咪是大王
盒模型也称为框模型，就是从盒子顶部俯视所得的一张平面图，用于描述元素所占用的空间。它有两种盒模型，W3C盒模型和IE盒模型（IE6以下，不包括IE6以及怪异模式下的IE5.5+）
理论上两者的主要区别是二者的盒子宽高是否包括元素的边框和内边距。当用CSS给给某个元素定义高或宽时，IE盒模型中内容的宽或高将会包含内边距和边框，而W3C盒模型并不会。
例如：下面的div元素，在W3C盒模型中的宽度为122px;在IE盒模型中的宽度是100px
div{
padding:10px;
margin:10px;
border:1px solid #ccddff;
width:100px;
}
//div元素的宽度为100px;那么IE盒模型中的宽度是100px，而W3C盒模型中的宽或高并不会包含内边距跟边框，如果要获取W3C盒模型中的宽度，那么需要把内容的宽度、内边距、边框相加
CSS3新增了box-sizing属性来改变盒模型的类型
content-box为默认值，代表W3C盒模型：盒子定义宽高 = 内容宽高（content）
border-box代表IE盒模型：盒子定义宽高 = 内容宽高（content） + 内边距 （padding）+ 边框（border）
<style type="text/css">
.box {
width: 200px;
height: 300px;
padding: 20px;
border: 5px solid #ccddff;
background-color: #ffccdd;
box-sizing:content-box;
/*box-sizing:border-box;*/
}
</style>
<body>
<div class="box"></div>
</body>
box-sizing:content-box;
box-sizing:border-box;
