Box -sizing 盒类型
它主要用来告诉浏览器怎么计算元素的展示宽高的。
1. 官方定义
Box -sizing 属性 允许您以特定的方式定义匹配某个区域的特定元素。
2. 解释
在开发过程中，当有 一个 固定宽高的元素带有 boder 或 padding 的时候，它在 IE 中展示和 Chrome 中是不同的，如果我们不设置这个 属性 ，那么在 IE浏览器中它的实际宽高是小于 Chrome 浏览器的这是为什么呢？
Chrome 浏览器使用的是标准盒模型 content- Box ，IE 盒模型是 border- Box 。
下面就是 一个 盒模型的结构图
3. 语法
Box -sizing : content- Box | border- Box
它接受 一个 参数 content- Box 或 border- Box 。
上图是 一个 盒 模型结构
content- Box 的计算方式是:
width = content width;
height = content height
border- Box 的计算方式是：
width = border + padding + content width
heigth = border + padding + content heigth
4. 兼容性
IE Edge Firefox Chrome Safari Opera ios android 10+ 12+ 28+ 4+ 6.1+ 12.1+ 7+ 4.4
5. 实例
不是设置 Box -sizing 分别在不同浏览器中的展示。
< div @H_ 419 _162@class = " demo " > 网 CSS3 学习 分享 </ div >
.demo {
width : px ;
height : px ;
background : #000 ;
color : #fff ;
padding : px ;
border : px solid red ;
}
效果 图
不同浏览器中的展示 效果 图
说明:左侧是 Chorme 浏览器右侧是低版本 IE 浏览器。
给上面 demo 中设置 Box -sizing 为 border- Box 。
.demo {
width : px ;
height : px ;
background : #000 ;
color : #fff ;
padding : px ;
border : px solid red ;
Box -sizing : border- Box ;
}
效果 图
使用`border- Box ` 效果 图
给上面 demo 中设置 Box -sizing 为 content- Box 。
.demo {
width : px ;
height : px ;
background : #000 ;
color : #fff ;
padding : px ;
border : px solid red ;
Box -sizing : content- Box ;
}
效果 图
使用`content- Box ` 效果 图
6. 经验 分享
推荐大家设置 Box -sizing 为 border- Box 这样方便我们写样式不必在去减去 padding 也不会造成 IE 和 Chorme 这类浏览器展示不同的 bug 。
7. 小结
如果不设置 Box -sizing 不同浏览器会有不同的计算方式。
gradients 渐变 ? ?box-shadow 阴影