css3 box-sizing属性
2016-07-05 13:01
381 查看
这个问题是开山之作,让我解决了很多前端的问题。
box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box。
content-box,border和padding不计算入width和height之内,浏览器默认也是这样
padding-box,padding计算入width内
border-box,border和padding计算入width之内,其实就是怪异模式了~
ie8+浏览器支持content-box和border-box;
ff则支持全部三个值。
案例
问题:对于样式#a1,我们想让元素显示为宽度为500px,box-sizing=?
答案:box-sizing:border-box;
box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box。
content-box,border和padding不计算入width和height之内,浏览器默认也是这样
padding-box,padding计算入width内
border-box,border和padding计算入width之内,其实就是怪异模式了~
ie8+浏览器支持content-box和border-box;
ff则支持全部三个值。
案例
#a1 { width:500px; padding: 10px; border:1px solid #ee240f; }
问题:对于样式#a1,我们想让元素显示为宽度为500px,box-sizing=?
答案:box-sizing:border-box;
相关文章推荐
- css 一些灵动性的小方法
- CSS实现垂直居中水平居中的绝对定位居中技术
- CSS深入理解vertical-align和line-height的基友关系
- CSS-行内框、行框、行高
- CSS中设置DIV垂直居中的N种方法 兼容IE浏览器
- web iphone css 兼容性
- CSS3 transition 属性
- CSS滤镜(Filters)
- CSS3 Flexbox布局
- css 设置字体
- JQ添加移除css样式
- 关于display inline-block的对齐问题
- 为导航栏创建下拉菜单
- CSS的三种使用方法。 行内样式: 内嵌式: 外部式:
- css 选择器 有待练习
- css 注意点
- css 选择器
- CSS3图片缩放
- 移动web适配利器-rem In CSS3
- css3transform应用