好用到冒泡的“box-sizing”页面布局神器！


关于“好用到冒泡”的说法，来自于《圆梦巨人》电影中好心眼巨人说的“好吃到冒泡”！本来以为和《进击的巨人》一样是个重口味的灾难片，结果去了 周围做的全是漫展迷和小朋友 WTF。。。。
关于box-sizing的兼容写法

  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;

为什么要用box-sizing: border-box;
在没有使用这个属性之前，我们在使用div进行盒子模型的布局时往往会受到内边距、边框的干扰，比如：
我们给一个div的宽度设置为100px

.test{
   width:100px;
   background:red;
   padding:10px
}

效果：
当我们是用内边距padding时，会额外增加它的物理宽度，比如：

.test{
   width:100px;
   padding:10px
   background:red;
   padding:10px
}

效果：
此时这个div在界面上表现的实际宽度为120px（100+10+10）；

这是一个很蛋疼的案例，如果我们不使用box-sizing，我们只能把.test的width属性减少20px，才能正常显示。为此带来的各种计算量将会产生很多.无论是可维护性还是方便将来的修改，我们这样做都很让人不舒服。

box-sizing: border-box;的厉害之处
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为border-box。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
比如我们这样编写：

使用padding

.test{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:100px;
background:red;
padding:10px
}

效果：

不使用padding

.test{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:100px;
background:red;
}

效果：

非常让人兴奋的是 box-sizing:border-box; 支持ie8及其以上的所有版本浏览器，包括chrome、火狐！

    共有 0 条评论

    Top
    ×