CSS——两种盒模型_box-sizing 宽度包含pandding

作者：凡人多烦事01 | 2024-05-27 09:11:58

踩

box-sizing 宽度包含pandding

第一种是W3C标准的盒子模型（标准盒模型）
第二种IE标准的盒子模型（怪异盒模型）

标准盒模型width指的是内容区域content的宽度；
height指的是内容区域content的高度
在这里插入图片描述
W3C标准盒模型下盒子的大小 = width （ content ） + border + padding + margin

怪异盒模型中的width指的是内容、边框、内边距总的宽度；
height指的是内容、边框、内边距总的高度
在这里插入图片描述
怪异盒模型下盒子的大小 = width （ content + border + padding ） + margin

box-sizing属性是用来切换盒模型

box-sizing的默认属性是content-box

属性值	意义
box-sizing:content-box;	元素的宽高只包含content（W3C标准盒模型）
box-sizing:pandding-box;	元素宽高包含padding和content
box-sizing:border-box;	元素的宽高包含border、padding和content （常用，IE怪异盒模型）
box-sizing: inherit;	规定应从父元素继承 box-sizing 属性的值。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/630878