css3 box-sizing属性
2016-03-14 17:37
639 查看
box-sizing兼容性参考这里:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing
box-sizing说明:
box-sizing属性的三个值:content-box(default)、border-box、padding-box
content-box:border、padding不计入width
padding-box:padding计入width
border-box:border、padding都计入width(怪异模式)
box-sizing示例:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing
box-sizing说明:
box-sizing属性的三个值:content-box(default)、border-box、padding-box
content-box:border、padding不计入width
padding-box:padding计入width
border-box:border、padding都计入width(怪异模式)
box-sizing示例:
.content-box{ box-sizing:content-box; -moz-box-sizing:content-box; width: 100px; height: 100px; padding: 20px; border: 5px solid #E6A43F; background: blue; } .padding-box{ box-sizing:padding-box; -moz-box-sizing:padding-box; width: 100px; height: 100px; padding: 20px; border: 5px solid #186645; background: red; } .border-box{ box-sizing:border-box; -moz-box-sizing:border-box; width: 100px; height: 100px; padding: 20px; border: 5px solid #3DA3EF; background: yellow; }
相关文章推荐
- CSS2【3】-- Positioning
- 一步步教大家编写酷炫的导航栏js+css实现
- [DIV/CSS] 用CSS和JS打造一个简单的图片编辑器
- 谈谈css王朝的px,em,rem之间的那些事儿
- iOS - 同一个Label的不同样式显示
- [DIV/CSS] 【译】下一代选择器:CSS4
- 自定义 <input type="file" /> 样式
- CSS3:布局
- 2016.3.14__CSS 浮动__第五天
- 手链样式( 使用全排列函数next_permutation)
- Sass mixin 使用css border属性画三角形
- dispaly:table布局
- 2016.3.14__CSS 盒模型_第四天
- css3中-moz、-ms、-webkit分别代表的意思
- css height:100%失效
- css: position 与 z-index 问题(2)
- css:position 与 z-index 问题(1)
- css3(border-radius) 边框圆角详解
- css文本换行
- css学习任务二:切图写代码