CSS box-sizing 属性

❮ 上一节

CSS 参考手册

下一节 ❯

实例

在元素的总宽度和总高度中包括填充和边框:

#example1 { box-sizing: border-box;}

亲自试一试 »

下面有更多实例。

定义和用法

box-sizing 定义如何计算元素的宽度和高度:是否包括填充和边框。

默认值:

content-box

继承性:

no

支持动画:

no. 阅读有关动画的信息

版本:

CSS3

JavaScript 语法:

object.style.boxSizing="border-box"

测试一下

浏览器支持

表中的数字表示支持该属性的第一个浏览器版本。

紧跟在 -webkit- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性

box-sizing

10.04.0 -webkit-

8.0

29.02.0 -moz-

5.13.2 -webkit-

9.5

语法

box-sizing: content-box|border-box|initial|inherit;

属性值

值

描述

content-box

默认。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外

border-box

指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

initial

将此属性设置为其默认值。请参阅 initial

inherit

从其父元素继承此属性。请参阅 inherit

更多实例

实例

并排指定两个带边框的框:

div

{ box-sizing: border-box; width: 50%; border: 5px solid red;

float: left;

}

亲自试一试 »

实例

设置 "通用盒子尺寸":

* { box-sizing: border-box;}

亲自试一试 »

相关页面

CSS 教程: CSS Box Sizing

HTML DOM 参考手册: boxSizing 属性

❮ 上一节

CSS 参考手册

下一节 ❯