box-sizing 的属性及其作用

box-sizing的属性值

box-sizing:content-box
box-sizing:border-box
box-sizing:inherit

content-box(默认的盒子,设置padding和border会撑开盒子,使盒子比原本的宽高更大)

box-sizing的默认属性值
由 CSS2.1 规定的宽度高度行为。
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。

border-box(包含了padding和border,设置两者不会撑开盒子,盒子大小不会改变)

为元素设定的宽度和高度决定了元素的边框盒。

就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit(规定应从父元素继承 box-sizing 属性的值。)


版权声明:本文为qq_44537625原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。