【前段基础入门之】=＞ 吃透CSS元素盒模型

导语

在正式了解盒模型之前，我们应该，先了解，在CSS 中元素的几种不同显示模式。方能让我们后续更加透彻清晰的了解盒模型。

元素的显示模式

• 块级元素（block）
  
• 行内元素（inline）
  
• 行内块元素（inline-block）
  
  扩展：元素早期只分为：行内元素、块级元素，区分条件也只有一条：“是否独占一行”，如果按照这种分类方式，行内块元素应该算作行内元素。

---

元素的显示模式划分

• 块级元素（block）
  

• 行内元素（inline）
  

• 行内块元素（inline-block）
  

---

修改元素的默认显示模式

有时候，我们需要使用到某个元素，但是这个元素的默认显示模式，并不是我们所需要的，这是我们就可以通过 CSS 中的 display 属性可以修改元素的默认显示模式，常用值如下：

---

CSS 会把所有的 HTML 元素都看成一个盒子，所有的样式也都是基于这个盒子

盒模型的组成部分

图例：

• 外边距：margin
• 边框：border
• 内边距：padding
• 内容区：content

一个元素盒子的大小包含： = content + 左右 padding + 左右 border

---

盒子内容区（content）

内容区默认宽度

---

盒子内边距（padding）

padding 复合属性的使用规则：

1. padding: 10px; 四个方向内边距都是 10px 。
2. padding: 10px 20px; 上下 10px ，左右 20px 。（上下、左右）
3. padding: 10px 20px 30px; 上 10px ，左右 20px ，下 30px 。（上、左右、下）
4. padding: 10px 20px 30px 40px; 上 10px ，右 20px ，下 30px ，左 40px （上、右、下、左）
   

---

盒子边框（border）

---

盒子外边距 （margin）

margin 的注意事项

margin 塌陷问题

什么是 margin 塌陷？

答：第一个子元素的上 margin 会作用在父元素上，最后一个子元素的下 margin 会作用在父元素上。

如何解决 margin 塌陷？

• 方案一： 给父元素设置不为 0 的 padding 。
• 方案二： 给父元素设置宽度不为 0 的 border 。
• 方案三： 给父元素设置 css 样式 overflow:hidden*

---

margin 合并问题

什么是 margin 合并？
答：上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加。

如何解决 margin 合并？

无需解决，布局的时候上下的兄弟元素，只给一个设置上下外边距就可以了

---

处理盒子内容溢出

---

隐藏盒子元素的方式

• 方式一：visibility 属性

visibility 属性默认值是 show ，如果设置为 hidden ，元素会隐藏。元素看不见了，但是依然还占有原来的位置（元素的大小依然保持）。

• 方式二：display 属性

设置 display:none ，就可以让元素隐藏。彻底地隐藏，不但看不见，也不占用任何位置，没有大小宽高

---

元素的样式继承

---

布局小知识

---

元素之间的空白问题

---

行内块的幽灵空白问题

---

总结：

以上就是有关CSS盒模型的精华部分知识点梳理，欢迎大家鉴赏学习，打好前端基础部分的知识，有利于后续的学习与实际开发。

---

🚵‍♂️ 博主座右铭：向阳而生，我还在路上！
——————————————————————————————
🚴博主想说：将持续性为社区输出自己的资源，同时也见证自己的进步！
——————————————————————————————
🤼‍♂️ 如果都看到这了，博主希望留下你的足迹！【📂收藏！👍点赞！✍️评论！】
——————————————————————————————