xml地图|网站地图|网站标签 [设为首页] [加入收藏]
不受控制的,前端开发人员需要了解的CSS原理
分类:web前端

前端开发人员需要了解的CSS原理

2011/12/15 · CSS · 来源: 梧桐雨     · CSS

来源:梧桐雨

从事Web前端开发的人都与CSS打交道很多,有的人也许不知道css是怎么去工作的,写出来的css浏览器是怎么样去解析的呢?当这个成为我们提高css水平的一个瓶颈时,是否应该多了解一下呢?

一、浏览器的发展与CSS

网页浏览器主要通过HTTP协议连接网页服务器而取得网页,HTTP容许网页浏览器送交资料到网页服务器并且获取网页。目前最常用的 HTTP 是 HTTP/1.1,这个协议在RFC2616中被完整定义。HTTP/1.1 有其一套Internet Explorer并不完全支援的 标准,然而 许多其他当代的网页浏览器则完全支援这些标准。网页的位置以URL(统一资源定位符)指示,此乃网页的地址;以http:开首的便是 通过 HTTP协议登陆。很多浏览器同时支援其他类型的URL及协议,例如ftp:是FTP(档案传送协议)、gopher:是Gopher及https: 是 HTTPS(以SSL加密的HTTP)。

早期的网页浏览器只支援简易版本的HTML。专属软件的浏览器的迅速发展导致非标准的HTML代码的产生。但随着HTML的成长,为了满足设计师的要求,HTML获得了很多显示功能。随着这些功能的增加外来定义样式的语言越来越没有意义了。

1994年哈坤·利提出了CSS的最初建议。伯特·波斯(BertBos)当时正在设计一个叫做Argo的浏览器,他们决定一起合作设计CSS。

当时已经有过一些样式表语言的建议了,但CSS是第一个含有“层叠”的主意的。在CSS中,一个文件的样式可以从其他的样式表中继承下来。读者在有 些 地方可以使用他自己更喜欢的样式,在其他地方则继承,或“层叠”作者的样式,这种层叠的方式使作者和读者都可以灵活地加入自己的设计,混合各人的爱好。

1997年初,W3C内组织了专门管CSS的工作组,其负责人是克里斯·里雷。这个工作组开始讨论第一版中没有涉及到的问题,其结 果是1998年5月出版的第二版要求。到2007年为止,第三版还未完备。

二、浏览器是如何渲染页面和加载页面

为什么有些网站打开的时候会加载会很慢,而且是整个页面同时显示的,而有些网站是从顶到下逐步显示出来的?要搞懂这个可以先从下面这个常规流程开始:

1. 浏览器下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。

2. 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)。

3. 如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载。

  1. 并且在下载后进行解析,解析过程中,停止页面所有往下元素的下载。

5. 样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染。

  1. JS、CSS中如有重定义,后定义函数将覆盖前定义函数。

这里关键的是第2-5这三点。渲染效率与下面三点有关:

  1. css选择器的查询定位效率

  2. 浏览器的渲染模式和算法

  3. 要进行渲染内容的大小

三、什么是CSS以及CSS的优点

什么是CascadingStyleSheets(层叠样式表)*CSS是CascadingStyleSheets(层叠样式表)的简 称.*CSS 语言是一种标记语言,它不需要编译,可以直接由浏览器解释执行(属于浏览器解释型语言).*在标准网页设计中CSS负责网页内容 (XHTML)的表 现.*CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀.*可以通过简单的更改 CSS文件,改变网页 的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.*CSS是由W3C的CSS工作组产生和维护的。

采用CSS+DIV进行网页重构相对与传统的TABLE网页布局而具有以下3个显著优势:

1. 表现和内容相分离将设计部分剥离出来放在一个独立样式文件中,HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。

2. 提高页面浏览速度对于同一个页面视觉效果,采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多,前者一般只有后者的1/2大小。浏览器就不用去编译大量冗长的标签。

3. 易于维护和改版你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。

四、浏览器对CSS的匹配原理

浏览器CSS匹配不是从左到右进行查找,而是从右到左进行查找。比如之前说的DIV#divBoxpspan.red{color:red;},浏览器 的查找顺序如下:先查找html中所有class=’red’的span元素,找到后,再查找其父辈元素中是否有p元素,再判断p的父元素中是否有id为 divBox的div元素,如果都存在则CSS匹配上。

浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。firefox称这种查 找方式为keyselector(关键字查询),所谓的关键字就是样式规则中最后(最右边)的规则,上面的key就是span.red。

五、优化你的CSS

所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找,下面列出一些我们常见的写CSS犯一些低效错误:

1、不要在ID选择器前使用标签名

一般写法:DIV#divBox

更好写法:#divBox

解释:因为ID选择器是唯一的,加上div反而增加不必要的CSS匹配。

2、不要在class选择器前使用标签名

一般写法:span.red

更好写法:.red

解释:同第一条,但如果你定义了多个.red,而且在不同的元素下是样式不一样,则不能去掉,比如你css文件中定义如下:   p.red{color:red;}
span.red{color:#ff00ff}复制代码

如果是这样定义的就不要去掉,去掉后就会混淆,不过建议最好不要这样写

3、尽量少使用层级关系

一般写法:#divBoxp.red{color:red;}

更好写法:.red{..}

4、使用class代替层级关系

一般写法:#divBoxullia{display:block;}

更好写法:.block{display:block;}

5、在css渲染效率中id和class的效率是基本相当的

class最在第一次载入中被缓存,在层叠中会有更加好的效果,在根部元素采用id会具有更加好(id有微妙的速度优势)。

赞 1 收藏 评论

图片 1

不受控制的 position:fixed

2017/08/15 · CSS · position

本文作者: 伯乐在线 - chokcoco 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

大家都知道,position:fixed 在日常的页面布局中非常常用,在许多布局中起到了关键的作用。它的作用是:

position:fixed 的元素将相对于屏幕视口(viewport)的位置来指定其位置。并且元素的位置在屏幕滚动时不会改变。

但是,在许多特定的场合,指定了 position:fixed 的元素却无法相对于屏幕视口进行定位。这是为何呢?

图片 2

Zen Coding: 一种快速编写HTML/CSS代码的方法

2012/05/17 · CSS · 2 评论 · CSS

英文原文:Smashing Magazine,翻译:前端观察

在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法。它由Sergey Chikuyonok开发。

你在写HTML代码(包括所有标签、属性、引用、大括号等)上花费多少时间?如果你的编辑器有代码提示功能,你编写的时候就会容易些,但即便如此你还是要手动敲入很多代码。

在JavaScript方面,当我们想要在一个页面上获取某个特定的元素时,我们就会遇到同样的问题,我们必须写很多代码,这就变得难于维护和重 用。JavaScript框架应运而生,它们同时引入了CSS选择器引擎。现在,你可以使用简单的CSS表达式来获取DOM元素,这相当酷。

但是,如果你不仅仅可以用CSS的选择器布局和定位元素,还能生成代码会怎么样?比如,如果你这样写:

CSS

 div#content>h1+p

1
 div#content>h1+p

…然后就可以看到这样的输出:

XHTML

<div id="content"> <h1></h1> <p></p> </div>

1
2
3
4
<div id="content">
<h1></h1>
<p></p>
</div>

有些迷惑吧?今天,我将向你介绍Zen Coding,一组用于快速HTML和CSS编码的工具。最初由Vadim Makeev在2009年4月提出(文章为俄语),由鄙人(也就是我)开发了数月并最终达到比较成熟的状态。Zen Coding由两个核心组件组成:一个缩写扩展器(缩写为像CSS一样的选择器)和上下文无关的HTML标签对匹配器。看一下这个演示视频来看一下它们能为你做些什么。

[youku id=”XMTM4NDQwNzgw”]

注意:该视频原版位于Vimeo,但是要看的话需要翻[和谐]墙先,地址在这里:,上面的视频是我费尽周折从Vimeo上下载下来上传到优酷的,上传后质量竟被大打折扣了,囧。youtube上也有一份视频,是基于Aptana的演示,一样很精彩:。PS:貌似youtube要比Vimeo翻[和谐]墙容易些,不过如何翻[和谐]墙不在本站讨论范围。

如果你想跳转到详细介绍和使用指南,请看一下演示页面并立刻下载你适用的插件:

Demo

●Demo (使用 Ctrl + , 展开缩写,需要JavaScript支持)

●中文版演示

下载(完全支持)

●Aptana (跨平台);

●Coda, via TEA for Coda (Mac);

●Espresso, via TEA for Espresso (Mac);

下载(部分支持,只支持“展开缩写”)

TextMate(只能用于Mac机,Windows可以使用E-text编辑器替代);

●TopStyle;

●Sublime Text;

●GEdit;

●Dreamweaver CS4

●editArea在线编辑器;

●Zen Coding在线编辑器中文版

现在让我们看一下这些工具是如何工作的吧。

展开缩写

展开缩写功能将类似CSS的选择器转换为XHTML代码。术语“缩写”可能会有点儿难以理解。为什么不直接称之为“CSS选择器”呢?嗯,首要原因是语义化:“选择器”意为选择一些东西,但是在这里我们事实上是生成 一些东西,是写一个长代码的较短的替代。其次,它只是使用真实的CSS选择器语法的一个小的子集,并添加了一些新的操作符。

这里是一个支持的属性和操作符的列表:

●E

元素名称(div, p);

●E#id

使用id的元素(div#content, p#intro, span#error);

●E.class

使用类的元素(div.header, p.error.critial). 你也可以联合使用class和idID: div#content.column.width;

●E>N

子代元素(div>p, div#footer>p>span);

●E+N

兄弟元素(h1+p, div#header+div#content+div#footer);

●E*N

元素倍增(ul#nav>li*5>a);

●E$*N

条目编号 (ul#nav>li.item-$*5);

正如你能看到的,你已经知道如何使用Zen Coding了:只是些一个简单的仿CSS选择器(呃,“缩写”抱歉),就像这样…

…然后调用”展开缩写”行为。

这里有两个新增的操作符:元素倍增和条目编号。比如,如果你想生成5个<li>元素,你可以简单的写位li*5。它也将同样重写全部子 代元素。如果你想写4个<li>元素,每个里面都有一个<a>标签,你就可以简单的写为li*4>a,这样会生成以下 HTML代码:

XHTML

<li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li>

1
2
3
4
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>

最后一个——条目编号用于当你想用索引标记重复的元素的情况。假设你想生成class为item1、item2和item3的3个<div>元素。你可以写成这样的缩写,div.item$*3:

XHTML

<div></div> <div></div> <div></div>

1
2
3
<div></div>
<div></div>
<div></div>

只需在你想要索引出现的任何class或id属性上添加一个美元符号即可,而且想要多少都可以。那么,这样…

XHTML

div#i$-test.class$$$*5

1
div#i$-test.class$$$*5

会被转换成为:

XHTML

<div id="i1-test"></div> <div id="i2-test"></div> <div id="i3-test"></div> <div id="i4-test"></div> <div id="i5-test"></div>

1
2
3
4
5
<div id="i1-test"></div>
<div id="i2-test"></div>
<div id="i3-test"></div>
<div id="i4-test"></div>
<div id="i5-test"></div>

你会看到,当你写a的缩写的时候,输出是<a href=””></a>。或者,如果你写img,输出就是<img src=”” alt=”” />。

Zen Coding是如何知道什么时候应该为生成的标签添加默认的属性或者跳过关闭标签的?有一个专门的文件,名为zen_settings.js描述了输出元素。这是一个简单的JSON文件,描述每种语言的缩写(是的,你可以为不同的句法定义缩写,比如HTML、XSL、CSS等)。通用的语言缩写定义看起来就像这样:

JavaScript

'html': { 'snippets': { 'cc:ie6': '<!--[if lte IE 6]>nt${child}|n<![endif]-->',             ...             },               'abbreviations': { 'a': '<a href=""></a>', 'img': '<img src="" alt="" />',             ...             }             }

1
2
3
4
5
6
7
'html': { 'snippets': { 'cc:ie6': '<!--[if lte IE 6]>nt${child}|n<![endif]-->',
            ...
            },
              'abbreviations': { 'a': '<a href=""></a>', 'img': '<img src="" alt="" />',
            ...
            }
            }

元素类型

Zen Coding有两个主要的元素类型:“片段(snippets)” 和 “缩写(abbreviations)”。片 段就是随意的代码碎片,而缩写是标签定义。通过片段,你可以写出你想要的任何代码,它也会照你写的格式输出;但是你必须手动的格式化它(使用n 和t实现换行和缩进) 并将${child}变量放到你想要输出子元素的地方,就像这样:cc:ie6>style。如果你不使用${child}变量,子元素将会输出于 代码片段的后面

有了缩写,您必须编写标记定义,而且语法是非常重要的。通常,你必须写一个简单的带有所有默认的属性的标签,比如: <a href=””></a>。当Zen Coding被加载后,它会解析一个标签定义到一个描述该标签的名字、属性(包括它们的顺序)以及该标签是否为空的特定的对象中。所以,如果你 写<img src=”” alt=”” />,你会告诉Zen Coding这个标签必须是空的,然后“扩展缩写”行为就会在输出之前为它使用特定的规则。

对于片段和缩写,你可以添加一个管道符号,它告诉Zen Coding当缩写被展开的时候光标会被定位到哪里。默认的,Zen Coding 将光标放在空属性的引号中间以及开始和关闭标签的中间。

例子

那么,这里解释一下当你写了一个缩写并召唤“展开缩写”行动时发生的事情。首先,它将一个完整的缩写分开为独立的元素:这样div>a 会被分成div 和a 元素,当然也会维持他们的关系。然后,每个元素,解析器先在代码片段内而后在缩写中寻找定义。如果它找不到,将会使用元素的名字作为新的标签,并为其添加 缩写中定义的id和class。比如,如果你写mytag#example,解析器在片段或缩写中找不到mytag定义,它就会输出<mytag id=”example”><mytag>。

我们制作了很多默认的CSS和HTML缩写和片段。你会发现学习使用Zen Coding可以增加你的生产力。

HTML 标签对匹配器

对于HTML编码者的另一个非常常见的任务是寻找一个元素的标签对。例如你想选择整个<div id=”content”>标签并将其移动到其它地方或者删除它。或者有可能你在寻找一个关闭标签并想知道它属于那个开始标签。

不幸的是,很多现代开发工具在该功能方面有所欠缺。那么我就决定写一个我自己的标签对匹配器作为Zen Coding的一部分。不过它依然在beta阶段并尚存一些问题,但它可以工作的很不错并很快。不是浏览整个文档(像通常的那种HTML标签对匹配器的做 法),它从光标的当前位置开始寻找相关的标签。这使得它非常快并且上下文无关:它甚至可以用于这段JavaScript代码片段

JavaScript

var table = '<table>'; for (var i = 0; i < 3; i++) {     table += '<tr>'; for (var j = 0; j < 5; j++) {         table += '<td>' + j + '</td>';     }     table += '</tr>'; } table += '</table>';

1
2
3
4
5
6
7
var table = '<table>'; for (var i = 0; i < 3; i++) {
    table += '<tr>'; for (var j = 0; j < 5; j++) {
        table += '<td>' + j + '</td>';
    }
    table += '</tr>';
}
table += '</table>';

使用缩写包裹

这真的是一个很酷的特性,它将缩写和标签对匹配器的功能合并到一起了。你有多少才发现你需要添加一个包裹元素以修正一个浏览器bug?或者你需要添加一个装饰,比如一个背景图片或者边框到一个块级内容?你必须写开始标签,临时打断你的代码,找到相关的点然后关闭标签。这就是“使用缩写包裹”能帮助你的地方。

该功能相当简单:它要求你输入缩写,然后执行适当的“展开缩写”行动并将你期望的文本放到你缩写的最后一个元素里面。如果你没有选择任何文本,它就会启动标签对匹配器并使用结果。它同样能搞清楚你的光标的位置:标签的内容里面或者是开始和关闭标签中间。依赖于它的位置,它会包裹标签的内容或标签本身。

缩写包裹为包裹个别行引入了一个特定的缩写句法。简单跳转到倍增操作符后面的数字,比如:ul#nav>li*>a。当Zen Coding 发现一个使用未定义的倍增数的时候,它会将它作为一个重复元素:你的章节中有多少行,它就会输出多少次,并将每行的内容放到重复元素的最后一个子元素里面。

如果你在这段文本外面包裹这段缩写div#header>ul#navigation>li.item$*>a>span:

XHTML

About Us Products News Blog Contact Up

1
2
3
4
5
About Us
Products
News
Blog
Contact Up

你将会得到以下结果:

XHTML

<div id="header">     <ul id="navigation">         <li><a href=""><span>About Us</span></a></li>         <li><a href=""><span>Products</span></a></li>         <li><a href=""><span>News</span></a></li>         <li><a href=""><span>Blog</span></a></li>         <li><a href=""><span>Contact Up</span></a></li>     </ul> </div>

1
2
3
4
5
6
7
8
9
<div id="header">
    <ul id="navigation">
        <li><a href=""><span>About Us</span></a></li>
        <li><a href=""><span>Products</span></a></li>
        <li><a href=""><span>News</span></a></li>
        <li><a href=""><span>Blog</span></a></li>
        <li><a href=""><span>Contact Up</span></a></li>
    </ul>
</div>

你可以看到,Zen Coding是一个强大的文本处理工具。

快捷键

●Ctrl+,

展开缩写

●Ctrl+M

匹配对

●Ctrl+H

使用缩写包括

●Shift+Ctrl+M

合并行

●Ctrl+Shift+?

上一个编辑点

●Ctrl+Shift+?

下一个编辑点

●Ctrl+Shift+?

定位匹配对

这些快捷键是可以自定义的。

在线演示

你已经学到很多关于Zen Coding如何工作以及它是如何使你的编码更容易了。现在为什么不自己尝试一下呢?因为Zen Coding是用纯JavaScript开发并迁移到Python,它甚至可以用于浏览器内部,这令它成为引入到CMS的首选。

●Demo (使用 Ctrl + , 展开缩写,需要JavaScript支持)

●中文版演示

支持的编辑器

Zen Coding并不依赖某个特定的编辑器。它是一个只处理文本的出色的组件:它获取文本、做一些处理并放回新的文本(或索引,用于标签匹配)。Zen Coding由JavaScript和Python编写,所以它实际上可以运行于任何平台。在Windows,你可以运行JavaScript版本,而 Mac和Linux 分支可以使用Python版。

如果让你的编辑器支持Zen Coding,你需要写一个特定的可以在你的编辑器和Zen Coding之间转换数据的插件。问题是一个编辑器可能不会完整的支持Zen Coding因为它本身的插件系统。比如,TextMate通过使用脚本输出替换当前行很容的就支持了“展开缩写”功能,但是它不能处理标签对匹配因为没有标准的方法请求TextMate来选择内容。

完全支持

●Aptana (跨平台);

●Coda, via TEA for Coda (Mac);

●Espresso, via TEA for Espresso (Mac);

部分支持(只支持“展开缩写”)

●TextMate (只能用于Mac机,Windows可以使用E-text编辑器替代);

●TopStyle;

●Sublime Text;

●GEdit;

●Dreamweaver CS4

●editArea在线编辑器;

●Zen Coding在线编辑器中文版

Aptana是我主要的开发环境,它使用一个JavaScript版本的Zen Coding。它也包含很多其它的我用于日常工作的工具,所以任何一个新的Zen Coding版本都将会首先对Aptana可用,然后部署到Python并兼容其它的编辑器。

Coda和Espresso 插件被杰出的Text Editor Actions (TEA) 平台支持,由Ian Beck开发。原始的源代码在GitHub上,但我还是制作了我自己的分支以整合Zen Coding的特性。

总结

很多尝试过Zen Coding的人都说它改变了他们写页面的方式。当然还有很多事情要做,还有很多的编辑器需要被支持以及一些文档要写。请浏览现在的文档 以及源代码以寻找你的问题的答案。希望你喜欢Zen Coding!

附:Zen coding的具体用法

遗憾的是, 本文原作者并没有说明zen coding的具体用法,神飞认为有必要做以下简要的说明。这里就以Aptana/Eclipse和Dreamweaver为例,其它编辑器平台暂不描述,如有疑问可以在评论中与前端观察的网友交流。

Aptana/Eclipse

由于Aptana本身就是基于Eclipse的,所以,Zen Coding也是支持Eclipse的,只是需要一个EclipseMonkey插件的支持,Aptana已经封装了这个插件,所以如果你使用Aptana,下面的第一步可以跳过。

1、通过更新网站安装EclipseMonkey (如果你使用Aptana,可跳过这一步)

2、在你的当前工作去创建一个顶级的项目,给它命名,比如,就叫zencoding<

3、在新创建的项目中创建scripts文件夹

4、解压缩下载的ZIP插件包到该文件夹。项目结构看起来就像这样:

图片 3

5、安装之后,Aptana的菜单栏中的“脚本(Script)”菜单中将会出现Zen coding相关子菜单

注意事项:

●Aptana版的官方插件是基于MAC机的,如果你用的是Windows,需要手动更改快捷键(在每个文件头部的注释片段中更改)

●官方的文件编码有点儿乱,修改官方js的时候,请注意编码问题,修改不当会造成相关功能的丢失;

DreamWeaver

好消息是,现在已经有了Zen coding for DreamWeaver插件,坏消息是,该插件支持的功能很少,只支持展开缩写功能。而且默认的快捷键是无效的。只能在“命令”菜单中点击操作。另外,没 有测试该插件是不是只支持CS4版本。不过比较好的是,作者将本插件的源码也放出了,你可以自定义一个Dreamweaver的插件。

PS:官方的DW插件已经更新,推荐到官方去下载。新的插件添加了更多的功能支持。UPDATE @ 12-23-2009

特别推荐:豪情同学将缩写给实践了一番,总结出了很多很棒的用例,推荐大家前去学习。

原作者介绍:

Sergey Chikuyonok是一位俄罗斯的前端开发工程师和作者,他在优化方面有很大的热情:从图片、JavaScript效果到工作流程和节省时间的编码。访问他的主页和他的Twitter。

 

赞 2 收藏 2 评论

图片 4

失效的 position:fixed

在许多情况下,position:fixed 将会失效。MDN 用一句话概括了这种情况:

当元素祖先的 transform 属性非 none 时,定位容器由视口改为该祖先。

What!还有这种操作?可能有部分同学还没 get 到上面这句话的意思,通俗的讲就是指定了 position:fixed 的元素,如果其祖先元素存在非 none 的 transform 值 ,那么该元素将相对于设定了 transform 的祖先元素进行定位。

那么,为什么会发生这种情况呢?说好的相对视口(Viewport)定位呢?

这个问题,就牵涉到了 Stacking Context ,也就是堆叠上下文的概念了。解释上面的问题分为两步:

  1. 任何非 none 的 transform 值都会导致一个堆叠上下文(Stacking Context)和包含块(Containing Block)的创建。
  2. 由于堆叠上下文的创建,该元素会影响其子元素的固定定位。设置了 position:fixed 的子元素将不会基于 viewport 定位,而是基于这个父元素。

Stacking Context — 堆叠上下文

好的嘛,好的嘛,又冒出新的名词了,堆叠上下文(又译作层叠上下文),又是什么?

堆叠上下文(Stacking Context):堆叠上下文是 HTML 元素的三维概念,这些 HTML 元素在一条假想的相对于面向(电脑屏幕的)视窗或者网页的用户的 z 轴上延伸,HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。

概念比较抽象,简单理解,记住 生成了 Stacking Context 的元素会影响该元素的层叠关系与定位关系

关于 生成了 Stacking Context 的元素会影响该元素的层叠关系 这一点,具体可以看看这篇文章 层叠顺序(stacking level)与堆栈上下文(stacking context)知多少?

而本文提到了生成了 Stacking Context 的元素会影响该元素定位关系 。按照上面的说法,堆叠上下文的创建,该元素会影响其子元素的固定定位。设置了 position:fixed 的子元素将不会基于 viewport 定位,而是基于这个父元素。

那么问题来了,是否所有能够生成堆叠上下文的元素,都会使得其子元素的 position:fixed 相对它,而不是相对视口(Viewport)进行定位呢?

创建堆叠上下文的方式

为此,首先要找到所有能够使元素生成堆叠上下文的方法。

So,如何触发一个元素形成 堆叠上下文 ?方法如下(参考自 MDN):

  1. 根元素 (HTML),
  2. z-index 值不为 “auto”的 绝对/相对定位,
  3. 一个 z-index 值不为 “auto”的 flex 项目 (flex item),即:父元素 display: flex|inline-flex,
  4. opacity 属性值小于 1 的元素(参考 the specification for opacity),
  5. transform 属性值不为 “none”的元素,
  6. mix-blend-mode 属性值不为 “normal”的元素,
  7. filter值不为“none”的元素,
  8. perspective值不为“none”的元素,
  9. isolation 属性被设置为 “isolate”的元素,
  10. position: fixed
  11. 在 will-change 中指定了任意 CSS 属性,即便你没有直接指定这些属性的值
  12. -webkit-overflow-scrolling 属性被设置 “touch”的元素

接下来,我们要验证,是否所有设置了上面属性样式之一的元素,都有使其子元素的 position: fixed 失效的能力?

为此我做了下面一个小实验,基于最新的 Blink 内核。可戳:

层叠上下文对 fixed 定位的影响(不同内核下表现可能不一致)

图片 5

我们设置两个父子 div,子元素 fixed 定位,通过修改父元素生成层叠上下文,观察子元素的 fixed 定位是否不再相对视口。

XHTML

<div class="container"> <div class="fixed"> </div> </div>

1
2
3
<div class="container">
  <div class="fixed"> </div>
</div>

最初的 CSS :

CSS

.container { width:10vw; height: 10vw; background: rgba(255, 100, 100, .8); } .fixed { position: fixed; top: 1vw; left: 1vw; right: 1vw; bottom: 1vw; background: rgba(100, 100, 255, .8); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.container {
    width:10vw;
    height: 10vw;
    background: rgba(255, 100, 100, .8);
}
 
.fixed {
    position: fixed;
    top: 1vw;
    left: 1vw;
    right: 1vw;
    bottom: 1vw;
    background: rgba(100, 100, 255, .8);
}

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:不受控制的,前端开发人员需要了解的CSS原理

上一篇:如何将页脚固定在页面底部,逐帧动画抖动解决 下一篇:没有了
猜你喜欢
热门排行
精彩图文