标准盒模型与IE盒模型之间的转换

首先上图，这两张很明显可以看出IE盒模型和标准盒模型之间的差别。

当然今天不是去细细追究两种模型具体是怎么去计算布局的，那个很多文章已经已经有过了，不再重复。以前刚开始学习盒模型的时候，就学到的是IE的盒模型不规范，不符合标准的盒模型，要加文档申明把IE的转换为标准的。要给文档头部加上 DOCTYPE 声明。让所有浏览器中都可以显示“标准 W3C 盒子模型”。为了让网页能兼容各个浏览器。殊不知，真正开发的时候其实IE模型更利于实际开发。

来说说为什么要将标准盒模型转换为IE盒模型

为什么IE盒模型更容易开发？先来解决这个问题。从上面两张图片对比可以看出来，标准的盒模型padding，border是不算在宽度之内的，所以当你比如要在一个容器里并排显示两个同样的盒子。你用标准模型时肯定会这样设置每个盒子50%.但是当你查看时会发现两个盒子紧紧挨在一起实在是不美观，所以你又设置padding:0 5%；然而这时候两个盒子宽度又超过了大容器的总宽度，所以你又得去调整盒子的40% 这样确实可以解决问题，可是这样你不觉得很不方便吗。。好了这时候就可以看出IE盒模型的好处了。就将两个盒子的宽度设置为50%，这时候就算你再怎么去调整padding都会在两个盒子的内部去调整，不会再影响布局。简直方便到不要不要的~~

那么怎样将标准盒模型转化为IE盒模型呢

在css3中有这样一个属性：

官方给的解释是：box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

再来看看box-sizing属性给出的几个值

content-box:这是由css2.1规定的宽度高度行为。什么是按css2.1的行为？意思就是说设置这个值之后，就会按以前规定的标准来显示，也就是按照标准的盒模型显示。之所以有这个属性以及这个值，可以看出w3c也意识到了自己规定的标准盒模型简直就是个坑。。

border-box:好了，前面絮絮叨叨这么多，就是为了引出这么个东西。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。所以w3c终于承认了人家IE盒模型的合理性。通过设置　 box-sizing的值为border-box来模拟这一规范。

盒模型这块看似很简单的问题，如果没搞的很清楚，也会造成很大的困扰，对开发进度产生影响。

box-sizing其它的值

• content-box
  • 描述：在宽度和高度之外绘制元素的内边距和边框。

 

 

• border-box
  • 描述：为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制

 

 

• inherit
  • 描述：继承 父元素 box-sizing属性的值

---

浏览器兼容性

• IE8及以上版本支持该属性，Firefox 需要加上浏览器厂商前缀-moz-，对于低版本的IOS和Android浏览器也需要加上-webkit-。实际上，很多reset.css或者normal.css里都包含如下CSS语句，也是比较赞成的用法：

*, *:before, *:after {
　　-moz-box-sizing: border-box;
　　-webkit-box-sizing: border-box;
　　box-sizing: border-box;
　　}

box-sizing 布局三栏目案例

div{
        height:700px;
        float:left;
}
div.left{
        25%;
        background:red;
}
div.cent{
        50%;
        box-sizing:border-box;/*可以改变元素以使其宽度包含填充*/
                /* 现在整个元素,包括填充在内,占页面总宽度的50%,所以元素的组合宽度为100%,这全程它们很好地适应于它们的容器.*/
        background:yellow;
        padding:0 20px;/*加了这个会使盒子内容溢出 但是box-sizing很好的自适应了*/
}
div.right{
       25%;
        background:blue;
}

<div class="left"></div>
<div class="cent"></div>
<div class="right"></div>

• 效果

 

 

 

作者：poetries
链接：https://www.jianshu.com/p/e2eb0d8c9de6
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。