box-sizing

摘要

box-sizing 属性改变了 CSS 盒子模型，用于计算元素的宽度和高度，使其等于内容、内边距或边框盒的宽度和高度。

概述表

初始值

content-box

适用范围

所有接受宽度或高度的元素

继承

否

媒体

视觉

计算值

指定值

可动画

是

CSS 对象模型属性
:

语法

• box-sizing: border-box
• box-sizing: content-box
• box-sizing: padding-box

值

content-box

width 和 height 属性（也包括 min-width、max-width、min-height 和 max-height 属性）的计算方式是内容区域的宽度/高度，不包括边框、外边距或内边距。这是 CSS2.1 规范中宽度和高度的传统行为。

padding-box

元素的 width 和 height（也包括 min-width、max-width、min-height 和 max-height 属性）的计算方式是内容区域的宽度/高度加上 padding。内容区域的尺寸是通过从元素的每一侧减去内边距宽度来计算的。如果计算值小于 0，则尺寸属性设置为 0。

border-box

元素的 width 和 height（也包括 min-width、max-width、min-height 和 max-height 属性）的计算方式是内容区域的宽度/高度加上 padding 和 border。

内容区域的尺寸是通过从元素的每一侧减去内边距和边框宽度来计算的。如果计算值小于 0，则尺寸属性设置为 0。

示例

以下示例假定标记如下所示。

<div class="parent">
    <div class="child"></div>
</div>

此 CSS 使子 <div> 始终占据其父元素宽度的一半。这是因为其 box-sizing 设置为 border-box，因此总宽度始终是内容加上内边距加上边框。随着边框和内边距变厚，元素不会变大。相反，内容会缩小以腾出空间。

/* Support Firefox, WebKit, Opera and IE8+ */

.parent {
   width: 50%;
   height: 200px;
   background: red;
 }

 .child {
    border: 30px solid rgba(0,0,0,0.5);
    float: left;
    padding: 3rem;
    background: blue;
    width: 50%;
    height: 100px;
    box-sizing: border-box;
 }

查看实时示例

在 Safari 5 和 Chrome 中，类型为 search 的输入元素以 border-box 渲染。您可以使用以下代码在所有浏览器中标准化此行为。

input[type="search"] {
    box-sizing: content-box;
}

相关规范

CSS Level 3 - Basic User Interface Module

W3C 工作草案

参见

相关文章

Box Model

• border

• border-corner-shape

• bottom

• box-shadow

• box-sizing

• break-before

• clear

• float

• height

• left

• line-height

• margin

• margin-bottom

• margin-left

• margin-right

• margin-top

• max-height

• max-width

• min-height

• min-width

其他文章

• WebPlatform.org 关于盒子模型的教程

外部资源

• Chris Coyier 撰写了一篇关于 box-sizing 的详细文章。
• Paul Irish 写了一篇关于 将 box-sizing: border-box; 应用于所有元素 的文章。

署名

• Mozilla Developer Network : 文章

• Microsoft Developer Network: [Windows Internet Explorer API 参考 文章]