CSS3 box-sizing 属性
实例
指定两个boxes接壤:
div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
属性 | |||||
---|---|---|---|---|---|
box-sizing | 10.04.0 -webkit- | 8.0 | 29.02.0 -moz- | 5.13.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属性的值,应该从父元素继承 |
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!
相关推荐
MrHaoNan 2019-12-19
wangjie 2019-10-25
王为仁 2019-10-11
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
BitTigerio 2018-04-18