愿你坚持不懈,努力进步,进阶成自己理想的人

—— 2017.09, 写给3年后的自己

CSS3盒模型计算方式

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中指定的widthheight的宽度,是内容的实际宽高,而盒子的总宽高(下面用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