box-sizing
box-sizing属性用于更改用于计算元素宽度和高度的默认的CSS盒子模型。
语法
box-sizing: content-box|border-box|inherit;
值
| 值 | 描述 |
|---|---|
| content-box | 这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。 |
| border-box | CSS3新增加的宽度高度行为。宽度和高度包括内边距和边框。 |
| inherit | 规定应从父元素继承 box-sizing 属性的值。 |
例子
HTML
<div class="stage"> <div class="box">这个 div 占据左半部分。</div> <div class="box">这个 div 占据右半部分。</div> </div>
CSS
.stage {
width:30em;
border:1em solid;
}
.box{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
border:1em solid red;
float:left;
}
执行结果
这个 div 占据左半部分。
这个 div 占据右半部分。