css3系列之box-sizing

box-sizing

box-sizing: 俗称ie6 的混杂模式的盒子模型。首先来了解一下 ie6 的混杂模式，和我们常用的盒子模型有什么不一样

正常模式下：我们设置的 width 和 height 就是盒子的 content 区的大小，但是在 ie6 的混杂模式下，设置的 width 和 height 就是盒子的整体 width height。

ie6 的混杂模型呢，你设置的宽，和高，就是盒子的大小的最终宽高，并不会因为你添加了 padding 和 border 而改变。

需要用混杂模式渲染的元素，就添加上， box-sizing：border-box 即可。

box-sizing：

　　参数： content-box (默认值，也就是我们正常模式)

　　　　　 border-box (ie6 的混杂模式)

为啥叫 ie6的混杂模式呢? 因为他确实跟 ie 有关，在以前 ie6 的渲染盒子模型，就是按照这个标准来渲染的。到了后来，w3c标准出来了之后就换成正常模式了。 w3c 觉得，ie6 的这个渲染盒子的模式不错，就跟ie 说，诶? 你这个模式不错，可以给我用用吗? ie 说，行啊。然后就把他添加到css3 里面去了。

说了这么多，这个模式，在什么场景下适用呢？其实，我们在开发的过程中，会遇到一些需求，就是你已经布局好了，但是又要加入padding 或者 border，这个时候，一定会影响整个的布局，因为你的宽高什么的，都已经设置好了，再添加，就会挤出去。这个时候，想添加上 padding 或者 padding 不影响原来的布局的话，就可以用上了。也不用刻意的去计算宽高加上 padding 需要减多少。

下面举两个小例子：

像上面这种，宽，或者高不确定的情况下，又要添加 padding 和 border，又要保证布局不改变，使用 box-sizing：border-box。是很好的选择

还有一种情况，比如产品经理告诉你说，添加一个 input 输入框高30px，宽是300px，文字要跟输入框的上下左右要有10px 的间隙，我们一般设置间隙吧，都是用padding实现的。

那么，我们一般拿到这个需求的时候一顿操作猛如虎：

巴特西

css3系列之box-sizing

最新文章

热门文章