细说CSS中margin特性的应用

日期:2021-03-04 类型:科技新闻 

关键词:在线编辑图片,什么软件可以抠图,在线图片,p图软件电脑版,在线抠图

本文侧重叙述有关 margin,大家平常不太非常容易发现的“坑”。

盒实体模型

触碰过 CSS 的人应当都了解 CSS 的盒实体模型:

由內容边沿(Content edge)包围着产生的是內容盒(Content Box),类推也有内边距盒(Padding Box)、边框盒(Border Box)、外边距盒(Margin Box)。
在其中內容盒、内边距盒、边框盒的情况由background特性决策,而外边距盒的情况是全透明的。

CSS margin 特性

有关 margin 特性,有几点将会跟大家的判断力不符合:

1、假如 margin 的值是百分比,则是相对父元素的內容盒宽度来测算的,即便 margin-top 和 margin-bottom 也是这般。因而即便父元素的高宽不相同,子元素的 margin 元素特定了同样的百分比值,则子元素各个方位的 margin 测算值全是相同的。
2、margin-top 和 margin-bottom 值对行内非更换元素(non-replaced inline element)是失效的。因而大家能够特定 img 元素的 margin-top 和 margin-bottom,而非更换行内元素(如 i,span 等)设定 margin-top 和 margin-bottom 却不容易造成实际效果。

邻近的 margin(Adjoining margin)

假如两个竖直方位上的 margin,它们正中间沒有别的竖直 margin,但它们之间不1定相触碰,大家就说这两个 margin 是竖直毗邻(vertical-adjacent)的,包含下列4种状况,考虑在其中之1便可:

  • 父元素的 top margin 和第1个子元素的 top margin
    父元素的bottom margin 和最终1个子元素的 bottom margin
    元素的 bottom margin 和与这个元素邻近的弟兄元素的 top margin
    假如1个元素,它沒有转化成 BFC、沒有包括一切正常流的子元素、min-height是0、height是0或 auto,则它的 top margin 和 bottom margin 也是竖直毗邻的

假如两个 margin 考虑下列3个标准,大家就说这两个 margin 是邻近(adjoining)的:

1、这两个 margin 是竖直毗邻的,即考虑上面4种状况之1
2、margin 的两个元素全是一切正常流的块级元素,而且在同1个 BFC 中
3、两个 margin 之间沒有行盒(line box)、消除波动后的间隙(clearance)、padding和 border

margin 折叠(Collapsing margins)

margin 折叠,即邻近的 margin 有将会会被折叠成1个。

例如元素 #a 特定了 margin-bottom 为 10px,而它正下方的元素 #b 特定了 margin-top 为 20px,如这样:

元素 #a 的 margin-bottom 和元素 #b 的margin-top 在部位上重合了,它们之间的间距是 20px,即元素 #b 的 bottom margin 长度,这便是 margin 折叠状况。有关这个状况,能够这么了解:

margin 界定的是它与别的盒子之间的最少间隔。在其中元素 #a 特定了 margin-bottom 为 10px,就说明它正下方的元素 #b 与它最少要有 10px 的间距,它特定的是1个最少值,因而具体的间距能够比这个大。

元素 #a 正下方的元素 #b 也设定了 margin-top 为 20px,假如不折叠,则她们之间就有 30px 的间距。假如折叠变成1个 20px 的间距,则对元素 #a 来讲,它的 margin-bottom 规定最少要有 10px 的间距,是考虑的,而针对元素 #b 来讲,它的 margin-top 规定最少要有 20px 的间距,也是考虑的。

而 margin 折叠的存在,实际上是以便能够在视觉效果上显得更美观大方,也更接近设计方案师的预期。

margin 折叠标准

其实不是全部的 margin 都可以以折叠,必须考虑下列标准:

  • 竖直邻近的 margin 才有将会折叠,水平 margin 始终不折叠
    根元素(即 html 元素)的 margin 始终不折叠
    假如1个元素,它的 top margin 和 bottom margin 是邻近的,而且有消除波动后的间隙(clearance),这个元素的 margin 能够跟弟兄元素的 margin 折叠,可是折叠后的 margin 不可以跟父元素的 bottom margin 折叠。

必须留意的是,margin 其实不是只能折叠1次,好几个考虑规定的 margin 都可以以开展折叠产生1个折叠后的 margin(collapsed margin)。
而且倘若这个折叠后的 margin 是由 margin A 等折叠而来的,假如有 margin X 跟 margin A 是邻近的,则大家也觉得 margin X 跟这个折叠后的 margin 邻近。

折叠后的 margin 尺寸

当两个或两个以上的 margin 折叠后,margin 的值测算以下:

  • 假如 margin 全是正数,则取她们之中的最大值
    假如 margin 中有正有负,则取最大的正数再加最少的负数(如最大的 margin 是 20px,最少的 margin 是 ⑵0px,则她们测算后的值是 0)
    假如 margin 中全是负数,则取她们之中的最少值

几道思索题

波动、精准定位元素的 margin 不容易和别的任何元素的 margin 产生重合,包含它的子元素。

这是由于波动元素摆脱了一切正常流,因此它和别的邻近元素就不处与同1个流中,当然不邻近;又由于波动元素的內容盒会产生1个新的 BFC,因此波动元素跟子元素不处与同1个 BFC 中,因而它们的 margin 也不可以折叠。精准定位元素同理可得。

inline-block 的元素不容易和别的元素的 margin 产生折叠,包含它的子元素。

由于 margin 折叠只会产生在块级元素上,因而 inline-block 元素的 margin 不容易和弟兄元素折叠,又由于 inline-block 的內容盒会产生1个新的 BFC,因此 inline-block 元素自身也不容易和子元素的 margin 产生折叠

margin 折叠的几个栗子

栗子1

假如两个 margin 考虑下列3个标准,大家就说这两个 margin 是邻近(adjoining)的:

两个 margin 之间沒有行盒(line box)、消除波动后的间隙(clearance)、padding和边框

对于这个标准,大家根据提升 padding 的方法来阻拦 margin 的折叠:

假如 #container 沒有下边框,则 #container 的 bottom margin 和 #inner 的 bottom margin 是邻近的,因而它们折叠了,而且 #inner 撑开了 #container 元素,因此能够看到 #container 元素的高宽比变为了 10px,且显示信息的是 #inner 的鲜红色情况

当给 #container 加上1个下边框,两个 margin 之间就边框的隔绝,她们就不邻近了,因而不可以折叠。因此能够看到 #container 被撑开变成 20px,在其中 10px 是 #inner 的高宽比,也有 10px 是 #inner 的 bottom margin,而且因为 margin 是全透明的,因而 #container 露出了一部分蓝色的情况。

栗子2:

假如两个 margin 考虑下列3个标准,大家就说这两个 margin 是邻近(adjoining)的:

margin 的两个元素全是一切正常流的块级元素,而且在同1个 BFC 中

大家根据建立新的 BFC来阻拦 margin 的折叠:

如上图 #container 元素和 #inner 元素同属于1个 BFC 中,#container 的 top margin 和 #inner 的 top margin 折叠,bottom margin 同理。
但假如让 #container 跟 #innter 处在不一样的 BFC 中,则 top margin 和 bottom margin 都不容易折叠,如:

给 #container 元素提升1个 overflow: hidden 特性,让它的內容盒转化成1个单独的 BFC,而 #inner 处在这个单独的 BFC 中,因而 #container 和 #inner 就处在两个不一样的 BFC 中了,因此她们的 margin 不可以折叠。

栗子3:

假如1个元素,它自身的 top margin 和 bottom margin 是邻近的,而且有消除波动后的间隙(clearance),这个元素的 margin 能够跟弟兄元素的 margin 折叠,可是折叠后的 margin 不可以跟父元素的 bottom margin 折叠。

给父元素 #container 设定了1个灰色情况,而且沒有设定高宽比,因而高宽比会伴随着內容而拓展,margin 设定为 50px。
在其中有1个鲜红色的波动元素 #floated,高宽都设定为 40px。
给 #cleared 设定了 15px 的 margin,而且元素的高宽比、padding、margin 都为0,因而 #cleared 元素的 top margin 和 bottom margin 是邻近的。这个元素的部位以下图所示:

由于 #cleared 元素消除了左波动,因此 #cleared 元素下移。
而 #cleared 元素和 #slibling 元素的 margin 折叠了,因而能够看到她们的部位是重合的。

因为这条标准的存在,致使她们折叠后的 margin 不可以跟 #container 的 bottom margin 开展折叠,因而 #container 的高宽比被撑开。

假如沒有这条标准,她们还应当跟 #container 的 bottom margin 开展折叠,如:

以上这张图,在去掉了 #cleared 元素的 clear 特性以后,就不考虑这条标准了,因此能够看到 #container 的高宽比就仅有 40px,即鲜红色的波动元素的高宽比,而 #cleared 元素、#sibling 元素、#container 元素的 margin 都折叠变成1个。

以上便是有关CSS中margin特性的应用方式详细介绍,期待对大伙儿学习培训了解CSS中margin特性有一定的协助。

上一篇:CSS3近环节篇之炫酷的三d转动透視 返回下一篇:没有了