box-sizing 属性允许你以某种方式定义某些元素,以适应指定区域。
例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。
默认值: | content-box |
---|---|
继承: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.boxSizing="border-box" |
box-sizing: content-box|border-box|inherit:
值 | 说明 |
---|---|
content-box | 这是CSS2.1指定的宽度和高度的行为。指定元素的宽度和高度(最小/最大属性)适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外 |
border-box | 指定宽度和高度(最小/最大属性)确定元素边框box。也就是说,对元素指定宽度和高度包括padding和border的指定。内容的宽度和高度减去各自双方该边框和填充的宽度从指定的"宽度"和"高度"属性计算 |
inherit | 指定box-sizing属性的值,应该从父元素继承 |
指定两个boxes接壤:
div { box - sizing: border - box; - moz - box - sizing: border - box; /* Firefox */ width: 50 % ; float: left; }尝试一下 »
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
属性 | |||||
---|---|---|---|---|---|
box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.2 -webkit- |
9.5 |
CSS3 教程: CSS3 User Interface
在线实例
字符集 & 工具
最新更新
站点信息
关注我们