CSS3中增加了
box-sizing
的盒模型控制方式,使得我们可以更容易地控制盒模型
以下示例基于:
<style type="text/css">
.demoBox {
width: 100px;
height: 100px;
padding: 10px;
margin: 10px;
border: 2px solid #000;
background: #36C;
}
</style>
<div class="demoBox" style="box-sizing: content-box"></div>
<div class="demoBox" style="-moz-box-sizing: padding-box"></div>
<div class="demoBox" style="box-sizing: border-box"></div>
1、content-box
content-box
是默认的盒模型宽高计算方式,我们在CSS中指定的width
和height
的宽度,是内容的实际宽高,而盒子的总宽高(下面用WIDTH和HEIGHT表示),是包括padding、border-width的,即:
WIDTH = width + padding-left + padding-right + border-left-width + border-right-width
HEIGHT = height + padding-top + padding-bottom + border-top-width + border-bottom-width
2、border-box
border-box
是IE传统的盒模型(IE6以下版本及IE6~7的怪异模式),在这种情况下,
width = 内容 + padding-left + padding-right + border-left-width + border-right-width
height = 内容 + padding-top + padding-bottom + border-top-width + border-bottom-width
相应地:WIDTH = width,HEIGHT = height
3、padding-box
padding-box
的宽高计算,只包含了padding和内容,不包含border,即:
width = 内容 + padding-left + padding-right
height = 内容 + padding-top + padding-bottom
相应地,有:
WIDTH = width + border-left-width + border-right-width
HEIGHT = height + border-top-width + border-bottom-width