也说border-box盒模型
发布在点点滴滴2014年12月8日view:8221
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

border-box是css3的一个新属性,使用这个属性,和以往的content-box比起来,会有诸多便利之处,bootstrap3也使用的是这个border-box,甚至很多人认为,border-box才是我们真正所需要的盒模型。或许,这也是W3C为何加入这个属性的原因之一吧。<!–more–>

介绍

border-box与content-box有什么不同?我们先来demo一下,一探究竟。

#box1{
  box-sizing: border-box;
  width: 200px;
  height: 150px;
  padding: 10px;
  border: 4px dashed orange;
  background-color: gray;
  margin-bottom: 20px;
}
#box2{
  box-sizing: content-box;/*其实也可以不写这句,因为默认为content-box*/
  width: 200px;
  height: 150px;
  padding: 10px;
  border: 4px dashed orange;
  background-color: gray;
}

ok.来看一下效果: demo 嗯,这就是border-box;w3schools中对这个属性的描述: box-sizing 使用这个属性,再也不会因为修改border和padding而使修改布局大动干戈了。

最佳化实践

接下来就是如何在项目中使用这个属性了。借用一篇博客,http://www.paulirish.com/2012/box-sizing-border-box-ftw/ 这篇博客中描述了如何更好的使用这个属性。在此之前,我都是这样用的:

/*更改盒模型为border-box*/
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

嗯,或许你也是这样用的。* 选择器效率也不错,只要你不这样使用 .foo > * 。看了这篇文章过后我才发现,特么的原来我这样使用是有问题的。因为我强制全局所有的使用这个规范,这导致对组件十分不友好!

看看前辈是如何使用:

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

不错,使用了继承!而且没有使用浏览器前缀!因为现代浏览器,IE8+都是支持这个属性的。在不需要做兼容时,去掉前缀吧。给出一张兼容性的图片,也可以直接访问html5please.comsupport IE67我们使用那个.htc文件,最好使用IE条件注释来引入,毕竟15k的大小呢(不建议让无辜的现代浏览器用户来为这15k买单)。


<!--[if lte IE7]>  
    <link rel="stylesheet" href="css/ie--box-border.css">  
<![endif]--> 
* {  
     behavior: url(css/boxsizing.htc);  
}

嗯,就这样,兼容IE6+了,就算在中国这么严峻的形势下,也可happy的使用了。

反思

不假思索,不加思考的就这样用了border-box真的好么?border-box不会破坏本层级的布局,但是当我们改变一个盒子的表现时,我们会发现,所有的嵌套元素发生了一些改变,尽管我们并没有对嵌套元素做什么。这样,可能又会引入一些新的不可预知的问题,或许这些问题会导致布局比以往变得更加复杂!

到底该使用哪个?君请随意,适合自己的永远是最好的!

原创文章,本文地址:http://www.myqianlan.com/2014/12/08/talk-about-border-box/

评论
发表评论
3年前
添加了一枚【评注】:楼主我爱你
4年前

顶一下

4年前
添加了一枚【评注】:1
4年前
赞了此文章!
WRITTEN BY
myqianlan
走走停停,不忘初心。with an unchangable heart, we can expect that a good beginning makes a wonderful ending.
TA的新浪微博
PUBLISHED IN
点点滴滴

遇问题,记录之,分享之。

我的收藏