两种盒模型的区别_标准盒模型和怪异盒模型的区别

作者：从前慢现在也慢 | 2024-05-27 09:00:54

踩

标准盒模型和怪异盒模型的区别

1.标准盒模型
标准盒模型是 box-sizing: content-box , 默认值，他的width就是content的width，盒子总宽度=margin+padding+width+border，盒子的大小会以内容优先，自动扩展，子元素可以撑开父元素，就像气球一样，大小随内容的变化而变化

Content-box图像：
1

在这里插入图片描述

2.怪异盒模型
怪异盒模型：box-sizing: border-box，也是 IE盒子，父元素的盒模型确定，子元素无法撑开父元素的盒模型
可以理解为现实生活中的铁箱子，大小不能被内容改变。

此时的 width=content+padding+border

盒子总宽度=width+margin
1
2
3

border-box图像：

在这里插入图片描述

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