清除浮动演化史,移动前端第二弹

日期:2019-11-08编辑作者:美高梅老虎机平台

移步前端第二弹:善用meta

2016/04/19 · CSS · Meta

原版的书文出处: 杜瑶(@doyoe)   

CSS Gradient详解

2016/03/06 · CSS · Gradient

原稿出处: AlloyTeam   

clearfix 解除浮动演变史

2016/04/27 · CSS · CSS, 浮动

原来的文章出处: 520ued   

自家想大家在写CSS的时候应该都对消释浮动的用法深有心得,前几天我们就还斟酌下clearfix的衍变史吧。

美高梅老虎机平台 1

CSS实现垂直居中的常用方法

2016/03/09 · CSS · 6 评论 · 垂直居中

原来的小说出处: 渔歌   

  在前端开拓进度中,盒子居中是平常使用的。此中,居中又能够分为水平居中和垂直居中。水平居中是比较容易的,直接设置成分的margin: 0 auto就足以兑现。不过垂直居中相对来讲是相比复杂一些的。下边大家风流浪漫并来研商一下降成垂直居中的方法。

第黄金年代,定义一个索要垂直居中的div成分,他的上升的幅度和冲天均为300px,背景观为驼灰。代码如下:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style> .content { width: 300px; height: 300px; background: orange; } </style> </head> <body> <div class="content"></div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        .content {
            width: 300px;
            height: 300px;
            background: orange;
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

    

  效果如下:

美高梅老虎机平台, 美高梅老虎机平台 2

   大家要求使得那个奶油色的div居中,到底该怎么做呢?首先我们兑现程度居中,上面已经关系过了,能够透过安装margin: 0 auto完成程度居中,代码如下:

 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style> .content { width: 300px; height: 300px; background: orange; margin: 0 auto; } </style> </head> <body> <div class="content"></div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        .content {
            width: 300px;
            height: 300px;
            background: orange;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

 

    效果如下:

美高梅老虎机平台 3

    很好,已经落到实处程度居中了!接下去该打大boss了——达成垂直居中。可是,在这里前边,大家先要设置div元素的祖宗成分html和body的高度为百分百(因为她俩暗中认可是为0的卡塔 尔(阿拉伯语:قطر‎,并且清除暗中同意样式,即把margin和padding设置为0(如果不拔除默认样式的话,浏览器就能够产出滚动条,聪明的亲,自身思考问怎么着卡塔 尔(英语:State of Qatar)。

 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; } .content { width: 300px; height: 300px; background: orange; margin: 0 auto; /*水平居中*/ } </style> </head> <body> <div class="content"></div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .content {
            width: 300px;
            height: 300px;
            background: orange;
            margin: 0 auto; /*水平居中*/
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

   

   接下来,必要做的事务正是要让div往下活动了。大家都知情top属性能够使得成分向下偏移的。可是,由于暗许景况下,成分在文书档案流里是从上往下、从左到右紧凑的布局的,大家不得以一贯通过top属性改正它的垂直偏移。那就需求动用position属性,设置它的值为relative,就足以经过top、bottom、right、left等品质使它在例行的文书档案流中发出地点偏移(注意,那个时候它在并不曾退出文书档案流,原本的职位还有只怕会占用着的!卡塔尔国。对于position属性不熟谙的,能够友善去w3c看一下。设置了position: relative后的代码如下:

 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; } .content { width: 300px; height: 300px; background: orange; margin: 0 auto; /*水平居中*/ position: relative; /*分离文档流*/ } </style> </head> <body> <div class="content"></div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .content {
            width: 300px;
            height: 300px;
            background: orange;
            margin: 0 auto; /*水平居中*/
            position: relative; /*脱离文档流*/
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

 

    大家刷新一下页面,发掘跟在此以前是向来不任何更换的,因为,大家无非是使div脱离了文书档案流,不过还未有开头活动她的垂直偏移。好,上面大家就让它偏移啊!垂直偏移要求用到top属性,它的值能够是切实的像素,也能够是比例。因为我们未来不晓得父成分(即body卡塔尔国的现实中度,所以,是不得以因而具体像向来偏移的,而应该用百分数。既然是要让它居中嘛!好,那么我们就让它的值为一半不就能够了吗?难题确实那么简单,大家来试一下,就设置50%试一下:

 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style> html,body { width: 100%; height: 100%; margin: 0; padding: 0; } .content { width: 300px; height: 300px; background: orange; margin: 0 auto; /*水平居中*/ position: relative; /*分离文书档案流*/ top: 50%; /*偏移*/ } </style> </head> <body> <div class="content"></div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        html,body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .content {
            width: 300px;
            height: 300px;
            background: orange;
            margin: 0 auto; /*水平居中*/
            position: relative; /*脱离文档流*/
            top: 50%; /*偏移*/
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

 

    效果如下图所示:

美高梅老虎机平台 4

    div垂直方向方面并从未居中。显然是偏下了。下边,大家在浏览器中间画一条红线用来仿效,如下图:

美高梅老虎机平台 5

    通过观望上图,只要让div的宗旨移动到红线的职位,那么整个div就居中了。那怎么让它基本移动到红线处呢?从图中能够观测到,从div的基本到红线的偏离是div自个儿中度的二分一。那时候,大家能够使用通过margin-top属性来安装,因为div的自笔者高度是300,所以,须要设置他的margin-top值为-150。为何是要设置成负数的吧?因为正数是向下偏移,大家是期待div向上偏移,所以应该是负数,如下:

 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style> html,body { width: 100%; height: 100%; margin: 0; padding: 0; } .content { width: 300px; height: 300px; background: orange; margin: 0 auto; /*水平居中*/ position: relative; /*退出文书档案流*/ top: 50%; /*偏移*/ margin-top: -150px; } </style> </head> <body> <div class="content"></div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        html,body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .content {
            width: 300px;
            height: 300px;
            background: orange;
            margin: 0 auto; /*水平居中*/
            position: relative; /*脱离文档流*/
            top: 50%; /*偏移*/
            margin-top: -150px;
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

 

意义如下:

美高梅老虎机平台 6

    确实已经居中了。好开心!有木有?!

    除了能够行使margin-top把div往上偏移之外,CSS3的transform属性也足以完结那一个效果,通过安装div的transform: translateY(-四分之二),意思是驱动div向上移动(translate卡塔尔本人低度的二分之一(50%)。如下:

 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style> html,body { width: 100%; height: 100%; margin: 0; padding: 0; } .content { width: 300px; height: 300px; background: orange; margin: 0 auto; /*水平居中*/ position: relative; /*分离文书档案流*/ top: 50%; /*偏移*/ transform: translateY(-50%); } </style> </head> <body> <div class="content"></div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        html,body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .content {
            width: 300px;
            height: 300px;
            background: orange;
            margin: 0 auto; /*水平居中*/
            position: relative; /*脱离文档流*/
            top: 50%; /*偏移*/
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

 

    效果如下:

美高梅老虎机平台 7

    下面的三种艺术,大家都是依靠设置div的top值为二分一从今以后,再拓宽调度垂偏移量来达成居中的。要是使用CSS3的弹性布局(flex卡塔尔国的话,难题就能够变得轻松多了。使用CSS3的弹性布局很粗略,只要设置父成分(这里是指body卡塔 尔(英语:State of Qatar)的display的值为flex就能够。具体代码如下,对代码不做过多的解释,若是想精晓弹性布局的能够看阮意气风发峰先生的博客:

 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style> html,body { width: 100%; height: 100%; margin: 0; padding: 0; } body { display: flex; align-items: center; /*定义body的因素垂直居中*/ justify-content: center; /*定义body的里的因素水平居中*/ } .content { width: 300px; height: 300px; background: orange; } </style> </head> <body> <div class="content"></div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        html,body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
 
        body {
            display: flex;
            align-items: center; /*定义body的元素垂直居中*/
            justify-content: center; /*定义body的里的元素水平居中*/
        }
        .content {
            width: 300px;
            height: 300px;
            background: orange;        
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

 

    效果:

美高梅老虎机平台 8

    除了下边3中方法之外,当然可能还存在不菲的能够兑现垂直居中的方法。譬喻能够将父容器设置为display:table ,然后将子成分也正是要笔直居中展现的因素设置为 display:table-cell 。然则,那是不值得推荐的,因为会毁掉全体的布局。借使用table布局,那么为何不直接使用table标签了?那不进一层有益啊?

    关于CSS落成垂直居中的方法,就写这么多了。要是,开掘哪个地方写的窘迫的只怕有更加好的点子的,请在商量提议来,那样我们可以同步谈谈、协同提高!

1 赞 9 收藏 6 评论

美高梅老虎机平台 9

有线品质优化:Composite

2016/04/26 · 根基技巧 · 无线

原来的文章出处: 天猫商城前端团队(FED卡塔尔- 冬萌   

美高梅老虎机平台 10

二个 Web 页面包车型地铁突显,不问可以预知能够感到阅历了以下下多少个步骤。

美高梅老虎机平台 11

  • JavaScript:平常的话,大家会动用 JavaScript 来促成部分视觉变化的意义。比方做叁个动漫片或然往页面里增多一些 DOM 成分等。
  • Style:总括样式,那几个历程是基于 CSS 采取器,对种种 DOM 成分配对应的 CSS 样式。这一步甘休之后,就分明了每一种 DOM 元素上该行使什么 CSS 样式准绳。
  • Layout:布局,上一步鲜明了种种 DOM 成分的体制准绳,这一步正是实际测算每一种 DOM 成分最终在荧屏上展示的朗朗上口和岗位。web 页面瓜月素的布局是对立的,由此一个元素的布局发生变化,会联合浮动地吸引其余因素的布局发生变化。比方,`` 成分的急剧的变化会影响其子元素的增长幅度,其子成分宽度的调换也会持续对其孙子成分发生震慑。由此对于浏览器来讲,布局进度是不经常产生的。
  • Paint:绘制,本质上便是填充像素的历程。包涵绘制文字、颜色、图像、边框和影子等,也正是三个DOM 成分全数的可视效果。常常的话,这几个绘制进度是在多少个层上落成的。
  • Composite:渲染层合併,由上一步可见,对页面中 DOM 成分的绘图是在四个层上扩充的。在种种层上成功绘制进度之后,浏览器会将全体层根据客观的逐风姿洒脱合併成一个图层,然后显示在荧屏上。对于有地方重叠的成分的页面,那个进度更为首要,因为只要图层的统风度翩翩顺序出错,将会产生成分展现十分。

当然,本文大家只来关注 Composite 部分。

前言

在挪动前端第一弹:viewport安详严整中,大家讲了viewport,那是一个有关meta的好玩的事。本次我们会就将meta那个遗闻讲得更加宽广、更风趣一些。

写过HTML的童鞋,应该都对那一个不不熟悉,或用它来定义页面编码,或用它来定义寻找引擎抓取格局,或用它定义页面关键字,描述等等。

前言

今昔设计员同学越来越高大上了,纯色背景已经不能够满意村夫俗子大众日益增进的物质文化须要了,必得整渐变背景o(╯□╰)o。怎么过来呢,设计师直接丢过来三个几十K的图形,那怎么行。。。

辛亏大家有CSS第三代!这一次就来唠唠CSS3 Gradient(/ˈgreɪdɪənt/)的用法。

 

clearfix解除浮动

率先在成千上万众多年从前大家常用的歼灭浮动是那般的。

CSS

.clear{clear:both;line-height:0;}

1
.clear{clear:both;line-height:0;}

前段时间或然还足以在广大老的站点上能够见见那样的代码,非常强力有效的消除浮动的主题素材。然则那几个用法有两个致命伤,便是每趟裁撤浮动的时候都亟待追加三个空标签来使用。

这种做法若是在页面复杂的布局要时时清楚浮动的时候就能够时有产生不少的空标签,扩充了页面无用竹签,不便利页面优化。可是作者意识特大型网址中 居然还在行使这种明白浮动的主意。有意思味的同室能够上她们首页搜索一下他们的.blank0这么些样式名称。

所以有众多大神就钻研出了 clearfix 消除浮动的法子,直接消除了地点的通病,没有要求充实空标签,直接在有变动的外围加上这一个样式就足以了,那也是大家今日要研究的clearfix演变史。

浏览器渲染原理

在评论 Composite 早前,有不能够贫乏先简单掌握下一些浏览器(本文只是本着 Chrome 来讲卡塔 尔(阿拉伯语:قطر‎的渲染原理,方便对以往有的概念的知情。越来越多详细的情节能够参阅 GPU Accelerated Compositing in Chrome

注:由于 Chrome 对 Blank 引擎某个达成的退换,某个我们以前掌握的类名有了转移,举例 RenderObject 形成了 LayoutObject,RenderLayer 形成了 PaintLayer。感兴趣的看以参阅 Slimming Paint。

在浏览器中,页面内容是积存为由 Node 对象组成的树状结构,也等于 DOM 树。每叁个 HTML element 成分都有二个 Node 对象与之相应,DOM 树的根节点永世都以 Document Node。那或多或少亲信我们都很熟稔了,但实际上,从 DOM 树到最终的渲染,须要开展局地调换映射。

美高梅老虎机平台 12

meta列表

好的meta应用,能越来越好地抓实页面包车型大巴可用性及被搜寻的概率。

此处并不会列出具备的meta使用方法,只采纳部分常用及实际意义相当大的说话,当然也囊括部分商家私有定制的。

 

兼容性

从Can I use上看,当代浏览器援救程度能够,特别移动端,对于不支持的浏览器,下文仲提供后生可畏种选拔纯色的降级方案。

美高梅老虎机平台 13

但是种种包容性难点断定免不了,Gradient和Flex box相似eggache,总共有两种语法则则,而且间隔比十分大。。。

此处为了研究轻松,大家只涉嫌最新的语法(基本能遮住大量新浏览器了卡塔 尔(英语:State of Qatar)。老旧语法法则和IE等各浏览器的分外方法请见参照他事他说加以考察文章的2、3有详细的牵线,也得以动用Gradient Generator或者autoprefixer自动生成代码。

起源

CSS

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-table; } * html .clearfix { height: 1%; }//Hides from IE-mac .clearfix { display: block; }//End hide from IE-mac

1
2
3
4
5
6
7
8
9
10
11
12
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.clearfix { display: inline-table; }
 
* html .clearfix { height: 1%; }//Hides from IE-mac
.clearfix { display: block; }//End hide from IE-mac

解释一下以上的代码:

  • 对超越约得其半适合标准的浏览器选拔第叁个申明块,目标是创造两个掩蔽的剧情为空的块来为指标成分排除浮动。
  • 其次条为clearfix应用 inline-table 展现属性,仅仅针对IE/Mac。利用 * 对 IE/Mac 隐敝一些规规矩矩:
  • height:1% 用来触发 IE6 下的haslayout。
  • 再一次对 IE/Mac 外的IE应用 block 显示属性。
  • 提起底风姿洒脱行用于截至针对 IE/Mac 的hack。(是或不是感到很坑爹,Mac下还大概有IE卡塔 尔(英语:State of Qatar)

来自代码也许也是很中期的时候了,再现在Mac下的IE5也提升到IE6了,各类浏览器初始向W3C那条标准逐步靠齐了。所以就有了上面那一个写法现身了。

CSS

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */

1
2
3
4
5
6
7
8
9
10
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

IE6 和 IE7 都不补助 :after 这一个伪类,因而供给前边两条来触发IE6/7的haslayout,以撤除浮动。幸运的是IE8协理:after 伪类。由此只须要针对IE6/7的hack了。

在一个有float 属性成分的外层扩张四个负有clearfix属性的div包裹,能够保证表面div的height,即清除”浮动成分脱离了文书档案流,包围图片和文书的 div 不占用空间”的主题素材。

杰夫 Starr 在那间针对IE6/7用了两条语句来触发haslayout。作者在想我为何不直接用 * 来直接对 IE6/7 同临时候使用 zoom:1 恐怕直接就写成:

CSS

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix{*zoom:1;}

1
2
3
4
5
6
7
8
9
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.clearfix{*zoom:1;}

但是对于大多同班这种优化程度代码照旧远远不够给力,clearfix 发展到今天的八个终极版。

从 Nodes 到 LayoutObjects

DOM 树中得每一种 Node 节点都有贰个对应的 LayoutObject 。LayoutObject 知道什么样在显示屏上 paint Node 的剧情。

常规

置于知识

1、绘制区域,相当于正规中所谓的gradient box(为了知道无歧义,下文不再翻译该术语卡塔尔国,跟所涉嫌DOM的莫过于尺寸有关,譬如,设定background的话,绘制区域正是DOM的padding box,除非用backgroud-size钦定大小;要是是设定list-style-image,绘制区域正是1em的正方形。

2、从W3C的陈说中能够领略,浏览器实际是依靠Gradient内定的语法来扭转对应的图样

        A gradient is an image that smoothly fades from one color to another.

而且不但background能够用,举例

CSS

background: linear-gradient(white, gray); list-style-image: radial-gradient(circle, #006, #00a 90%, #0000af 100%, white 100%);

1
2
background: linear-gradient(white, gray);
list-style-image: radial-gradient(circle, #006, #00a 90%, #0000af 100%, white 100%);

3、由于是image,所以用于background时,实际是设置在background-image上,如若只是只是的渐变颜色,能够用以下的样式来对不援救的老旧浏览器做降级管理

CSS

.gradient { /* can be treated like a fallback */ background-color: red; /* will be "on top", if browser supports it */ background-image: linear-gradient(red, orange); }

1
2
3
4
5
6
.gradient {
/* can be treated like a fallback */
  background-color: red;
/* will be "on top", if browser supports it */
  background-image: linear-gradient(red, orange);
}

规律就借出慕课网的一张图:

美高梅老虎机平台 14

Gradient有多少个子本性,上边风度翩翩一列出。

重构clearfix浮动

组合Block Formatting Context的章程有下边三种:

float的值不为none。

overflow的值不为visible。

display的值为table-cell, table-caption, inline-block中的任何二个。

position的值不为relative和static。

很明白,float和position不稳当大家的须要。那只可以从overflow只怕display中选取叁个。

因为是行使了.clearfix和.menu的美食指南极有非常大大概是多如牛毛的,所以overflow: hidden或overflow: auto也不满足必要

(会把下拉的菜单隐蔽掉或然出滚动条卡塔尔,那么只可以从display入手。

咱俩得以将.clearfix的display值设为table-cell, table-caption, inline-block中的任何一个

唯独display: inline-block会产生多余空白,所以也免去掉。

剩余的唯有table-cell, table-caption,为了保障宽容能够用display: table来使.clearfix产生一个Block Formatting Context

因为display: table会发生部分佚名盒子,那一个无名氏盒子的中间三个(display值为table-cell卡塔 尔(英语:State of Qatar)会形成Block Formatting Context。

像这种类型大家新的.clearfix就能够闭合内部因素的成形。

后边又有人对此伸开了改进:

终极版大器晚成:

CSS

.clearfix:after { content:"200B"; display:block; height:0; clear:both; } .clearfix {*zoom:1;}/*IE/7/6*/

1
2
3
4
5
6
7
.clearfix:after {
    content:"200B";
    display:block;
    height:0;
    clear:both;
}
.clearfix {*zoom:1;}/*IE/7/6*/

分解下:content:”200B”;那一个参数,Unicode字符里有八个“零上升的幅度空格”,即 U+200B,代替本来的“.”,能够减少代码量。并且不再采用visibility:hidden。

终极版二:

CSS

.clearfix:before,.clearfix:after{ content:""; display:table; } .clearfix:after{clear:both;} .clearfix{ *zoom:1;/*IE/7/6*/ }

1
2
3
4
5
6
7
8
.clearfix:before,.clearfix:after{
    content:"";
    display:table;
}
.clearfix:after{clear:both;}
.clearfix{
    *zoom:1;/*IE/7/6*/
}

那四个终极版代码都很简短,终极版后生可畏和二都得以应用,以上代码都因而测量试验,大家飞快用一下啊,倘使有啥难点请及时跟本身报告,若是你还停留在clearfix的老代码的时候就尽快更新一下代码吧。

2 赞 7 收藏 评论

美高梅老虎机平台 15

从 LayoutObjects 到 PaintLayers

日常的话,具有后生可畏致的坐标空间的 LayoutObjects,归于同一个渲染层(PaintLayer卡塔尔国。PaintLayer 最先是用来兑现 stacking contest(层叠上下文卡塔尔,以此来承保页面成分以准确的逐意气风发合成(composite卡塔 尔(英语:State of Qatar),那样能力科学的显得成分的重合以致半透明成分等等。因而满足产生层叠上下文条件的 LayoutObject 一定会为其创造新的渲染层,当然还应该有其余的部分不一致通常情状,为局地非同一般的 LayoutObjects 成立一个新的渲染层,比方 overflow != visible 的因素。依照创立 PaintLayer 的原故莫衷一是,能够将其分为常见的 3 类:

  • NormalPaintLayer
    • 根元素(HTML)
    • 有明确的定势属性(relative、fixed、sticky、absolute卡塔 尔(英语:State of Qatar)
    • 透明的(opacity 小于 1)
    • 有 CSS 滤镜(fliter)
    • 有 CSS mask 属性
    • 有 CSS mix-blend-mode 属性(不为 normal)
    • 有 CSS transform 属性(不为 none)
    • backface-visibility 属性为 hidden
    • 有 CSS reflection 属性
    • 有 CSS column-count 属性(不为 auto)或者 有 CSS column-width 属性(不为 auto)
    • 现阶段有对于 opacity、transform、fliter、backdrop-filter 应用动漫
  • OverflowClipPaintLayer
    • overflow 不为 visible
  • NoPaintLayer
    • 没有必要 paint 的 PaintLayer,举个例子贰个从未有过视觉属性(背景、颜色、阴影等卡塔尔的空 div。

满意上述口径的 LayoutObject 会具有独立的渲染层,而其余的 LayoutObject 则和其首先个具有渲染层的父成分共用多少个。

宣称文书档案使用的字符编码

XHTML

<meta charset="utf-8" />

1
<meta charset="utf-8" />

该注脚用来钦点文书档案的编码,除了utf-8,可选值还会有:ISO-8859-1、BIG5、iso-8859-2, iso-2022-jp, iso-2022-kr, gb2312等

自然,你大概还见过使用其它生机勃勃种情势来定义文书档案字符编码:

XHTML

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

1
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

相对于这种方法,更推荐您利用第1种,意在刘邦,正是援引应用HTML5

线性渐变(linear-gradient卡塔尔

语法如下:

CSS

linear-gradient() = linear-gradient( [ | to ]?, <color-stop-list> ) <side-or-corner> = [left | right] || [top | bottom]

1
2
3
4
5
linear-gradient() = linear-gradient(
  [ | to ]?,
  <color-stop-list>
)
<side-or-corner> = [left | right] || [top | bottom]

第二个参数指明了颜色渐变的样子:

  • 能够是角度,比方0deg,表示正上方向,90deg表示向右(顺时针卡塔尔国
  • 也得以是主要词,比如to top, to right, to bottom, to left, 分别对应了0deg, 90deg, 180deg, 270deg。当然也能够不钦赐,暗中认可值是to bottom

其次个参数指明了颜色断点(即color-stop卡塔 尔(英语:State of Qatar)。地点能够省略,第二个默以为0%,最终四个默以为百分之百,要是中间的值未有一点点名,则按颜色数目求均值,比方

CSS

清除浮动演化史,移动前端第二弹。linear-gradient(red 40%, white, black, blue) /*等价于*/ linear-gradient(red 40%, white 60%, black 80%, blue 100%)

1
2
3
linear-gradient(red 40%, white, black, blue)
/*等价于*/
linear-gradient(red 40%, white 60%, black 80%, blue 100%)

更加的多边界情状能够参照W3C规范,提出地方都施用相似的单位,制止产生意想不到情况。

从 PaintLayers 到 GraphicsLayers

好几特殊的渲染层会被认为是合成层(Compositing Layers卡塔尔,合成层具有独立的 GraphicsLayer,而此外不是合成层的渲染层,则和其首先个颇负 GraphicsLayer 父层公用三个。

各类 GraphicsLayer 都有三个 GraphicsContext,GraphicsContext 会担当输出该层的位图,位图是积存在分享内存中,作为纹理上传到 GPU 中,最终由 GPU 将多少个位图进行合成,然后 draw 到显示屏上,那时,大家的页面也就显现到了显示器上。

渲染层升高为合成层的原由有须臾间三种:

注:渲染层升高为合成层有八个先决条件,该渲染层必得是 SelfPaintingLayer(基本可感觉是上文介绍的 NormalPaintLayer卡塔尔。以下所商议的渲染层进步为合成层的景色都以在该渲染层为 SelfPaintingLayer 前提下的。

  • 直接原因(direct reason卡塔尔国
    • 硬件加速的 iframe 成分(譬喻 iframe 嵌入的页面中有合成层卡塔尔国demo
    • video 元素
    • 覆盖在 video 成分上的录制调控栏
    • 3D 也许 硬件加快的 2D Canvas 成分
      • demo:普通 2D Canvas 不会提高为合成层
      • demo:3D Canvas 升高为合成层
    • 硬件加速的插件,比如 flash 等等
    • 在 DPI 较高的显示屏上,fix 定位的要素会活动地被提高到合成层中。但在 DPI 超低的装置上却并不是那样,因为那些渲染层的进级会使得字体渲染情势由子像素变为灰阶(详细内容请参谋:Text Rendering)
    • 有 3D transform
    • backface-visibility 为 hidden
    • 对 opacity、transform、fliter、backdropfilter 应用了 animation 也许 transition(需若是 active 的 animation 也许 transition,当 animation 也许 transition 效果未初阶或收尾后,升高合成层也会失效卡塔尔
      • demo:animation
      • demo:transition美高梅老虎机平台 16
    • will-change 设置为 opacity、transform、top、left、bottom、right(个中 top、left 等急需设置醒目标一定属性,如 relative 等卡塔尔demo
  • 子孙成分原因
    • 有合成层后代同期笔者有 transform、opactiy(小于 1卡塔 尔(阿拉伯语:قطر‎、mask、fliter、reflection 属性 demo
    • 有合成层后代同时本人 overflow 不为 visible(要是本人是因为确定的牢固因素爆发的 SelfPaintingLayer,则须求 z-index 不为 auto卡塔 尔(英语:State of Qatar) demo
    • 有合成层后代同临时候自身 fixed 定位 demo
    • 有 3D transfrom 的合成层后代同一时间本身有 preserves-3d 属性 demo
    • 有 3D transfrom 的合成层后代同不平日候本人有 perspective 属性 demo
  • overlap 重叠原因为什么会因为重叠原因此爆发合成层呢?举个简易的栗子。美高梅老虎机平台 17玉石白的矩形重叠在肉桂色矩形之上,同一时间它们的父成分是一个GraphicsLayer。这个时候假若紫灰矩形为二个 GraphicsLayer,假设 overlap 不恐怕晋升合成层的话,那么青莲矩形不会晋级为合成层,也就能和父成分公用一个GraphicsLayer。美高梅老虎机平台 18那时候,渲染顺序就能够爆发错误,由此为作保渲染顺序,overlap 也改成了合成层发生的自始至终的经过,也便是之类的例市场价格形。美高梅老虎机平台 19当然 overlap 的由来也会细分为几类,接下去大家会详细看下。
    • 痴肥只怕说部分重叠在四个合成层之上。那如何终归重叠呢,最朝齑暮盐和轻松了解的正是因素的 border box(content + padding + border卡塔尔国和合成层的有肥胖,例如:demo,当然 margin area 的重叠是无效的(demo卡塔尔。别的的还会有生龙活虎部分不遍布的意况,也究竟同合成层重叠的基准,如下:
      • filter 效果同合成层重叠 demo
      • transform 转换后同合成层重叠 demo
      • overflow scroll 情形下同合成层重叠。即只要一个 overflow scroll(不管 overflow:auto 还是 overflow:scrill,只如果能 scroll 就可以卡塔 尔(阿拉伯语:قطر‎的要素同八个合成层重叠,则其可视子成分也同该合成层重叠 demo
    • 假诺重叠在一个合成层之上(assumedOverlap卡塔尔国。那个原因听起来有一些虚,什么叫要是重叠?其实也正如好明白,比如一个因素的 CSS 动漫成效,动画运维时期,成分是有一点都不小希望和别的因素有重合的。针对于这种情景,于是就有了 assumedOverlap 的合成层发生原因,示例可知:demo。在本 demo 中,动画成分视觉上并从未和其兄弟成分重叠,但因为 assumedOverlap 的缘故,其兄弟成分依旧升高为了合成层。要求小心的是该原因下,有贰个很新鲜的意况:假诺合成层有内联的 transform 属性,会引致其兄弟渲染层 assume overlap,进而晋级为合成层。举个例子:demo。

宣示页面刷新或跳转

XHTML

<meta http-equiv="refresh" content="10" /> <meta http-equiv="refresh" content="10; url=" />

1
2
<meta http-equiv="refresh" content="10" />
<meta http-equiv="refresh" content="10; url=http://www.doyoe.com" />

该证明用来钦定页面自刷新或然跳转到其余页面,此中的时刻单位是s

浏览器是怎么绘制渐变线的啊?

如下图,从gradient box的基本(对角线交点卡塔尔起初以CSS中钦定的角度向两边延伸,终点是gradient box的一个好像极点到gradient line垂线的垂足,起源也是形似的求法,两点间的偏离就是gradient line的尺寸(浓浓的初级中学几何味~)。

美高梅老虎机平台 20

故而,gradient line的长短计算公式是:

CSS

abs(W * sin(A)) + abs(H * cos(A)) A是角度,W是gradient box的宽,H为高

1
2
abs(W * sin(A)) + abs(H * cos(A))
A是角度,W是gradient box的宽,H为高

是或不是看完有种然并卵的以为到:前端技术员哪个地方需求知道那么些鬼啊。

非也非也,在开采UI的时候,清楚的知情浏览器原理,才干在脑中依照视觉稿正确的解构出CSS代码,不然只可以在这里边傻傻的试了又试。

栗子一

以下的写法效果其实都意气风发致

CSS

kground-image: linear-gradient(yellow, green); // 暗中认可方向为to bottom background-image: linear-gradient(to bottom, yellow, green); // 使用首要字内定方向 background-image: linear-gradient(180deg, yellow, green); // 使用角度钦命方向 background-image: linear-gradient(to top, green, yellow); background-image: linear-gradient(to bottom, yellow 0%, green 百分百); // 钦命颜色断点

1
2
3
4
5
kground-image: linear-gradient(yellow, green); // 默认方向为to bottom
  background-image: linear-gradient(to bottom, yellow, green); // 使用关键字指定方向
  background-image: linear-gradient(180deg, yellow, green); // 使用角度指定方向
  background-image: linear-gradient(to top, green, yellow);
  background-image: linear-gradient(to bottom, yellow 0%, green 100%); // 指定颜色断点

美高梅老虎机平台 21

栗子二

自然两个颜色断点也足以:

CSS

background-image: linear-gradient(to bottom, #FF0000 14.28%, #FFA500 14.28%, #FFA500 28.57%, #FFFF00 28.57%, #FFFF00 42.85%, #008000 42.85%, #008000 57.14%, #0000FF 57.14%, #0000FF 71.42%, #4B0082 71.42%, #4B0082 85.71%, #800880 85.71%, #800880 100%);

1
background-image: linear-gradient(to bottom, #FF0000 14.28%, #FFA500 14.28%, #FFA500 28.57%, #FFFF00 28.57%, #FFFF00 42.85%, #008000 42.85%, #008000 57.14%, #0000FF 57.14%, #0000FF 71.42%, #4B0082 71.42%, #4B0082 85.71%, #800880 85.71%, #800880 100%);

美高梅老虎机平台 22

以这事例还会有个小技术,Gradient中四个不等颜色间暗中同意是潜移默化的,但要是我们要求做出图中这种颜色醒目转变的功效(锐变卡塔 尔(阿拉伯语:قطر‎,就能够用同叁个岗位差别颜色的艺术落实。

栗子三

在颜色上安装反射率渐变

CSS

gradient-1 { background-image:url(); background-size: 100% 100%; } .gradient-2 { background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)), url() no-repeat; background-size: 100% 100%; }

1
2
3
4
5
6
7
8
9
gradient-1 {
  background-image: url(http://a57.foxnews.com/global.fncstatic.com/static/managed/img/fn2/876/493/EmmaWatsonBrown.jpg);
  background-size: 100% 100%;
}
 
.gradient-2 {
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)), url(http://a57.foxnews.com/global.fncstatic.com/static/managed/img/fn2/876/493/EmmaWatsonBrown.jpg) no-repeat;
  background-size: 100% 100%;
}

职能如下,侧面原图,侧边扩充了意气风发层遮罩,这几个效果其实是运用了CSS3的多背景语法

美高梅老虎机平台 23

更加多例子能够在那处看 

层压缩

大概相近的意气风发对合成层的晋级原因如上所说,你会开掘,由于重叠的因由,大概轻便就能够生出出大气合成层来,而各类合成层都要消耗 CPU 和内部存款和储蓄器能源,岂不是严重影响页面品质。这点浏览器也假造到了,因而就有了层压缩(Layer Squashing卡塔 尔(英语:State of Qatar)的管理。假使四个渲染层同三个合成层重叠时,这一个渲染层会被削减到一个GraphicsLayer 中,避防备出于重叠原因变成也许现身的“层爆炸”。具体能够看如下 demo。风度翩翩开头,深橙方块由于
translateZ 进步为了合成层,其余的四方成分因为重叠的原故,被压缩了一起,大小正是带有那3 个方块的矩形大小。

美高梅老虎机平台 24

当我们 hover 稻草黄方块时,会给其设置 translateZ 属性,招致银白方块也被升高为合成层,则剩下的三个被核减到了一块,大小就减弱为带有那2 个方块的矩形大小。

美高梅老虎机平台 25

自然,浏览器的电动的层压缩亦不是全能的,有成千上万一定情景下,浏览器是无可奈何张开层压缩的,如下所示,而那一个处境也是大家应该尽量制止的。(注:以下情状都以依附重叠原因此言卡塔尔

  • 没辙進展销会打破渲染顺序的压缩(squashingWouldBreakPaintOrder卡塔 尔(阿拉伯语:قطر‎示举例下:demo
CSS

#ancestor { -webkit-mask-image:
-webkit-linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0)); }
#composited { width: 100%; height: 100%; transform: translateZ(0);
} #container { position: relative; width: 400px; height: 60px;
border: 1px solid black; } #overlap-child { position: absolute;
left: 0; top: 0 ; bottom: 0px; width: 100%; height: 60px;
background-color: orange; }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d201886f149137440-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d201886f149137440-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6d201886f149137440-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d201886f149137440-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6d201886f149137440-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d201886f149137440-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f6d201886f149137440-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d201886f149137440-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f6d201886f149137440-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d201886f149137440-10">
10
</div>
<div class="crayon-num" data-line="crayon-5b8f6d201886f149137440-11">
11
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d201886f149137440-12">
12
</div>
<div class="crayon-num" data-line="crayon-5b8f6d201886f149137440-13">
13
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d201886f149137440-14">
14
</div>
<div class="crayon-num" data-line="crayon-5b8f6d201886f149137440-15">
15
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d201886f149137440-16">
16
</div>
<div class="crayon-num" data-line="crayon-5b8f6d201886f149137440-17">
17
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d201886f149137440-18">
18
</div>
<div class="crayon-num" data-line="crayon-5b8f6d201886f149137440-19">
19
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d201886f149137440-20">
20
</div>
<div class="crayon-num" data-line="crayon-5b8f6d201886f149137440-21">
21
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d201886f149137440-22">
22
</div>
<div class="crayon-num" data-line="crayon-5b8f6d201886f149137440-23">
23
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d201886f149137440-24">
24
</div>
<div class="crayon-num" data-line="crayon-5b8f6d201886f149137440-25">
25
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d201886f149137440-26">
26
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d201886f149137440-1" class="crayon-line">
  #ancestor {
</div>
<div id="crayon-5b8f6d201886f149137440-2" class="crayon-line crayon-striped-line">
    -webkit-mask-image: -webkit-linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0));
</div>
<div id="crayon-5b8f6d201886f149137440-3" class="crayon-line">
  }
</div>
<div id="crayon-5b8f6d201886f149137440-4" class="crayon-line crayon-striped-line">
  
</div>
<div id="crayon-5b8f6d201886f149137440-5" class="crayon-line">
  #composited {
</div>
<div id="crayon-5b8f6d201886f149137440-6" class="crayon-line crayon-striped-line">
    width: 100%;
</div>
<div id="crayon-5b8f6d201886f149137440-7" class="crayon-line">
    height: 100%;
</div>
<div id="crayon-5b8f6d201886f149137440-8" class="crayon-line crayon-striped-line">
    transform: translateZ(0);
</div>
<div id="crayon-5b8f6d201886f149137440-9" class="crayon-line">
  }
</div>
<div id="crayon-5b8f6d201886f149137440-10" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f6d201886f149137440-11" class="crayon-line">
  #container {
</div>
<div id="crayon-5b8f6d201886f149137440-12" class="crayon-line crayon-striped-line">
    position: relative;
</div>
<div id="crayon-5b8f6d201886f149137440-13" class="crayon-line">
    width: 400px;
</div>
<div id="crayon-5b8f6d201886f149137440-14" class="crayon-line crayon-striped-line">
    height: 60px;
</div>
<div id="crayon-5b8f6d201886f149137440-15" class="crayon-line">
    border: 1px solid black;
</div>
<div id="crayon-5b8f6d201886f149137440-16" class="crayon-line crayon-striped-line">
  }
</div>
<div id="crayon-5b8f6d201886f149137440-17" class="crayon-line">
 
</div>
<div id="crayon-5b8f6d201886f149137440-18" class="crayon-line crayon-striped-line">
  #overlap-child {
</div>
<div id="crayon-5b8f6d201886f149137440-19" class="crayon-line">
    position: absolute;
</div>
<div id="crayon-5b8f6d201886f149137440-20" class="crayon-line crayon-striped-line">
    left: 0;
</div>
<div id="crayon-5b8f6d201886f149137440-21" class="crayon-line">
    top: 0 ;
</div>
<div id="crayon-5b8f6d201886f149137440-22" class="crayon-line crayon-striped-line">
    bottom: 0px;
</div>
<div id="crayon-5b8f6d201886f149137440-23" class="crayon-line">
    width: 100%;
</div>
<div id="crayon-5b8f6d201886f149137440-24" class="crayon-line crayon-striped-line">
    height: 60px;
</div>
<div id="crayon-5b8f6d201886f149137440-25" class="crayon-line">
    background-color: orange;
</div>
<div id="crayon-5b8f6d201886f149137440-26" class="crayon-line crayon-striped-line">
  }
</div>
</div></td>
</tr>
</tbody>
</table>




XHTML

&lt;div id="container"&gt; &lt;div id="composited"&gt;Text behind
the orange box.&lt;/div&gt; &lt;div id="ancestor"&gt; &lt;div
id="overlap-child"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d201887b075031864-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d201887b075031864-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6d201887b075031864-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d201887b075031864-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6d201887b075031864-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d201887b075031864-6">
6
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d201887b075031864-1" class="crayon-line">
&lt;div id=&quot;container&quot;&gt;
</div>
<div id="crayon-5b8f6d201887b075031864-2" class="crayon-line crayon-striped-line">
  &lt;div id=&quot;composited&quot;&gt;Text behind the orange box.&lt;/div&gt;
</div>
<div id="crayon-5b8f6d201887b075031864-3" class="crayon-line">
  &lt;div id=&quot;ancestor&quot;&gt;
</div>
<div id="crayon-5b8f6d201887b075031864-4" class="crayon-line crayon-striped-line">
    &lt;div id=&quot;overlap-child&quot;&gt;&lt;/div&gt;
</div>
<div id="crayon-5b8f6d201887b075031864-5" class="crayon-line">
  &lt;/div&gt;
</div>
<div id="crayon-5b8f6d201887b075031864-6" class="crayon-line crayon-striped-line">
&lt;/div&gt;
</div>
</div></td>
</tr>
</tbody>
</table>
  • video 成分的渲染层不可能被减去同期也回天乏术将其余渲染层压缩到 video 所在的合成层上(squashingVideoIsDisallowed卡塔 尔(英语:State of Qatar)demo
  • iframe、plugin 的渲染层不可能被核减同临时间也回天无力将别的渲染层压缩到其所在的合成层上(squashingLayoutPartIsDisallowed卡塔尔demo
  • 无法回退有 reflection 属性的渲染层(squashingReflectionDisallowed卡塔尔国demo
  • 无法回退有 blend mode 属性的渲染层(squashingBlendingDisallowed卡塔 尔(英语:State of Qatar)demo
  • 当渲染层同合成层有分化的剪裁容器(clipping container卡塔尔国时,该渲染层不可能回退(squashingClippingContainerMismatch卡塔 尔(阿拉伯语:قطر‎。示举个例子下:demo
CSS

.clipping-container { overflow: hidden; height: 10px;
background-color: blue; } .composited { transform: translateZ(0);
height: 10px; background-color: red; } .target { position:absolute;
top: 0px; height:100px; width:100px; background-color: green; color:
#fff; }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d2018880297868155-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2018880297868155-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2018880297868155-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2018880297868155-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2018880297868155-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2018880297868155-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2018880297868155-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2018880297868155-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2018880297868155-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2018880297868155-10">
10
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2018880297868155-11">
11
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2018880297868155-12">
12
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2018880297868155-13">
13
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2018880297868155-14">
14
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2018880297868155-15">
15
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2018880297868155-16">
16
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2018880297868155-17">
17
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2018880297868155-18">
18
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2018880297868155-19">
19
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2018880297868155-20">
20
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2018880297868155-21">
21
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2018880297868155-22">
22
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2018880297868155-23">
23
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d2018880297868155-1" class="crayon-line">
.clipping-container {
</div>
<div id="crayon-5b8f6d2018880297868155-2" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f6d2018880297868155-3" class="crayon-line">
    overflow: hidden;
</div>
<div id="crayon-5b8f6d2018880297868155-4" class="crayon-line crayon-striped-line">
    height: 10px; 
</div>
<div id="crayon-5b8f6d2018880297868155-5" class="crayon-line">
    background-color: blue;
</div>
<div id="crayon-5b8f6d2018880297868155-6" class="crayon-line crayon-striped-line">
  }
</div>
<div id="crayon-5b8f6d2018880297868155-7" class="crayon-line">
 
</div>
<div id="crayon-5b8f6d2018880297868155-8" class="crayon-line crayon-striped-line">
  .composited {
</div>
<div id="crayon-5b8f6d2018880297868155-9" class="crayon-line">
 
</div>
<div id="crayon-5b8f6d2018880297868155-10" class="crayon-line crayon-striped-line">
    transform: translateZ(0); 
</div>
<div id="crayon-5b8f6d2018880297868155-11" class="crayon-line">
    height: 10px; 
</div>
<div id="crayon-5b8f6d2018880297868155-12" class="crayon-line crayon-striped-line">
    background-color: red;
</div>
<div id="crayon-5b8f6d2018880297868155-13" class="crayon-line">
  }
</div>
<div id="crayon-5b8f6d2018880297868155-14" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f6d2018880297868155-15" class="crayon-line">
  .target {
</div>
<div id="crayon-5b8f6d2018880297868155-16" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f6d2018880297868155-17" class="crayon-line">
    position:absolute; 
</div>
<div id="crayon-5b8f6d2018880297868155-18" class="crayon-line crayon-striped-line">
    top: 0px; 
</div>
<div id="crayon-5b8f6d2018880297868155-19" class="crayon-line">
    height:100px; 
</div>
<div id="crayon-5b8f6d2018880297868155-20" class="crayon-line crayon-striped-line">
    width:100px; 
</div>
<div id="crayon-5b8f6d2018880297868155-21" class="crayon-line">
    background-color: green;
</div>
<div id="crayon-5b8f6d2018880297868155-22" class="crayon-line crayon-striped-line">
    color: #fff;
</div>
<div id="crayon-5b8f6d2018880297868155-23" class="crayon-line">
  }
</div>
</div></td>
</tr>
</tbody>
</table>




XHTML

&lt;div class="clipping-container"&gt; &lt;div
class="composited"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div
class="target"&gt;不会被压缩到 composited div 上&lt;/div&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d2018884301689224-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2018884301689224-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2018884301689224-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2018884301689224-4">
4
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d2018884301689224-1" class="crayon-line">
&lt;div class=&quot;clipping-container&quot;&gt;
</div>
<div id="crayon-5b8f6d2018884301689224-2" class="crayon-line crayon-striped-line">
  &lt;div class=&quot;composited&quot;&gt;&lt;/div&gt;
</div>
<div id="crayon-5b8f6d2018884301689224-3" class="crayon-line">
&lt;/div&gt;
</div>
<div id="crayon-5b8f6d2018884301689224-4" class="crayon-line crayon-striped-line">
&lt;div class=&quot;target&quot;&gt;不会被压缩到 composited div 上&lt;/div&gt;
</div>
</div></td>
</tr>
</tbody>
</table>


本例中 .target 同 合成层 `.composited` 重叠,但是由于
.composited`在一个 overflow: hidden 的容器中,导致 .target 和合成层有不同的裁剪容器,从而 `.target` 无法被压缩。`
  • 相对于合成层滚动的渲染层无法被裁减(scrollsWithRespectToSquashingLayer卡塔尔国示举例下:demo

CSS

body { height: 1500px; overflow-x: hidden; } .composited { width: 50px; height: 50px; background-color: red; position: absolute; left: 50px; top: 400px; transform: translateZ(0); } .overlap { width: 200px; height: 200px; background-color: green; position: fixed; left: 0px; top: 0px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
body {
    height: 1500px;
    overflow-x: hidden;
  }
 
  .composited {
 
    width: 50px;
    height: 50px;
    background-color: red;
    position: absolute;
    left: 50px;
    top: 400px;
    transform: translateZ(0);
  }
 
  .overlap {
    width: 200px;
    height: 200px;
    background-color: green;
    position: fixed;
    left: 0px;
    top: 0px;
  }

XHTML

<div class="composited"></div> <div class="overlap"></div>

1
2
<div class="composited"></div>
<div class="overlap"></div>

本例中,红色的 .composited提升为了合成层,绿色的.overlapfix 在页面顶部,一开始只有.composited合成层。

![]()

当滑动页面,.overlap重叠到.composited上时,.overlap` 会因重叠原因升高为合成层,同期,因为相对于合成层滚动,因而不能被削减。

![]()

  • 当渲染层同合成层有两样的全体 opacity 的祖先层(叁个设置了 opacity 且小于 1,贰个并未有设置 opacity,也算是不一致卡塔 尔(阿拉伯语:قطر‎时,该渲染层无法回退(squashingOpacityAncestorMismatch,同 squashingClippingContainerMismatch卡塔尔国demo
  • 当渲染层同合成层有区别的有着 transform 的先世层时,该渲染层无法回降(squashingTransformAncestorMismatch,同上卡塔 尔(英语:State of Qatar) demo
  • 当渲染层同合成层有例外的全部 filter 的古人层时,该渲染层不能够回降(squashingFilterAncestorMismatch,同上卡塔 尔(阿拉伯语:قطر‎demo
  • 当覆盖的合成层正在周转动漫时,该渲染层不恐怕回退(squashingLayerIsAnimating卡塔 尔(英语:State of Qatar),当动漫未初步依旧运转达成之后,该渲染层才得以被压缩 demo美高梅老虎机平台 26

本文由澳门美高梅老虎机平台发布于美高梅老虎机平台,转载请注明出处:清除浮动演化史,移动前端第二弹

关键词:

调剂景况,有线页面动漫优化实例

无线页面动漫优化实例 2016/04/20 · CSS ·无线 初藳出处:大额_skylar(@大数额大数额哼歌等日落卡塔 尔(英语:State ...

详细>>

变动CSS世界驰骋准则的writing,标签与搜索引擎优

知道CSS3 isolation: isolate的显现和功效 2016/01/10 · CSS ·isolate 初稿出处:张鑫旭    意气风发部分小个性 为了让H5的表现...

详细>>

等高分栏布局小结,那或者是史上最全的CSS自适

写二个网页进度loading 2017/02/26 · JavaScript· 2 评论 ·Loading 原来的书文出处: jack_lo    loading随处可知,举例二个app平...

详细>>

H5游戏开垦,个异常的棒的美高梅老虎机平台:

三、蹩脚JS下的Node.js初体验二周目 大家写页面实际的开销要求必然不知文件批量重命名这么轻便,笔者晓得有叁个须...

详细>>