CSS + HTML 小知识点大杂烩（margin合并、塌陷，清除浮动）-CSDN博客

这是我的第一篇掘金文章，希望大家不要嫌弃。我还是一名在校大学生，就是想把自己所学到的知识写出来，加深自己的印象，记录自己成长的过程，这篇文章主要是介绍HTML 、 CSS 的一些小知识点。

首先我想说一下margin合并和margin塌陷这两个小‘bug’。

先让我来解释一下什么是外边距合并： 所谓的外边距合并就是，当两个垂直外边距相遇时，它们将形成一个外边距。合并的外边距的高度等于两个发生合并的外边距的高度中的较大者。
按我个人的理解，margin合并一般是兄弟之间，margin塌陷一般是父子之间。
我们先说一下margin合并，话不多说，直接上代码。
- 创建两个div <div class="app"></div><div class="app2"></div>
- 样式如下.app { height: 60px; margin-bottom: 100px; background-color: #165; } .app2 { height: 60px; margin-top: 100px; background-color: #981; }
  
  当我们给.app加上margin-bottom: 100px时，
  
  但当我们给.app2也加上margin-top: 100px;时，发现根本没有变化。
  
  这就是margin合并，在兄弟元素之间会选择较大的一个margin值作为最后的margin值。
下面说一下margin塌陷。
同样的创建两个div<div class="app"> <div class="app2"></div> </div>

我们给大的也就是 .app设置 margin-top: 100px;变成这样：

我们在给 .app2设置 margin-top:100xp;发现没动。

这时候就感觉是不是设置错了或写错了，可是怎么看都是对的，但结果为什么是这样的我明明给 .app2加了 margin-top:100px;的样式了啊，它为什么不动，此时我们试着加大 .app2的 margin-top值神奇的发现动了,但不仅它动还带着它爸一起动，这是要带全家跑的节奏啊。此时是不是感觉很奇怪为什么啊？因为在垂直方向上的 maigin会合并，就好像父级没有了顶一样，露天的了，而且他们还会取最大的一个，你说贪不贪,看个玩笑啊。

看下面错误的解决方法：当我们给.app加上border-top: 10px solid yellowgreen（加10px只是为了方便看见）时，发现我们的bug也得到了解决。

是不是很开心，但你不觉得奇怪吗？多出来一个 border啊。去掉？那这个问题没解决啊。那怎么办，你是不是想着减小它，那我们试试，我把 10px改成了1px。是不是感觉看不见了，

但我们放大还是能看得见。这时你是不是想起来改颜色，那我们改个颜色。我把颜色改成了 transparent，这肯定看不见吧，而且也解决了这个问题。是不是很开心，但要是用这种方法解决我觉得我就没有写的必要了。 记住我们不要轻易去改变DOM结构不要为了解决一些问题去添加没有实际意义的标签或样式。

2.在说解决方案之前先让我们了解一下什么是BFC（不是KFC啊）。 BFC(Block formattingcontext)直译为"块级格式化上下文"它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。简单来说就是你能通过BFC来改变一个元素的渲染规则。听着是不是很厉害。

那BFC是不是一个属性或元素啊，NO！不过他好像没多大的作用但它就偏偏解决了这个所谓的bug，好像就是为它而生的。那怎么样触发一个元素的BFC呢，很简单，你几乎随时都在触发一个元素的BFC，是不是很懵逼,什么！。下面介绍几个css属性，这些你肯定天天在用：

  1、浮动元素，float 除 none 以外的值； 
  2、定位元素，position（absolute，fixed）； 
  3、display 为以下其中之一的值 inline-block，table-cell，table-caption； 
  4、overflow 除了 visible 以外的值（hidden，auto，scroll）；```
复制代码

是不是很熟悉，上面列出来的都能触发一个个盒子的BFC，就是这么简单。当我们给.app加上display: inline-block;时：

发现 .app2的顶变成了 .app不再是浏览器了。或者我们在给 .app设置成 overflow: hidden发现也能解决 margin合并的问题：

只不过超出部分隐藏了。这就带来了第二个问题：我们该用哪个呢？其实我也不知道，是不是很惊讶，不知道你写什么写一会底下评论区喷死你。其实我是真不知道用哪一个，它要根据你实际的需求来决定用哪一个。有弊有利需要你自己权衡。如果你的需求是超出部分不要隐藏那你设置一个 overflow: hidden是不是很尴尬。

好了，margin塌陷解决了，那就剩margin合并了，同样应用上面的BFC规则。

将兄弟元素分别作为子元素放在块级元素内，然后将其父级元素的渲染规则该为BFC。

但不推荐使用，为什么？因为你这样会改变HTML文档结构，没事你改它干什么，能不动就不动。那我们该怎么解决？接下来我要放大招了，别吓到你。我的解决办法是：不解决! ,对你没看错不解决!。

就是直接改变其中一个的外边距的值。

其实当你遇到margin合并时你为什么要子设置一个父设置一个，最后还想着改变他们的渲染规则有甚者改变HTML结构，它既然取大的值那你就给它个大的。比如你想要他们上下间距是200px，你非得一个margin-top: 100px，一个margin-bottom: 100px，你直接取一个margin-top | margin-bottom : 200px不得了。

下面我们来说一下清除浮动

浮动前效果看下图：

浮动后效果看下图：

你可能会说有什么区别？是没什么区别，但你没发现你看不到父级了，因为父级的高度没有了（我没有为父级指定固定的高度）。说白了是它里面没东西了所以撑不起它。那你会说，给他一个不得了。好，听你的。

父级有高度了也能看到他了，那我们试着多给他几个孩子。（为了方便看见我把子元素的背景换成了 border，希望不会影响到你）。

孩子超出去了，你可能觉得没什么，可是我们想要的是随着子级的增多父级高度自动增加。那我们怎么办，回到主题 清除浮动。那怎么清除呢？你会想到 clear: both，那我们来试试。

加上了一个 p标签，设置了 clear: both问题解决了。

但你是不是改了结构，那说明不可取试着换换别的方法吧。记不记得伪元素？说白了父级之所有没有高度是因为子级浮动 脱离了文档流跟父级不在一个流里了，所以父级看不到他们，高度自然就不会被撑开了。既然提到了伪元素那我们就用伪元素来解决。我们给父级设置 ::after { content: ""; clear: both; } 看看。发现没变化，哈哈。你可能忘了伪元素是行内元素，只有块元素才能清除浮动。在这里再说一下，所有的行内元素就是 带有inline的都能看到浮动元素，块元素看不到浮动元素。当我们把 after变成块元素后发现浮动被清除了。

其实清除浮动不只这种方法，只要你触发了父级的BFC同样也能清除浮动。我这里就不演示了，究其原因是因为：我说过只有块级元素看不到浮动元素，当你使用上面推荐的几种触发BFC的方法时，其实你是把他们变成了行内元素，所以高度就被撑开了。所以我们最好 float后，主动清除一下浮动，避免以后遇到很奇怪的问题。

3.用HTML + CSS画一个等腰梯形。

HTML部分：<div class="app"></div>

CSS部分：

.app {
        width: 0;
        height: 0;
        border: 100px solid #561;
}
复制代码

首先，先让我们画一个三角形。
- 我们先来看看border 的上、右、下、左是怎么分的。

别吐槽我的审美，我是真不知道用什么颜色。border就是这么分的，有没有看到三角形。这样我们把其他三个方向的 border设置成透明的一个三角形就画出来了。

border-top: 100px solid transparent;
        border-bottom: 100px solid #561; 
        border-left: 100px solid transparent; 
        border-right: 100px solid transparent; 
复制代码

这跟梯形有什么关系，是没关系，但是又有很大的关系。下面不解释了，直接上代码。

.app {
        position: relative;
        width: 100px;
        height: 100px;
        background-color: #561;
    }
    .app::after {
        content: "";
        position: absolute;
        right: -100px;
        border: 50px solid transparent;
        border-bottom-color: #561; 
        border-left-color: #561; 
    }
    .app::before {
        content: "";
        position: absolute;
        left: -100px;
        border: 50px solid transparent;
        border-bottom-color: #561; 
        border-right-color: #561;
    }
复制代码

这只是我个人的理解和实现。 4.说一些小知识点

其实我们设置字体大小的时候设置的是字体的高度。
其实一个元素的line-height也能决定一个元素的高度。

.app {
        width: 100px;
        color: #fff;
        background-color: #561;
    }
复制代码

当我们设置 line-height=100px时：

变成了这样，其实这也是垂直居中的一个原理吧。

总结： 以上是我对我了解的一些知识点的总结，希望可以帮到一些人，同时也让我加深了对这些知识点的理解和认识，作为一名自学前端的在校大学生希望大佬们指出错误，一起探讨。感谢。

CSS + HTML 小知识点大杂烩（margin合并、塌陷，清除浮动）

“相关推荐”对你有帮助么？