css中塌陷问题怎么解决，margin和padding应该怎么区分

2024-03-07 21:24:39

css基础篇（第三篇）

回顾

在上一篇中我们基本了解了css中background的综合写法以及css中的权重优先级问题，在这一讲中我们会认识一个比较重要的padding和margin，并且会了解到css中的塌陷问题，这在往后工作和学习中都是必不可少的部分甚至相当重要。如果不了解或者不太熟悉css基础的话，建议去看一看之前的篇幅，这一篇接着css开始讲。

看透网页的本质

在现代的html布局中，我们基本上都是使用盒子模型来布局，简而言之就是利用div来布局，所以说往后对于整个盒子的控制是一个重点。最重要的是需要学会“心中有图”，在拿到设计稿的时候，一定需要先想后写，思考是一个非常重要的事情。

盒子模型

盒子模型一般分为三部分

内边距————padding
外边距————margin
边框————border

盒子边框

下面先来说说盒子的边框，边框在未来也十分重要，基本上盒子都会用到边框。

border-width：定义边框粗细，单位是px
border-style：边框的样式
1. solid：实线
2. dashed：虚线
3. dotted：点线
border-color：边框颜色
综合写法：border：2px solid red；（没有顺序）
注意：综合写法是非常重要的，在往后的工作中是用的最多的习惯。所以一定要学会综合的写法，多写一点慢慢就熟悉了。

除此之外，盒子还可以设置不同方向的线条，例如：可以设置上面的线条和下面的线条等等。如下图所示

  // 结构代码
  <div class="content">
    <div class="content-a"></div>
    <div class="content-b"></div>
    <div class="content-c"></div>
    <div class="content-d"></div>
  </div>
  
  // 样式代码
  .content {
    display: flex;
  }
  .content div {
    width: 200px; height: 200px;
    margin-left: 20px;
  }
  /* 盒子中只有上面的一条线 */
  .content-a {
    border-top: 1px solid red;
  }
  /* 盒子中只有下面的一条线 */
  .content-b {
    border-bottom: 1px solid red;
  }
  /* 盒子中只有左边的一条线 */
  .content-c {
    border-left: 1px solid red;
  }
  /* 盒子中只有右边的一条线 */
  .content-d {
    border-right: 1px solid red;
  }

还有一个也比较重要，如果盒子相邻的话，势必在两个盒子的中间有一条线是重叠的，所以如果想消除这个重叠的线，让盒子线都是一样的话就需要用到

// 表示相邻边框合并在一起
border-collapse：collapse；

内边距

内边距：内容和边框之间的距离

padding-left：左内边距
padding-right：右内边距
padding-top：上内边距
padding-bottom：下内边距

对于 padding 来说还是有简写的形式，这也在日常的工作中用的比较多的方式。

padding：20px 表示：上下左右内边距都是20px
padding：10px 20px 表示：上下 10px，左右 20px
padding：10px 20px 30px 表示：上 10px 左右 20px 下 30px
padding：10px 20px 30px 40px 表示上10px、右20px、下30px、左40px

盒子内边距的尺寸计算

在设置完内边距之后一定会对盒子之间的距离进行一个大小的计算，如果给盒子一个宽高的话，再给padding值，盒子就会撑大，如果想要原来盒子的大小，必须得减去padding的值如下图

此时是没有设置 padding 值盒子是正常显示的
我们现在在盒子中添加一个 padding-left：20px 再看看效果如下图

综上所述，可以看出，如果设置了宽高的话，再加上padding值，盒子就会出现增加不必要的值，所以就需要减去相应的 padding 值，让盒子还原到之前的大小。例如在padding左右添加了20px，那么盒子的宽度就需要相应的从 200px 减去到 180px，才能保证盒子的大小是不变的，但是如果不想使用这种方式的话，就不添加宽度或者高度，那么盒子添加padding属性的话，就不会撑开初始盒子的大小

外边距

外边距指的是盒子的外边距，用 margin 来表示，和 padding 的用法基本上是一样的，只不过 padding 指的是盒子的内边距，而 margin 说的是盒子的外边距。

margin除了能让盒子右外边距之外，还可以让盒子居中显示，一般有三种写法

margin-left：auto，margin-right：auto
margin：auto
margin：0 auto（最常用）

所以一定要记住以下两种的居中方式，这在未来的工作当中是使用相当多的

text-align：center————表示文字居中
margin：0 auto————表示盒子居中

插入图片和背景图片的区别

背景图片和插入图片在我们往后的工作中用的也非常的多，因为图文混排的需求是非常多的，而且往往需要对照设计稿进行像素级还原。

背景图片必须用 background-position：30px 30px；来移动位置
插入图片可以通过 margin 来移动

初始化清除元素的内外边距

记得在之前的一篇中讲到，因为浏览器初始化都有会一个默认的 padding 和 margin，而大部分前端人员都不需要这些原有的样式，因为到时候还原设计稿的时候不好控制，所以会在一个初始化一个css文件，将里面的默认样式全部清除还有设置一些自己喜欢的样式等等。这就用到了 * ，初始化将 padding 和 margin 设置为0

// 初始化将 padding 和 margin 设置为：0
* {
    padding：0px;
    margin：0px;
}

外边距合并（也称：塌陷）

这个问题是由来已久的问题了，而且是每个前端人员必定会经历的一个痛点，是css有史以来一直遭到调侃最多的问题。

- 两个外边距，如果一个设置了底部，一个设置了顶部，就会出现外边距合并。取一个合并，下面如图来具体看一看

从图中可以看出 first 和 second 两个div 分别都设置了 20px 的外边距，按理说到最后应该是相距40px，但是就出现了外边距合并的问题，会将两个外边距合并取最大的值，所以最后是两个盒子相距20px。

嵌套关系的外边距合并

在一个盒子中嵌套一个子盒子，如果子盒子设置 margin 的话，然后父盒子也会跟着子盒子一块掉下来，这就出现了塌陷的问题。如下图所示

如果想要解决这个问题最常用的方法就是给父元素添加一个 overflow：hidden之后，是一个正常的显示，如下图。

除此之外还有两种方式来解决这个塌陷的问题：

可以为父元素定义上边框来解决
可以为父元素定义上内边距来解决
为父元素添加 overflow：hidden（最常用）
好了，外边距合并/塌陷问题基本上就是这些了，可以下去自己在代码中试一试，往后的工作中会经常遇到这些问题，基础一定要熟练。

扩展

圆角边框

在之前css中是没有圆角这个概念的，所以之前的前端程序员写圆角是非常麻烦的一件事情，但是自从css中出现了 border-radius 之后就拯救了没有圆角的问题。如下图所示

在图中设置了盒子，之后设置 border-radius：50%，就会显示出整个盒子变成了圆，在第二个中如果想让之后的搜索框或者按钮也称为圆形看着更贴近用户体验的话，可以设置高度的一半，就会出现一个椭圆形。这个在工作中也经常用到，可以自己的代码中练习练习。

盒子阴影

盒子阴影同样是一个比较重要的知识点，因为前端中的样式肯定会出现虚实相像，所以在页面中也会出现盒子阴影的问题。

语法：box-shadow：水平阴影垂直阴影模糊距离（虚实）影子大小颜色（rgba（0，0，0，0.3））
例如：box-shadow：2px 2px 2px 2px rgba（0，0，0，0.3）

下去，可以自己可以在代码中多加练习

好了，今天的css第三篇就讲完了，欢迎留言交流~

码农公寓