scc的盒模型 - 盒子模型包含哪些属性 -以及 - 盒子塌陷的解决方式

盒子塌陷原因以及解决方式：

原因：

情况一：

浮动元素无法撑开标准流的父元素，导致父元素高度塌陷

解决方法：

1.直接给父元素设置该高度

2.使用额外标签法清除浮动

3.使用单伪元素清除法

4.使用双伪元素清除法

5.给父元素设置overflow：hidden

情况二：

互相嵌套的块级元素，给子元素设置margin-top，父子元素的margin-top会合并，父元素会一起往下移动

解决方法：

1.给父元素设置border-top

2.给父元素设置padding-top

3.设置浮动

4.转换成行内元素

5.给父元素设置overflow：hidden

盒子模型包含哪些属性

css盒模型本质上是一个盒子，封装周围的HTML元素，它包含：边框、边距、填充和实际内容。盒模型允许我们在其他元素和周围元素边框之间的空间放置元素

包含的属性有：

1.margin（外边距）-清除边框外的区域，外边距是透明的

2.border（边框）-围绕在内边距和内容外的边框

3.padding（内边距）-清除内容周围的区域，内边距是透明的

4.content（内容）-盒子的内容，显示文本和图片

css的盒模型：

所有HTML元素都可以视为方框。在css中，在讨论设计和布局时，会使用术语`盒模型`或`框模型`。css框模型实质上是一个包围每个HTML元素的框。它包括：外边框、边框、内部价以及实际的内容。对不同部分的说明：

1.内容区（content）：它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。

2.内边距（padding）：内边距是内容区和边框之间的空间。

3.外框（border）：边框是环绕内容区和填充的边界

4.外边距（margin）：外边距位于盒子的最外围，是添加在边框外周围的空间