关于普通盒子模型content-box和怪异盒子模型border-box

谈一谈刚学的盒子理解

首先我们要知道盒子自身的宽高不包括外边距（margin）！！，包括的有宽高（width，height），内边距（padding），边框（border）。

1.我们先了解一下box-sizing:content-box普通盒子模型

1.1.我们先创建一个普通盒子模型设置好自身的css属性

 

 

1.2我们可以从中了解到content-box普通盒子模型自身的宽高是由设置的元素宽高（普通盒子模型下元素内容宽高等于元素宽高）+内边距+边框，所以普通盒子模型是不固定的。

2.接下来了解一下border-box怪异盒子模型

2.1..我们先创建一个怪异盒子模型设置好自身的css属性

 

 

2.2 从中我们可以了解到border-box怪异盒子模型自身的宽高其实是元素设置的宽高本身，我们所设置的内边距，边框，都填充挤压到元素宽高本身。而元素内容的宽高也就是元素宽高-内边距-边框。所以怪异盒子模型是固定的。

拓展：当元素本身没有设置box-sizing盒子模型时，其元素默认content-box普通盒子模型

————————————————
版权声明：本文为CSDN博主「m0_66729677」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_66729677/article/details/125049862