Css盒模型的应用

       我是一名在疫情期间逆战班坚持学习的学员，在这里我想跟大家分享一下关于css盒模型的应用。

       什么是盒模型？顾名思义，就像是一个用来存放东西的盒子，其中放的东西称之为元素。在网页中盒模型规定元素是如何显示的，并且规定了元素之间的关系。在平面空间内，他可以控制元素和元素之间的位置关系。

       盒模型的组成：盒模型由四部分组成，content（内容）+padding（内边距）+border（边框）+margin（外边距）。

一、content（内容）是用来存放内容元素的，是主体部分；
二、padding（内边距）有四个部分，padding-top（上内边距）padding-right（右内边距）padding-bottom（下内边距）padding-left（左内边距）它们是用来控制元素四周与盒子之间的距离的；
三、border（边框）是盒子的边界，可以通过显示边界线来看盒子的大小；
四、margin也有四部分、margin-top（上外边距），margin-right（右外边距），margin-bottom（下外边距），margin-left（左外边距）它们是用来控制盒子与盒子之间的距离的。

       其中margin存在bug，如当两个盒子垂直排列时，两个盒子之间的外边距会合并取最大值显示；如图所示1元素上下外边距30px，2元素上下边距20px，结果1，2元素相距30px。

       如果是大盒子（父元素）套小盒子（子元素）的结构，且父元素未添加边框，小盒子（子元素），添加margin-top属性值时会错误的把属性值赋给大盒子（父元素）的margin－top。

       其bug可用BFC方法来解决，给父元素和子元素添加浮动属性；给父元素添加overflow：hidden；可以给父元素添加边框；把margin改成padding。