目录

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 占据右半部分。

参考

相关页面

外部链接


跳至内容顶部