Boostrap入门准备之border-box

标签：

前言：在Boostrap学习过程中，尤其是网格系统的使用中，遇到了许多的坑，如果在学Boostrap之前，先做好一些准备功夫，就可以很好的避开这些坑了。现在，我们首先来说说border-box这个属性。

          在Boostrap自带的css文件：boostrap.css中，有这样一段代码：

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

<div class="outer" style="width:500px; height:500px; padding:100px; border:1px solid #000; background-color: yellow; ">
          <div class="inner" style="width:100%; height:100%; background-color:pink;"></div>
      </div>

运行代码得出：outer的高度为702px，宽度为702px，inner的宽度为500px，高度为500px；这里大家应该都没什么疑问吧，我们现在看看另外一段代码：

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

<div class="outer" style="width:500px; height:500px; padding:100px; border:1px solid #000; background-color: yellow; ">
          <div class="inner" style="width:100%; height:100%; background-color:pink;"></div>
      </div>

        导致这样的结果的原因是：box-sizing:border-box使得元素的宽高不会受padding和border的影响，如上面的代码，即使outer有padding,border,但是padding和border都不会影响outer的宽高，outer的宽高还是500px；但是padding和border跑哪里去了？答案：跑到里面去了！打开浏览器的调试工具，看outer的样式详情： 

     我们可以明显的看到，padding和border都是有效的，只是它们占据了outer的内部空间，由于padding:100px占据了outer的200px宽高值，border占据了2px的宽高值，所以inner只能获得298px的宽高值。

    如果大家有ie下的网页开发经验的话，就会发现，box-sizing:border-box就是低版本ie的怪异模式。

Boostrap入门准备之border-box

标签：

原文地址：http://blog.csdn.net/wbr306408943/article/details/51348542