不要放弃使用borderbox

　　不知道有多少老前端像我这样&＃xff0c;在项目中很少使用box-sizing这个属性值。因为CSS2.1中只有content-box这一种盒子模式&＃xff0c;在CSS3还没有流行的时候&＃xff0c;大家在工作中大量基于这种盒子模式写CSS样式&＃xff0c;导致很多老前端即使是现在也默认使用content-box这种模式&＃xff0c;很少手动写box-sizing属性声明border-box盒子模式。最近在工作中发现&＃xff0c;合理使用border-box确实可以提升开发速度。下面介绍一种工作中遇到的使用border-box的地方。

　　一个单页应用&＃xff0c;我们的公共样式把页面的body背景色给设定好了&＃xff0c;其中有一个页面需要另一种背景色&＃xff0c;而且要全部覆盖整个浏览器视窗。自然的&＃xff0c;我们先把width和height声明为100%。但设计图里的页面与浏览器视窗四周都有10px的边距&＃xff0c;无论是设置margin还是padding&＃xff0c;都会在浏览器里出现滚动条。这是因为子元素的width和height的百分比是基于父元素的content计算的&＃xff0c;在content-box模式下&＃xff0c;导致子元素的盒子整体尺寸超过了父元素&＃xff0c;所以出现了滚动条。以前&＃xff0c;因为自己习惯用content-box&＃xff0c;所以用CSS表达式calc(100% - 20px)来hack掉。但若大量使用CSS表达式会影响页面性能的。因此&＃xff0c;这个时候使用border-box就是一个很好的选择。子元素的width值已经包含了padding值&＃xff0c;所以设置padding不会导致滚动条的出现。

 

参考: css样式的百分比都相对于谁&＃xff1f;