公司常用网站开发软件,公司网站高端网站建设,房产信息网准确吗,小红书推广费用一般多少一、什么是 margin 合并
块级元素的上外边距(margin-top)与下外边距(margin-bottom)有时会合并为单个外边距#xff0c;这样的现象称为“margin 合并”。从此定义上#xff0c;我们可以捕获两点重要的信息。
块级元素#xff0c;但不包括浮动和绝对定位元素#xff0c;尽…一、什么是 margin 合并
块级元素的上外边距(margin-top)与下外边距(margin-bottom)有时会合并为单个外边距这样的现象称为“margin 合并”。从此定义上我们可以捕获两点重要的信息。
块级元素但不包括浮动和绝对定位元素尽管浮动和绝对定位可以让元素块状化。只发生在垂直方向需要注意的是这种说法在不考虑 writing-mode 的情况下才是正确的严格来讲应该是只发生在和当前文档流方向的相垂直的方向上。由于默认文档流 是水平流因此发生 margin 合并的就是垂直方向。
二、margin 合并的 3 种场景
margin 合并有以下 3 种场景。 (1) 相邻兄弟元素 margin 合并。这是 margin 合并中最常见、最基本的例如:
p { margin: 1em 0; }
p第一行/p
p第二行/p则第一行和第二行之间的间距还是 1em因为第一行的 margin-bottom 和第二行的 margin-top 合并在一起了并非上下相加。
(2) 父级和第一个/最后一个子元素。我们直接看例子在默认状态下下面 3 种设置是等 效的:
div classfatherdiv classson stylemargin-top: 80px/div
/divdiv classfather stylemargin-top: 80pxdiv classson/div
/divdiv classfather stylemargin-top: 80pxdiv classson stylemargin-top: 80px/div
/div在实际开发的时候给我们带来麻烦的多半就是这里的父子 margin 合并。 比方说现在流行官网使用一张帅帅的大图然后配上大大的网站标
题。由于这个标题一般在头图中间的某位置因此我们很自然会想到使用 margin-top 定位然后问题就来了。因为发生了“奇怪”的事情头图居然 掉下来了!针对此现象我特意制作了一个实例。
div classcontainerh2CSS世界/h2
/div.container {max-width: 1920px;height: 384px;background: url(cover.jpg) no-repeat center;
}
.container h2 {font-size: 128px;margin-top: 100px;color: #fff;
}问题产生的原因就是这里的父子 margin 合并。这里大家需要理清楚“合并”这个概念。 如果我们按照中文释义理解应该必须有多个对象才能进行合并否则根本就没有“合”这一说确实如此。但是这样理解也有可能会带来这样一个误区即你要出点儿力我要出点儿 力才叫“合”其实不然。放到我们这里这个父子 margin 合并的案例上就是父元素没有出一点力子元素出了全部的力然后最终的 margin 全部合到了父元素上。也就是虽然是在子元素上设置的 margin-top但实际上就等同于在父元素上设置了 margin-top我想这样大家就能理解为何头图会掉下来了吧。但是有一点需要注意“等同于”并不是“就是”的意思我们使用 getComputedStyle 方法获取父元素的 margin-top 值还是 CSS 属性中设置值 并非 margin 合并的表现值。
那该如何阻止这里 margin 合并的发生呢?
对于 margin-top 合并可以进行如下操作(满足一个条件即可):
父元素设置为块状格式化上下文元素;父元素设置 border-top 值;父元素设置 padding-top 值;父元素和第一个子元素之间添加内联元素进行分隔。
对于 margin-bottom 合并可以进行如下操作(满足一个条件即可): 父元素设置为块状格式化上下文元素; 父元素设置 border-bottom 值; 父元素设置 padding-bottom 值; 父元素和最后一个子元素之间添加内联元素进行分隔; 父元素设置 height、min-height 或 max-height。 所以上面因为 margin 合并导致头图掉下来的问题可以添加下面的 CSS 代码进行 修复: .container {overflow: hidden;}其原理就是通过设置 overflow 属性让父级元素块状格式化上下文这在 6.4 节会有深入的 探讨。
说到此处忍不住再多说几句。jQuery 中有个 ( ) . s l i d e U p ( ) / ().slideUp()/ ().slideUp()/().slideDown()方法 如果在使用这个动画效果的时候发现这内容在动画开始或结束的时候会跳一下那八九不离十就是布局存在margin合并。跳动之所以产生就是因为jQuery的slideUp和slideDown 方法在执行的时候会被对象元素添加 overflow:hidden 设置而 overflow: hidden 会阻 止 margin 合并于是一瞬间间距变大产生了跳动。
(3) 空块级元素的 margin 合并。例如下面 CSS 和 HTML 代码:
.father { overflow: hidden; }
.son { margin: 1em 0; }
div classfatherdiv classson/div
/div结果此时.father 所在的这个父级div元素高度仅仅是 1em因为.son 这个空div元 素的 margin-top 和 margin-bottom 合并在一起了。这也是上一节 margin:50%最终宽高 比是 2:1 的原因因为垂直方向的上下 margin 值合二为一了所以垂直方向的外部尺寸只有 水平方向的一半。
这种空块级元素的 margin 合并特性即使自身没有设置 margin 也是会发生的所谓“合” 并不一定要自己出力只要出人就可以。比方说我们一开始的“相邻兄弟元素 margin 合并” 其实就算兄弟不相邻也是可以发生合并的前提是中间插手的也是个会合并的家伙。比方说:
p { margin: 1em 0; }
p第一行/p
div/div
p第二行/p此时第一行和第二行之间的距离还是 1em中间看上去隔了一个
元素但对最终效果却没有任何影响。如果非要细究则实际上这里发生了 3 次 margin 合并 div和第一行 p 的 margin-bottom 合并然后和第二行 p的 margin-top 合并这两次合并是相邻兄弟合并。由于自身是空 div于是前两次合并的 margin-bottom 和 margin-top 再次合并 这次合并是空块级元素合并于是最终间距还是 1em。 根据我多年开发的经验由于空块级元素的 margin 合并发生不愉快事情的情况非常之少。 一来我们很少会在页面上放置没什么用的空div;二来即使使用空div也是画画分隔 线之类的一般都是使用 border 属性正好可以阻断 margin 合并;三来CSS 开发人员普遍没有 margin 上下同时开工的习惯比方说一个列表间距都是一样的开发人员一般都是单独设定 margin-top 或 margin-bottom 值因为这会让他们内心觉得更安全。于是最终空块级元素的 margin 合并就变成了一个对 CSS 世界有着具有巨大意义但大多数人都不知道的特性。
如果有人不希望空div元素有 margin 合并可以进行如下操作:
设置垂直方向的 border;设置垂直方向的 padding;里面添加内联元素(直接 Space 键空格是没用的);设置 height 或者 min-height。
三、margin 合并的计算规则
我把 margin 合并的计算规则总结为“正正取大值”“正负值相加”“负负最负值”3 句话。
下面来分别举例说明。
(1) 正正取大值。如果是相邻兄弟合并:
.a { margin-bottom: 50px; }
.b { margin-top: 20px; }
div classa/a
div classb/a此时.a 和.b 两个div之间的间距是 50px取大的那个值。 如果是父子合并:
.father { margin-top: 20px; }
.son { margin-top: 50px; }
div classfatherdiv classson/div
/div此时.father 元素等同于设置了 margin-top:50px取大的那个值。 如果是自身合并:
.a {margin-top: 20px;margin-bottom: 50px;
}
div classa/div则此时.a 元素的外部尺寸是 50px取大的那个值。
(2)正负值相加。如果是相邻兄弟合并:
.a { margin-bottom: 50px; }
.b { margin-top: -20px; }
div classa/a
div classb/a此时.a 和.b 两个div之间的间距是 30px是-20px50px 的计算值。 如果是父子合并:
.father { margin-top: -20px; }
.son { margin-top: 50px; }
div classfatherdiv classson/div
/div此时.father 元素等同于设置了 margin-top:30px是-20px50px 的计算值。 如果是自身合并:
.a {margin-top: -20px;margin-bottom: 50px;
}
div classa/div则此时.a 元素的外部尺寸是 30px是-20px50px 的计算值。
(3) 负负最负值。如果是相邻兄弟合并:
.a { margin-bottom: -50px; }
.b { margin-top: -20px; }
div classa/a
div classb/a此时.a 和.b 两个div之间的间距是-50px取绝对负值最大的值。 如果是父子合并:
.father { margin-top: -20px; }
.son { margin-top: -50px; }
div classfatherdiv classson/div
/div此时.father 元素等同于设置了 margin-top:-50px取绝对负值最大的值。
如果是自身合并:
.a {margin-top: -20px;margin-bottom: -50px;
}
div classa/div则此时.a 元素的外部尺寸是-50px取绝对负值最大的值。
四、margin 合并的意义
我之前曾见到类似这样的说法:“margin-top 合并 bug。”这种说法是大有问题的
“margin-top 合并”这种特性是故意这么设计的在实际内容呈现的时候是有着重要意义的 根本就不是 bug不要遇到出乎自己意料或者自己无法理解的现象就称其为 bug。
CSS世界的CSS属性是为了更好地进行图文信息展示而设计的博客文章或者新闻信息是图文信息的典型代表基本上离不开下面这些 HTML:
h2文章标题/h2
p文章段落 1.../p
p文章段落 2.../p
ulli列表 1/lili列表 2/lili列表 3/li
/ul而这里的h2、p、ul默认全部都是有垂直方向的 margin 值的而且单位全部都是 em。 首先解释一下为何需要 margin 值。其实原因很简单CSS 世界的设计本意就是图文信息展示 有了默认的 margin 值我们的文章、新闻就不会挤在一起垂直方向就会层次分明、段落有致阅读体验就会好!为何使用 em 作为单位也很好理解大家应该知道浏览器默认的字号大小是可以自定义的吧例如默认的是 16 像素假如我们设置成更大号的字号同时 HTML 标签的 margin 是像素大小则会发生文字变大但是间距不变的情况原本段落有致的阅读体验必然又会变得令人窒息。em 作为相对单位则可以让我们的文章或新闻无论多大的字体都排版良好。可以看到HTML 标签默认内置的 CSS 属性值完全就是为了更好地进行图文信息展示 而设计的。
我们平时进行网站开发的时候都会重置各种默认的 margin 尺寸这是件需要好好审视的事情对于绝大多数网站确实需要做这样的处理因为这些网站鲜有传统的图文信息展示区域。但是如果你的站点是博客、新闻门户或公众号文章我们应该做的是统一标签的 margin 大小而不是一股脑地重置成 0。
下面说说 margin 合并的意义。对于兄弟元素的 margin 合并其作用和 em 类似都是让图文信息的排版更加舒服自然。假如说没有 margin 合并这种说法那么连续段落或列表之类首尾项间距会和其他兄弟标签成 1:2 关系;文章标题距离顶部会很近而和下面的文章详情内容距离又会很开就会造成内容上下间距不一致的情况。这些都是糟糕的排版体验。而合并机制可以保证元素上下间距一致无论是h2标题这种 margin 偏大的元素还是中规中矩的p 元素因为“正正取大值”。
父子 margin 合并的意义在于:在页面中任何地方嵌套或直接放入任何裸div都不会 影响原来的块状布局。div是网页布局中非常常用的一个元素其语义是没有语义也就是不代表任何特定类型的内容是一个通用型的具有流体特性的容器可以用来分组或分隔。由于其作用就是分组的因此从行为表现上来看一个纯粹的div元素是不能够也不可以影响原先的布局的。现在有如下一段 HTML: div stylemargin-top:20px;/div请问:现在要在上面这段 HTML 的外面再嵌套一层div元素假如说现在没有父子 margin 合并那这层新嵌套的div岂不阻断了原本的兄弟 margin 合并?很有可能间距就会变大 妥妥地影响了原来的布局这显然就违背了div的设计作用了。所以才有了父子 margin 合并外面再嵌套一层div元素就跟没嵌套一样表现为 margin-top:20px 就好像是设置在最外面的div元素上一样。
自身 margin 合并的意义在于可以避免不小心遗落或者生成的空标签影响排版和布局。 例如:
p第一行/p
p/p
p/p
p/p
p/p
p第二行/p其和下面这段 HTML 最终视觉效果是一模一样的:
p第一行/p
p第二行/p若是没有自身 margin 合并特性的话怕是上面的 HTML 第一行和第二行之间要隔了很多行吧。
知道了 margin 合并的意义以及作用而且合并规则的兼容性良好所以我自己平时网页制作的时候遇到列表或者模块全部都是保留上下 margin 设置。例如:
.list {margin-top: 15px;margin-bottom: 15px;
}而不是战战兢兢地使用:
.list {margin-top: 15px;
}因为 margin 合并特性所以我们无须担心列表之间的间距会很大。不会的就是 15px! 相反这种设置让我们的页面结构容错性更强了比方说最后一个元素移除或位置调换均不会破坏原来的布局也就是我们的 CSS 无须做任何调整。
参考资料 《CSS 世界》
