css3中的box-sizing属性
2016-03-05 15:56
676 查看
box-sizing的CSS属性是用来改变默认的CSS框模型,用于计算元素的宽度和高度。它可以使用这个属性来模拟浏览器的行为不正确支持CSS盒模型的规范。
在我们开发的过程中会发现,有时候,如果对页面中的大区域进行设置时,将border、padding计算到width和height之内,反而更灵活。但W3C的 CSS2.1规范却规定了他们并不能被包含其中。考虑到这个问题,css3中引入了一个新的属性:
box-sizing,它具有“
content-box”和”
border-box“两个值。
box-sizing:content-box
当我们设置 box-sizing: content-box;时,浏览器对盒模型的解释遵从我们之前认识到的 W3C 标准,当它定义width和height时,它的宽度不包括border和padding。
box-sizing:border-box
当我们设置box-sizing: border-box;时,浏览器对盒模型的解释与 IE6之前的版本相同,当它定义
width和
height时,
border和
padding则是被包含在宽高之内的。内容的宽和高可以通过定义的“width”和
“height”减去相应方向的“padding”和“border”的宽度得到。内容的宽和高必须保证不能为负,必要时将自动增大该元素border box的尺寸以使其内容的宽或高最小为0。
box-sizing属性取值
content-box
这是默认样式指定CSS标准。测量winth和height属性只包括的内容,但不是border, margin, 或者 padding。
padding-box
winth和
height属性包括
padding的大小,不包括
border和
margin
border-box
winth和
height属性包括
padding和
border,但不是
margin。这是盒模型的文档时,Internet
Explorer使用Quirks模式。
相关文章推荐
- 夺命雷公狗---TP商城----TP之样式和特效以及图片引入---2
- css3 calc()自适应布局属性
- 牛逼的bootcss之buttons
- 纯css实现三角
- QT Creator的style sheet的几种用法(QT Creator)(StyleSheet)(样式)(QT4.7)(用法)
- Qt中设置widget背景颜色/图片的注意事项(使用样式表 setStyleSheet())
- 在head里的CSS link 竟然粗如今body里了?
- css盒子模型总结
- CSS3中动画效果Transitions与Animations的区别
- CSS vertical-align
- 详解CSS中的z-index属性在层叠布局中的用法
- 深入解析CSS中z-index属性对层叠顺序的处理
- CSS编写时的高性能以及高维护性代码优化建议总结
- 8款设计师常用漂亮的HTML CSS表格样式
- 如何使用样式
- CSS HTML实现背景图片的填充
- 对CSS中的relative,absolute,fix的探讨
- 你所不知的 CSS ::before 和 ::after 伪元素用法
- 简单漂亮CSS3后台登录页面模板
- CSS3鼠标移入移出图片生成随机动画