懂得如何运用box-sizing之前,必须需要了解一下常规盒模型和怪异盒模型(IE盒模型)。 我们都知道盒模型从里到外主要包括:content,padding,border,margin。如下图:
两种盒模型的宽度width
标准盒模型的width = content
怪异盒模型的width = content + padding*2 + border*2
也就是说,一个div,他的内容宽content为100px,padding为10px,border为1px,margin为10px,那么在标准盒模型的解析下,他的width = 100px,也就是content的宽度 而在怪异盒模型的解析下,他的width = 100px + 1px*2 + 10px*2 = 122px
。
box-sizing的作用
了解完这两种盒模型后,在介绍一下box-sizing,他一共有3种值:content-box,border-box,inherit。inherit就是继承父元素的box-sizing值,这里不做介绍。 centent-box就是已标准盒模型的方式解析当前盒子,即此时盒子的width = content
的宽度 border-box就是已怪异盒模型的方式解析盒子,此时width = content + padding*2 + border*2
聊到这里已经很明了了,box-sizing的作用就是规定当前盒子已哪种方式解析当前盒子。
使用场景
当然,box-sizing在某些场景下,是非常好用的。比如我们想做一个内边距10px,边框为2px,最终包括边框宽度为100px的div,之前的做法是先算出内容宽width = 100px - 10px*2 - 2px*2 = 76px
。这种方式没问题,但是多少有点繁琐,将width的计算给以开发人员来完成显然是不合适的。 此时我们可以把它交给交给计算机来完成,这就需要用到box-sizing来完成。这里通过把div的box-sizing设置为border-box,我们就可以简单的将width设置为100px,其余的padding和border按照给定好的值一一填入,就可以完成这一切工作,省去了人为的计算内容宽content的过程,减少计算量的同时减少了错误率,何乐不为?