澳门在线威尼斯官方 > 威尼斯澳门在线 > 层叠上下文,CSS里的BFC和堆叠上下文

原标题:层叠上下文,CSS里的BFC和堆叠上下文

浏览次数:168 时间:2019-12-01

哪些是 CSS 层叠上下文,它们是如何做事的?

2016/02/24 · CSS · 层叠上下文

本文由 伯乐在线 - EricHedgedog 翻译,JustinWu 校稿。未经许可,禁止转载!
西班牙语出处:Tiffany B. Brown。招待参加翻译组。

CSS层叠上下文给多数开荒者都带给过烦恼。在自身写完《CSS Master》中的构造章节在此之前,作者都不可能说自身曾经完全了然了它们。当然了,小编明白元素的 z-index 属性是亟需 position 属性不为 static 时技巧立见作用的,但那也是在自己读了繁多次菲尔ip Walton 的《未有人告知你关于 Z-Index 的片段事》之后才驾驭了。

从来不触犯 Philip 的意味。就如自个儿说过的:层叠上下文很伤脑筋。

那什么样是层叠上下文呢?层叠上下文就是三个包罗了后生可畏组堆积层的成分。这足以是一个html 成分创立的根层叠上下文,可能是一个由特定属性和值成立的局地层叠上下文。

“包括一批层”是三个很想得到的短语,但那是三个简短的概念。在叁个局地层叠上下文中,子元素的z-index 会依照其父元平昔安装实际不是文书档案的根成分。在该上下文以外的层(比如:一个局域层叠上下文的附近同级成分)不能够放在其里面层之间。

那会儿是叁个例证。使用切换开关来为 A 成分触发恐怕吊销三个局域层叠上下文。

图片 1

图片 2

在此个例子中,#a p 成分(A的子成分卡塔尔 的z-index为1 ,#a 元素和 #b 元素的z-index值为auto 。因为 #a p 成分的 z-index 属性值为正数,所以在根层叠上下文内该因素坐落于 #a 元素和 #b 元素之上。

然而把 #a 元素的 transform 属性值由 none 改为 scale(1卡塔尔(قطر‎会触发贰个局域层叠上下文。今后 #a p 成分的 z-index 值会依赖 #a 成分来计量并非文档的根成分。

随意根层叠上下文依然局域层叠上下文都会据守意气风发多元的法则来鲜明因素的聚成堆和制图顺序,三个层叠上下文的子成分会依据从下到上的次第绘制。

  1. 堆积层级为负数的元素,平日为 z-index:-1 的成分 。
  2. position 属性值为 static 的因素。
  3. 聚积层级为 0 的成分,经常为 z-index:auto 的因素。
  4. 积聚层级为正数的因素,举例 z-index 属性值为 1 还是越来越大的要素。

假定四个成分有同意气风发的堆放层级,就遵照它们在源文件中现身的逐风姿浪漫层叠。后继成分堆积在四驱元素之上。

少数的 CSS 属性和值会触发三个新的层叠上下文。它们包括: opacity 属性,当它的属性值小于 1 时(举个例子:.99卡塔尔国;
filter 属性,当它的性质值不为 none 时;CSS 混合情势属性 mix-blend-mode, 当它的习性值不为 normal 时。

和您猜猜的相似,transform 属性能够接触二个层叠上下文,不过仅当它的习性值不为 none 时。那满含了身份转变[1] ,举个例子属性值为 scale(1卡塔尔国 和 translate3d(0,0,0卡塔尔(قطر‎。

在上述例子中,#a 元素和 #b 成分具备风华正茂致的聚积层级,不过 #b 成分是源文件中的第叁个因素。当 transform: scale(1卡塔尔(英语:State of Qatar) 被使用时, #a p 变为带有在 #a 元素的一些上下文中。结果是,#b 成分上涨到了储藏室的最上边。

[1] 身份调换对成分没有视觉上的影响,不过会触发四个新的层叠上下文。

打赏帮衬本人翻译越来越多好随笔,感谢!

打赏译者

先是申明那篇文章是造福本身查概念时用的,完全不驾驭那八个概念的人相应会读不懂 :p

打赏帮衬作者翻译更加多好作品,感谢!

任选生机勃勃种支付办法

图片 3 图片 4

1 赞 2 收藏 评论

据此将它俩总括在一块儿,是因为它们的性状极度相近:BFC和堆集上下文都不是看得见摸得着的实例,而是大器晚成套抽象的不成方圆。当你在css里写出某些东西时就能够触发那套法规,然后依照BFC或聚成堆上下文的规行矩步来渲染页面。
换句话说,知道BFC和堆成堆上下文时页面会发生怎么着,然后知道什么去接触这两套准则,我们就足以利用它们了。

至于作者:EricHedgedog

图片 5

前端程序猿 个人主页 · 小编的篇章 · 17 ·  

图片 6

1.BFC

BFC(Block formatting context卡塔尔直译为"块级格式化上下文",它是一个独门的渲染区域,在那区域内有生龙活虎套渲染准则,独有Block-level box参加, 它规定了里面包车型地铁Block-level Box怎么着布局,何况与这几个区域外界毫不相干。所以说block-level 的box自身就根据BFC法规。display为block/item-list/table 的要素正是Block-level box。inline,inline-block,inline-table这个都以inline-level box。

那正是说BFC的渲染法规是何许吗?

  • 里面包车型大巴Box会在笔直方向,三个接三个地停放。
  • 博克斯垂直方向的离开由margin决定。归属同八个BFC的两个相邻Box的margin会发生重叠
  • 每一个成分的margin box的左臂, 与满含块border box的侧面相接触(对于从左往右的格式化,不然反而卡塔尔。固然存在浮动也是如此。
  • BFC的区域不会与float box重叠。
  • BFC正是页面上的二个割裂的独门容器,容器里面包车型地铁子成分不会潜濡默化到外围的因素。反之也那样。
  • 计量BFC的可观时,浮动成分也插手总括

什么样叫触发BFC?

依据上述,我们曾经知晓了在多个页面中,只纵然box-level的box都根据bfc法则,实际上根成分<html></html>就接触了bfc,页面上有所的成分都以以此bfc区域内的子成分而已。所谓的触发bfc,指的是让某四个box产生bfc的父成分,其里面包车型客车要素坚决守住bfc的规行矩步,可是它的外界就和任何因素不相干了。

本文由澳门在线威尼斯官方发布于威尼斯澳门在线,转载请注明出处:层叠上下文,CSS里的BFC和堆叠上下文

关键词:

上一篇:没有了

下一篇:技术栈开垦web应用