CSS3 box-sizing 属性
本文参考CSS中文文档
CSS3 box-sizing 属性
指定两个boxes接壤:
div { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ width:50%; float:left; }
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
属性 | IE | Chrome | FF | safari | Open |
---|---|---|---|---|---|
box-sizing | 10.0 4.0 -webkit- | 8.0 | 29.0 2.0 -moz- | 5.1 3.2 -webkit- | 9.5 |
属性定义及使用说明
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属性的值,应该从父元素继承 |
相关文章
CSS3 教程: CSS3 用户界面
本文参考CSS中文文档
相关推荐
MrHaoNan 2019-12-19
wangjie 2019-10-25
AnyBisks 2015-12-23
Jolestar 2016-06-02
qiupu 2019-07-01
王景迁 2019-07-01
dazhifu 2019-07-01
yongquanx 2016-08-01
李鴻耀 2016-06-16
opspider 2015-12-23
yibawuqing 2019-06-27
zhouguizhi 2014-08-27
张大晴 2014-08-27
yezi 2019-06-26
jianqi 2019-06-25
icecoffeemzp 2012-09-05
李鴻耀 2017-01-08
BitTigerio 2018-04-18