CSS3中的box-sizing

yibawuqing 2019-06-27

懂得如何运用box-sizing之前,必须需要了解一下常规盒模型和怪异盒模型(IE盒模型)。
我们都知道盒模型从里到外主要包括:content,padding,border,margin。如下图:
CSS3中的box-sizing

两种盒模型的宽度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的过程,减少计算量的同时减少了错误率,何乐不为?

相关推荐