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

codeXiu
1,420 阅读9分钟

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

  1. 首先我想说一下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不得了。

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

浮动前效果看下图：

浮动后效果看下图：

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

父级有高度了也能看到他了，那我们试着多给他几个孩子。（为了方便看见我把子元素的背景换成了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时：
变成了这样，其实这也是垂直居中的一个原理吧。

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

avatar
文章
阅读
粉丝