元素宽度和高度的计算方法

box-sizing 元素宽高的计算方法

box-sizing 有三个值
content-box 默认值。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box 为元素设定的宽度和高度决定了元素的边框盒。就是说,为元素指定的任何内边距和边框都将在已设定宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit 规定应从父元素继承 box-sizing 属性的值。
意思是:在
box-sizing: border-box;下,width和height规定了整个元素的大小,包括border和padding的大小也已经计算在内了。会对元素内容进行压缩。
box-sizing:content-box;下,width和height只能规定了元素内容的大小,border和padding的大小并没有计算在内。

× 请我吃糖~
打赏二维码