CSS3 box-sizing 属性
2016-07-25 11:16
477 查看
语法:
box-sizing:content-box | border-box默认值:content-box
适用于:所有接受width和height的元素
继承性:无
取值:
content-box:padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和,即 ( Element width = width + border + padding )此属性表现为标准模式下的盒模型。border-box:padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值,即使定义有border和padding也不会改变对象的实际宽度,即 ( Element width = width )此属性表现为怪异模式下的盒模型。示例:
content-box:
.test1{ box-sizing:content-box; width:200px; padding:10px; border:15px solid #eee; }
border-box:
.test2{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; }
说明:
设置或检索对象的盒模型组成模式。对应的脚本特性为boxSizing。
兼容性:
浅绿 = 支持红色 = 不支持
墨绿 = 部分支持
橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera |
---|---|---|---|---|---|
版本 | 6-7 | 4-18 | 5.1.7 | 9 | 7-12.5 |
版本 | 8 | ||||
版本 | 9 |
相关文章推荐
- css实现动态进度条
- css实现百分比进度条
- HTML&CSS基础学习笔记1.17-表格的头部与尾部
- css实现鼠标放到图片旋转效果
- 自定义Dialog样式 虚拟键盘的隐藏 TextView的图标
- css3 如何实现圆边框的渐变
- CSS深入理解之margin
- 前端开发:css技巧,如何设置select、radio 、 checkbox 、file这些不可直接设置的样式 。
- QPainter就是手里的作图工具,只需要三洋东西:笔(颜色,宽度,样式),字体(写字),刷子(大面积作画),这里有三个典型例子
- css input[type=file] 样式美化,input上传按钮美化
- css3记录
- CSS样式,雪碧,图片替换,渐变小析
- css伪类选择器详细解析及案例使用-----伪类选择器(2)
- [php入门] 5、初学CSS从中记下的一些基础点(For小白)
- CSS 定位规则之 BFC
- DW——CSS——3D环境
- 前端基本功—CSS 实战第二天
- 9个优秀的CSS框架
- css中px,em和rem的区别要弄清楚
- bootcss编辑