当前位置：首页 > Web前端 > HTML

Margin合并，崩溃，清除浮动

时间：2023-04-02 18:42:29 HTML

这是我的第一篇掘金文章，希望大家不要嫌弃。我还是一名大学生，只想把所学写下来，加深印象，记录自己的成长过程。本文主要介绍HTML和CSS的一些小知识点。首先，我想谈谈保证金合并和保证金崩溃这两个小“错误”。先解释一下什么是margincollapsing：所谓margincollapsing就是当两个垂直的margin相交，形成一个margin。合并边距的高度等于两个合并边距的高度中的较大者。按照我个人的理解，marginmerge一般是兄弟之间，margincollapse一般是父子之间。先说保证金合并。话不多说，我们直接上代码。创建两个div

样式如下`.app{height:60px;margin-bottom:100px;background-color:#165;}.app2{高度：60px;边距顶部：100px；background-color:#981;}```当我们给.app加上margin-bottom:100px，但是当我们给.app2加上margin-top:100px;，发现一点变化都没有。这就是边距合并，兄弟元素之间会选择一个较大的边距值作为最终的边距值。让我们谈谈保证金崩溃。同样的方法创建两个div`

`我们为大的设置margin-top:100px，也就是.app；它变成这样：我们正在为.app2设置margin-top:100xp；我们发现它没有动。这时候感觉是设置不对或者写错了，但是怎么看都是对的，但是为什么结果是这样呢？我明明加了margin-top:100px的样式；到.app2，为什么它不动？，这时候，我们尝试增加.app2的margin-top值，奇迹般的发现它动了，而且不仅动了，而且还和它的父亲一起动了。这是带着全家去跑步的节奏。这时你觉得奇怪为什么？因为垂直方向的maigins会合并，就好像parent没有top一样，是open的，他们取最大的。你不贪心，看笑话而已。看下面错误的解决方法：当我们在```中添加```border-top:10pxsolidyellowgreen```。我们的错误也已修复。![](https://user-gold-cdn.xitu.io/2018/12/9/16792a87c3231494?w=229&h=295&f=png&s=4253)是不是很开心，但是你不觉得奇怪吗？有一个额外的```边框```。消除？那么这个问题并没有解决。那怎么办呢，是不是想着缩小呢，那就试试吧，我把```10px改成了1px```。是不是感觉看不见，但是我们放大还是能看到。这时候你是不是想到换个颜色，那就换个颜色吧。我把颜色改成透明的，肯定是看不见的，也解决了问题。是不是很开心，但是如果我用这个方法解决，我觉得没必要写了。请记住，我们不要轻易改变DOM结构，不要为了解决一些问题而添加无意义的标签或样式。2、在说解决方案之前，我们先了解一下什么是BFC（不是KFC）。BFC（Blockformattingcontext）直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-levelbox参与。它规定了内部Block-levelBox如何布局，与该区域外部无关。简单的说就是可以通过BFC改变一个元素的渲染规则。听起来不错吧。那么BFC是属性还是元素，NO！不过，他似乎并没有太大的作用，只是解决了这个所谓的bug，就好像是为它而生一样。那么如何触发一个元素的BFC呢？这很简单。您几乎可以随时触发元素的BFC。是不是很混乱，什么！.这里有几个css属性，每天必用：1.浮动元素，float是none以外的值；2.定位元素，position(absolute,fixed)；3、显示为以下值inline-block、table-cell、table-caption之一；4、溢出可见以外的值（hidden、auto、scroll）；```你熟悉吗，上面列出的BFC可以触发每个盒子的BFC，就这么简单。当我们添加display:inline-block;to.app：我们发现.app2的最前面已经变成了.app，不再是浏览器了。或者我们把.app设置成overflow:hidden，发现也可以解决margin合并的问题：只是把多余的部分隐藏了。这就引出了第二个问题：我们应该使用哪个？其实我不知道，你是不是很惊讶，我不知道你写了什么，写一会，下面评论区喷死你。其实我真的不知道用哪一个，要看你的实际需要来决定用哪一个。你需要权衡利弊。如果你的需求不是隐藏多余的，那你设置个overflow:hidden是不是很尴尬。好了，margincollapse解决了，接下来合并剩余的margin，同样应用上面的BFC规则。将兄弟元素作为子元素放置在块级元素中，并将其父元素的渲染规则设置为BFC。但不推荐，为什么？因为这样你会改变HTML文档的结构，所以改也行，不能动就别动。那我们怎么解决呢？接下来我要放大了，别吓着你。我的解决办法是：无解！，是的你没有看错，无解！。就是直接改变其中一个外边距的值。其实遇到marginmerging的时候，为什么要给child设置一个，给parent设置一个，最后想着改变他们的渲染规则甚至改变html结构。既然取了大的值，就应该给它一个大的值。比如你想让它们的上下间距都是200px，那么就必须有margin-top:100px和margin-bottom:100px，直接取一个margin-top|就可以了。底部边距：200px。接下来说说漂浮前清除漂浮效果的效果，见下图：漂浮后的效果，见下图：有什么区别，你可能会说？没有区别，但是你没发现看不到parent了，因为parent的高度没有了（我没有给parent指定一个固定的高度）。说白了，里面什么都没有，养不起。然后你会说，给他一个大买卖。好的，听你的。他长高了家长就看得出来了，还是尽量多给他生孩子吧。（为了看的方便，我把子元素的背景改成了border，希望不会影响到你）。你可能认为子级超过了没什么，但是我们想要的是随着子级数量的增加自动增加父级的高度。那么怎么办呢，回到清浮的话题。如何清除它？你会想到clear:两者都有，那就试试吧。添加了p标签并设置clear:都解决了问题。但是如果你改变了结构，那就意味着不建议再尝试另一种方法。还记得伪元素吗？说白了，parent之所以没有高度，是因为child飘出文档流，和parent不在同一个流中，所以parent看不到他们，height自然不会被拉长。既然说到了伪元素，那我们就用伪元素来解决吧。让我们设置`::after{content:"";clear:both;}```给父母看。发现没有变化，哈哈。你可能忘记了伪元素是行内元素，只有块元素可以清除浮动。这里再强调一下，凡是有inline的内联元素都可以看到浮动元素，而块元素是看不到浮动元素的。当我们把after变成块元素的时候，发现float被清除了。其实这个方法并不是唯一的清浮方式，只要触发父级的BFC，同样可以清浮。这里我就不演示了，原因是：我说只有块级元素是看不到浮动元素的。当你使用上面推荐的方法触发BFC时，实际上是把它们变成了内联元素，所以高度被拉伸了。所以我们最好在浮动后主动清除浮动，以免以后出现奇怪的问题。3.用HTML+CSS画一个等腰梯形。HTML部分：CSS部分：.app{width:0;高度：0；border:100pxsolid#561;}首先，让我们画一个三角形。我们先来看看边框的上、右、下、左是怎么划分的。不要吐槽我的审美，我真的不知道该用什么颜色。边界是这样划分的，三角形你见过吗。这样我们就把其他三个方向的边框都设置成透明的，画一个三角形。border-top:100px实心透明；border-bottom:100pxsolid#561;左边框：100px实心透明；border-right:100pxsolidtransparent;这与梯形有什么关系？.下面就不解释了，直接上代码。.app{位置：相对；宽度：100px；高度：100px；背景色：#561；}.app::after{内容：“”；位置：绝对；右：-100px；边框：50px实心透明；-底色：#561；左边框颜色：#561；}.app::before{内容：“”；位置：绝对；左：-100px；边框：50px实心透明；边框底部颜色：#561；右边框颜色：#561；}这只是我个人的理解和实现。4.说说一些小知识点。其实我们在设置字体大小时，就是设置了字体的高度。其实元素的line-height也可以决定元素的高度。.app{宽度：100px；颜色：#fff；背景色：#561；}当我们设置line-height=100px:就变成这样了，其实这也是垂直居中的一个原则。小结：以上是我所知道的一些知识点的总结。希望能对一些人有所帮助，同时也让我加深了对这些知识点的理解和理解。作为一名自学前端的大学生，希望大佬们指出错误，一起讨论。感激的。

上一篇：前端日常实践：72#视频演示如何使用纯CSS制作气泡填充按钮效果

下一篇：零基础教你学前端——43.初识SVG

Margin合并，崩溃，清除浮动相关文章

最新推荐

猜你喜欢