Menu
Woocommerce Menu

深入理解CSS中的层叠上下文和层叠顺序,处理树形结构的几个场景与方案

0 Comment


响应式web布局中iframe的自适应

2016/07/13 · CSS ·
CSS,
响应式布局

正文我: 伯乐在线 –
欲休
。未经小编许可,禁止转发!
迎接参与伯乐在线 专栏撰稿人。

深深了解CSS中的层叠上下文和层叠顺序

2016/01/10 · CSS ·
层叠上下文

原稿出处:
张鑫旭   

零、凡尘的道理都以想通的

在这些世界上,凡事都有个前后相继顺序,凡物都有个论资排辈。例如说茶馆排队打饭,对吗,讲求先到先得,总不容许蜂拥而至。再譬如说话语权,内人的话长久是对的,领导的话永久是对的。

在CSS届,也是这么。只是,一般情状下,我们平平静静,看不出什么差别,即所谓的众平生等。不过,当爆发争持爆发争论的时候,分明,是不容许成功完全一致的,前后相继顺序,身份差距就显现出来了。比如,杰克和罗丝,只可以一位浮在木板上,此时,出现了争辨,结果我们都知晓的。那对于CSS世界中的成分来说,所谓的“争辩”指什么呢,当中,相当的重大的二个局面就是“层叠呈现争论”。

默许景况下,网页内容是尚未偏移角的垂直视觉显示,当内容发生层叠的时候,一定会有二个内外的层叠顺序发生,有一点点类似于实际世界中论资排辈的感觉。

而要通晓网页巧月素是怎么着“论资排辈”的,就必要浓密精晓CSS中的层叠上下文和层叠顺序。

咱俩大家大概都纯熟CSS中的z-index本性,必要跟我们讲的是,z-index实质上只是CSS层叠上下文和层叠顺序中的一叶小舟。

浅谈 JavaScript 管理树形结构的几个情景与方案

2015/06/18 · CSS ·
树形结构

原稿出处:
工业聚(@工业聚)   

困境

在响应式布局中,大家应当小心对待iframe成分,iframe成分的width和height属性设置了其宽度和惊人,可是当满含块的拉长率或可观小于iframe的增加率或可观时,会产出iframe成分溢出的气象:

银河国际网址手机版 1

如此那般溢出的iframe会破坏页面的布局。大家能够使用一种方法让iframe成分也负有响应性,拭目以待。

一、什么是层叠上下文

层叠上下文,日语名称为”stacking context”.
是HTML中的二个三维的定义。假诺几个因素含有层叠上下文,大家得以清楚为这几个元素在z轴上就“出一头地”。

此地出现了贰个名词-z轴,指的是何许啊?

代表的是客商与屏幕的那条看不见的垂直线(参见下图表示-红线):
银河国际网址手机版 2

层叠上下文是三个概念,跟「块状格式化上下文(BFC)」类似。可是,概念那个东西是比较虚比较空虚的,要想轻巧领悟,大家须要将其具象化。

怎么个有血有肉化法呢?

你可以把「层叠上下文」掌握为当官:网页中有无数众多的因素,我们能够用作是实在世界的芸芸众生。真实世界里,大家大多数人是司空眼惯老百姓们,还大概有点人是从事政务的理事。OK,这里的“官员”就可以见道为网页中的层叠上下文成分。

换句话说,页面中的成分有了层叠上下文,就好比大家一般老百姓当了官,一旦当了官,比较平时老百姓来讲,离天子更近了,对不对,就一律网页瓜月素等级更加高,离大家客户更近了。

银河国际网址手机版 3

前言

这两天,Mac 下知名软件 Homebrew
的俺,因为没解出来二叉树翻转的白板算法题,惨被 Google拒绝,继而引发推特(Twitter)热议。

在 JavaScript 中也是有许多树形结构。比方 DOM
树,省市区地点联合浮动,文件目录等; JSON 自个儿便是树形结构。

成都百货上千前端面试题也跟树形结构的有关,举例在浏览器端写遍历 DOM
树的函数,比如在 nodejs 运营时遍历文件目录等。

这里演示用 JavaScript 遍历树形结构的二种政策。

方案

iframe成分本身并无法伸缩,除非通过js展现的安装其宽度。不过大家可透过三个iframe-container成分来包裹iframe,同有时间让iframe-container成分的幅度充满包涵块的肥瘦,而且依照iframe的长度宽度比,设置iframe-container成分的padding-bottom百分比。

骨子里,这种方法的精髓就在于设置iframe-container元素的padding-bottom属性,设置该属性的意在变相的设置元素的可观。因为给padding-bottom设置比例,是相对于父元素的width来讲的,假如对height属性设置比例,则相对于父成分的height,而父成分的height值我们平日使用暗中认可的auto,因而会并发子成分height也为0.之所以,我们只可以给padding-bottom设置属性。那样,只需让iframe成分充满iframe-container就可以。

CSS

.wrap { width: 400px; margin: auto; border: 5px solid greenyellow; }
.iframe-container { height: 0; padding-bottom: 97.6%; position:
relative; } .iframe-container iframe { position: absolute; left: 0; top:
0; width: 100%; height: 100%; } @media screen and (max-width: 400px) {
.wrap { width: 300px; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.wrap {
    width: 400px;
    margin: auto;
    border: 5px solid greenyellow;
}
.iframe-container {
    height: 0;
    padding-bottom: 97.6%;
    position: relative;
}
.iframe-container iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
@media screen and (max-width: 400px) {
    .wrap {
        width: 300px;
    }
}

XHTML

<div class=”wrap”> <div class=”iframe-container”> <iframe
height=”498″ width=”510″
src=”” frameborder=”0″
allowfullscreen=””></iframe> </div> </div>

1
2
3
4
5
<div class="wrap">
    <div class="iframe-container">
        <iframe height="498" width="510" src="http://player.youku.com/embed/XOTE0MjkyODgw" frameborder="0" allowfullscreen=""></iframe>
    </div>
</div>

结果展现的情况:

当视口宽度大于400px时:

银河国际网址手机版 4

当视口宽度小于400px时:

银河国际网址手机版 5

打赏协理自个儿写出越多好文章,多谢!

打赏作者

二、什么是层叠水平

再来讲说层叠水平。“层叠水平”克罗地亚共和国(Republic of Croatia)语名为”stacking
level”,决定了同三个层叠上下文相月素在z轴上的显示顺序。level那些词很轻巧让我们联想到我们实在世界中的三六九等、论资排辈。真实世界中,每一种人都以独立的私家,包蕴同卵双胞胎,有反差就有分别。举个例子,双胞胎即使长得像Ctrl+C/Ctrl+V获得的,但实质上,出生时间依然有前后相继顺序的,先出生的极其就大,小叔子或三姐。网页中的元素也是那般,页面中的各个成分都以独自的个体,他们自然是会有二个看似的排行排序的情形存在。而这么些排名排序、论资排辈正是大家那边所说的“层叠水平”。层叠上下文成分的层叠水平足以明白为官员的职务和等第,1品2品,省长司长之类;对于常见成分,那几个嘛……你协和随意通晓。

于是乎,总之,全部的因素都有层叠水平,包含层叠上下文成分,层叠上下文成分的层叠水平足以通晓为领导者的职级,1品2品,秘书长市长之类。然后,对于普通成分的层叠水平,大家的探究仅仅局限在当下层叠上下文成分中。为啥吧?因为不然没风趣。

那样掌握呢~
上面提过成分具备层叠上下文好比当官,大家都知道的,这当官的家里都有丫鬟啊保镖啊管家啊什么的。所谓打狗看主人,A官员家里的管家和B官员家里的管家做PK实际上是不曾意义的,因为他俩牛不牛逼完全由她们的主人翁决定的。一人飞升鸡犬升天,你说那和珅家里的管家和七侠镇娄知县太守家里的管家有可比性吗?李总理的文书是还是不是分分钟灭了你村支书的书记(假使有)。

翻译成术语正是:普通成分的层叠水平优先由层叠上下文决定,由此,层叠水平的可比独有在此时此刻层叠上下文成分中才有意义。

银河国际网址手机版 6

亟待专一的是,诸位千万不要把层叠水平和CSS的z-index属性混为一谈。没有错,有些景况下z-index确实能够影响层叠水平,不过,只限于定位成分以及flex盒子的孩子成分;而层叠水平有所的要素都留存。

场景1:遍历 DOM 树

打赏协助我写出越来越多好小说,谢谢!

银河国际网址手机版 7

1 赞 9 收藏
评论

三、什么是层叠顺序

再来说说层叠顺序。“层叠顺序”塞尔维亚语名为”stacking order”.
表示成分发生层叠时候具有一定的垂直呈现顺序,注意,这里跟上边四个不等同,上边包车型大巴层叠上下文和层叠水平是概念,而那边的层叠顺序是平整

在CSS2.1的时代,在CSS3还尚无出现的时候(注意这里的前提),层叠顺序法则遵守上边那张图:
银河国际网址手机版 8

有人大概有见过类似图,那些图是无数居多年前老外绘制的,土耳其(Turkey)语内容。而是更重视的是本国估算未有同行实行过申明与实行,实际上非常多人命关天音讯贫乏。上边是本人要好手动重绘的中文版同时补充相当多任何地方相对未有的首要文化音信。即便想要无水印高清大图,点击这里购买(0.5元)。

缺点和失误的第一消息包罗:

  1. 身处最低水平的border/background指的是层叠上下文成分的边框和背景观。每一个层叠顺序法则适用于叁个整机的层叠上下文成分。
  2. 原图未有展现inline-block的层叠顺序,实际上,inline-block和inline水平成分是同样level等级。
  3. z-index:0实际上和z-index:auto单纯从层叠水平上看,是足以当作是同等的。注意这里的措辞——“单纯从层叠水平上看”,实际上,两个在层叠上下文领域具备根性子的反差。

上边作者要向我们发问了,我们有未有想过,为啥内联成分的层叠顺序要比变化成分和块状成分都高?
银河国际网址手机版 9

缘何吧?笔者料定感到浮动成分和块状成分要更屌一点啊。

嘿嘿嘿,小编就不卖关子了,直接看下图的标明说明:
银河国际网址手机版 10

诸如border/background貌似为点缀属性,而退换和块状成分一般作为布局,而内联成分都是内容。网页中最珍视的是怎么?当然是内容了哈,对不对!

故而,一定要让内容的层叠顺序相当高,当发生层叠是很好,首要的文字啊图片内容能够优先暴光在荧屏上。比如,文字和生成图片重叠的时候:

银河国际网址手机版 11

地方说的这个层叠顺序准绳还是老时期的,假使把CSS3也牵扯进来,科科,事情就区别等了。

方案1:递归情势

JavaScript

function walkDom(node, callback) { if (node === null) {
//判定node是还是不是为null return } callback(node) //将node自己传入callback
node = node.firstElementChild //改变node为其子成分节点 while (node) {
walkDom(node, callback) //假设存在子成分,则递归调用walkDom node =
node.nextElementSibling //从头到尾遍历成分节点 } } walkDom(document,
function(node) {console.count()}) //蕴涵document节点
document.querySelectorAll(‘*’).length
//数量比地方输出的少1,因为不带有document节点

1
2
3
4
5
6
7
8
9
10
11
12
13
function walkDom(node, callback) {
    if (node === null) { //判断node是否为null
        return
    }
    callback(node) //将node自身传入callback
    node = node.firstElementChild //改变node为其子元素节点
    while (node) {
        walkDom(node, callback) //如果存在子元素,则递归调用walkDom
        node = node.nextElementSibling //从头到尾遍历元素节点
    }
}
walkDom(document, function(node) {console.count()}) //包含document节点
document.querySelectorAll(‘*’).length //数量比上面输出的少1,因为不包含document节点

将上述代码黏贴到率性页面包车型大巴支配台 console 中推行。

至于我:银河国际网址手机版,欲休

银河国际网址手机版 12

前端自由人
个人主页 ·
作者的篇章 ·
1 ·
 

银河国际网址手机版 13

四、必需牢记的层叠法则

下边那八个是层叠领域的纯金守则。当成分爆发层叠的时候,其遮住关系遵从上边2个法则:

  1. 什么人大何人上:当有着鲜明的层叠水平标示的时候,如识其他z-indx值,在同叁个层叠上下文领域,层叠水平值大的那二个遮掩小的这几个。通俗讲就是官大的压死官立小学的。
  2. 后发先至:当成分的层叠水平一样、层叠顺序同一时间,在DOM流中居于末端的成分会覆盖前面包车型客车成分。

在CSS和HTML领域,只要成分爆发了重叠,都离不开上边这三个黄金守则。因为背后会有八个实例证实,这里就到此截止。

方案2:循环情势

JavaScript

function walkDom(node, callback) { if (node === null) { return } var
stack = [node] //存入数组 var target while(stack.length) {
//数老板度不为0,继续循环 target = stack.shift() //收取成分callback(target) //传入callback Array.prototype.push.apply(stack,
target.children) //将其子成分一股脑推入stack,扩充长度 } }
walkDom(document, function(node) {console.count()}) //包蕴document节点
document.querySelectorAll(‘*’).length
//数量比下边输出的少1,因为不含有document节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function walkDom(node, callback) {
    if (node === null) {
        return
    }
    var stack = [node] //存入数组
    var target
    while(stack.length) { //数组长度不为0,继续循环
        target = stack.shift() //取出元素
        callback(target) //传入callback
        Array.prototype.push.apply(stack, target.children) //将其子元素一股脑推入stack,增加长度
    }
}
walkDom(document, function(node) {console.count()}) //包含document节点
document.querySelectorAll(‘*’).length //数量比上面输出的少1,因为不包含document节点

在循环情势中,shift方法能够换到pop,从后面部分抽取成分;push方法能够换到unshift从头顶添英镑素。分歧的依次,影响了是「广度优先」还是「深度优先」。

标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图