CSS box-sizing 属性
下面有更多实例。
定义和用法
box-sizing 定义如何计算元素的宽度和高度：是否包括填充和边框。
| 默认值: | content-box |
|---|---|
| 继承性: | no |
| 支持动画: | no. 阅读有关动画的信息 |
| 版本: | CSS3 |
| JavaScript 语法: | object.style.boxSizing="border-box" 测试一下 |
浏览器支持
表中的数字表示支持该属性的第一个浏览器版本。
紧跟在 -webkit- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
| 属性 | |||||
|---|---|---|---|---|---|
| box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.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;
width: 50%;
border: 5px solid red;
float: left;
}
相关页面
CSS 教程: CSS Box Sizing
HTML DOM 参考手册: boxSizing 属性
