中的层叠上下文初探,Github能源搜罗

时间:2019-12-10 07:24来源:美高梅游戏网站
移动端 Swipe mobileTech移动端财富搜罗 五、输入任何模块 接收器也能够三番三次其余CSS文件之中的平整。 another.css JavaScript .className { background-color: blue; } 1 2 3 .className {   background-color:

移动端

  • Swipe
  • mobileTech 移动端财富搜罗

五、输入任何模块

接收器也能够三番三次其余CSS文件之中的平整。

another.css

JavaScript

.className { background-color: blue; }

1
2
3
.className {
  background-color: blue;
}

App.css可以继承another.css里面的平整。

JavaScript

.title { composes: className from './another.css'; color: red; }

1
2
3
4
.title {
  composes: className from './another.css';
  color: red;
}

运行这几个示例。

JavaScript

$ npm run demo05

1
$ npm run demo05

打开

CSS3硬件加速也可以有坑

2015/09/20 · CSS · 硬件加快

原作出处: 张云龙先生(@前端村里人工卡塔尔(英语:State of Qatar)   

常听人说:

挪动端要想动漫质量流畅,应该运用3d硬件加快

近期浓郁驾驭了一些浏览器内核的细节,认为那其间其实有坑啊。。。

政工要从方今看的《WebKit殊手艺术底细》聊到,第二章介绍了网页的构造,个中涉嫌了Webkit硬件加快的艺术,会把需求渲染的成分放到一定的『Composited Layer』中,在chrome的调整台能够这么开启:

图片 1

接收『Show composited layer borders』未来,就会来看有动漫3d转换的要素会被一个香艳的边框圈起来,表示放到了二个新的『复合层(composited layer)』中渲染,大约长这一个样子:

图片 2

灰褐的细线是浏览器渲染时候的『瓦片』,浏览器绘制页面包车型客车时候只会绘制可视区域一定节制内的瓦片,以节约质量费用,而浅中灰的边框框起来的,就意味着了那么些成分被停放特殊的复合层中渲染,跟主文书档案不在多个层中

接下来笔者感觉这一个视图挺有趣的,就拿来看了须臾间国内某项目,不看不明白,黄金时代看被吓尿:

图片 3

本条项目如曾几何时候搞成具备因素都用3d加速了?!

精心每一个核查了这个被框出来的成分,完全未有其他供给复合层渲染的迹象,作者真是哔了狗了。。。作者起来三个个剔除元素,简化代码,相当慢就意识,原本罪魁祸首在这里:

图片 4

底部的丰硕轮播动漫成分的存在甚至会促成下边所有相对和相对定位的因素都被置于复合层中。。。

查了部分 资料:

层创建规范

怎么样情状下能使元素获得自个儿的层?即便 Chrome 的启示式方法(heuristic卡塔尔国随着年华在持续发展更上生机勃勃层楼,但是从当下来讲,满足以下跋扈意况便会创设层:

  • 3D 或透视调换(perspective transform卡塔尔国 CSS 属性
  • 选择加速摄像解码的 成分
  • 怀有 3D (WebGL卡塔尔(قطر‎ 上下文或加快的 2D 上下文的 成分
  • 掺杂插件(如 Flash卡塔尔(英语:State of Qatar)
  • 对协和的 opacity 做 CSS 动漫或利用三个动漫片 webkit 转换的因素
  • 负有加速 CSS 过滤器的因素
  • 要素有二个包涵复合层的后人节点(换句话说,便是多少个要素具有一个子成分,该子成分在协和的层里卡塔尔国
  • 要素有三个 z-index 非常的低且带有三个复合层的男人儿成分(换句话说正是该因素在复合层下边渲染卡塔尔(قطر‎

主尽管终极一条,笔者觉着它的中文翻译不是很纯粹,原著其实是:

Element has a sibling with a lower z-index which has a compositing layer (in other words the it’s rendered on top of a composited layer)

这句话的乐趣是,如若有二个因素,它的弟兄成分在复合层中渲染,而那一个兄弟成分的z-index相当小,那么那个因素(不管是还是不是接受了硬件加快样式)也会被放到复合层中。

最骇人听闻的是,浏览器有希望给复合层之后的有所相对或相对定位的因素都创制二个复合层来渲染,于是就有了下面十三分项目截图的那种效果。早先一向古怪为啥这一个页面滚动很卡,明明不多DOM,今后看来难点就在这里地了!

于是小编写了多个页面,让我们看看那东西到底有多大威力:

图片 5

自家在地点这几个页面中放置了三个h1标题,应用了translate3d动漫,使得它被置于composited layer中渲染,然后在此个因素前面成立了二〇〇〇个list,种种list中皆有七个图片,叁个标题和三个日期突显,此中图片和日期展现是纯属定位,父容器li是相对稳定,然后,各位能够信守前述的认证张开chrome的『show composited layer borders』选项看看那一个页面包车型大巴剧情复合层布满:

图片 6

正是其后生可畏鸟样子,很难想象,那样的页面滚动起来会卡成什么样。笔者用的是mac机器,飞快拖动滚动条chrome已经不行困难了,然后自身写了二个粗略的滚动条移动操作:

setInterval(‘document.body.scrollTop++’, 0);

然后用timeline抓一下页面质量:

图片 7

贰遍『Composite Layers』的思虑依然要 96.206 ms !!那依旧在自己的mac系统上哦,手提式有线电话机上着实会卡出翔。

自个儿在页面上停放了八个开关『为动漫片成分设置z-index』,这几个checkbox点击之后,会用js给这一个动漫的h1成分加 position:relative 和 z-index: 1 ,这种做法的规律是人工提高动漫成分的z-index,让浏览器知道这么些成分的层排序,就不会很傻逼的把其余z-index比它高的要素也弄到复合层中了,看看这么些成效:

图片 8

单独给动漫成分设置三个高级中学一年级些的z-index,就会消除这种无厘头扩张复合层的题材,略无助。。。解决之后,再用滚动条移动函数抓一下页面品质:

完全恢复生机寻常了有木有!

大家能够用扶植『硬件加速』的『安卓』手提式有线电话机浏览器测量检验上述页面,给动漫成分加z-index前后的质量差别特别分明。

不过亦不是负有浏览器都有那几个难点,我在mac上的Safari、firefox都不曾刚强差别,安卓手机上的QQ浏览器好像也健康,猎豹、UC、欧朋、webview等浏览器差异分明,越来越多测量试验就靠我们来发现呢。

终极总括一下:

利用3D硬件加速提高动漫质量时,最棒给成分增加叁个z-index属性,人为干扰复合层的排序,能够有效减少chrome创立不需要的复合层,升高渲染品质,移动端优化效能特别生硬。

世家可以前日就每一种核查一下那类难题,尤其是用了轮播、动漫loading的页面,现身那标题很遍布。别的推荐在查究质量难点的时候张开『show composited layer borders』选项,要是页面有为数不菲煤黑的框断定是不没有错。

最后,再度推荐一下《Webkit能力内部原因》那本书。浏览器内核之于前端技术员,就就像是操作系统之于后端程序猿,毕竟是大家程序运转的宿主遭逢,多驾驭一些,超多主题材料轻松想通。

1 赞 1 收藏 评论

图片 9

HTML篇

2.1 爆发新层叠上下文的场馆

以下景况会发生新的层叠上下文:

  • 根元素(HTML)
  • 纯属或绝对牢固且 z-index 值不为 auto
  • 二个伸缩项目 Flex Item,且 z-index 值不为 auto,即父成分 display: flex|inline-flex
  • 元素的 opacity 属性值小于 1
  • 元素的 transform 属性值不为 none
  • 元素的 mix-blend-mode 属性值不为 normal
  • 元素的 filter 属性值不为 normal
  • 元素的 isolation 属性值为 isolate
  • position: fixed
  • will-change 中钦命了上述率性属性,就算你从未直接定义那个属性
  • 元素的 -webkit-overflow-scrolling 属性值为 touch

如上列表译自:

,提示广大读者,别看汉语版,因为汉语版而不是实时跟进更新的,且翻译不太可信

数码可视化

  • d3
  • Echarts
  • Chart.js

零、示例库

本人为那个课程写了多个示例库,包括八个德姆o。通过它们,你能够轻易学会CSS Modules。

率先,克隆示例库。

JavaScript

$ git clone

1
$ git clone https://github.com/ruanyf/css-modules-demos.git

下一场,安装注重。

JavaScript

$ cd css-modules-demos $ npm install

1
2
$ cd css-modules-demos
$ npm install

继而,就能够运维第二个示范了。

JavaScript

$ npm run demo01

1
$ npm run demo01

开拓浏览器,访谈

创立长宽比固定的成分

透过安装父级窗口的 padding-bottom 可以高达让容器保持自然的尺寸比的指标,那在响应式页面设计中比较有用,可以保持元素不变形。

<div style="width: 100%; position: relative; padding-bottom: 20%;"> <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;background-color:yellow;"> this content will have a constant aspect ratio that varies based on the width. </div> </div>

1
2
3
4
5
<div style="width: 100%; position: relative; padding-bottom: 20%;">
    <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;background-color:yellow;">
        this content will have a constant aspect ratio that varies based on the width.
    </div>
</div>

图片 10

1 CSS2.1 中鲜明的层叠上下文图片 11

Background and borders — of the element forming the stacking context. The lowest level in the stack.

Negative Z-Index — the stacking contexts of descendants elements with negative z-index.

Block Level Boxes — in-flow non-inline-level non-positioned descendants.

Floated Boxes — non-positioned floats

Inline Boxes — in-flow inline-level non-positioned descendants.

Z-index: 0 — positioned elements. These form new stacking contexts.

Positive Z-index — positioned elements. The highest level in the stack.

图像和文字来源:http://webdesign.tutsplus.com/articles/what-you-may-not-know-about-the-z-index-property–webdesign-16892

今昔该小编上场翻译了!在解释上面术语以前,须要表达四个术语:“定位”指的是 position 为 relative 、absolutefixed 的元素,“非定位”则相反。

  • 背景和边框:创建层叠上下文成分的背景和边框。层叠中的最低档
  • 负 Z-indexz-index 为负的后人成分建构的层叠上下文
  • 块级盒:文书档案流内非洲开发银行内级非定点后代成分
  • 浮动盒:非定点变化元素(作者注:即息灭了 position: relative 的浮动盒)
  • 行内盒:文书档案流内行内级非固定后代成分
  • Z-index: 0:定位成分。那一个要素建立了新层叠上下文(我注:不肯定,详见后文)
  • 正 Z-index:(z-index 为正的)定位成分。层叠的万丈阶段

引文如上所表。但笔者提醒各位读者一些,“Z-index: 0”级的固定成分不肯定就能够确立新的层叠上下文。因为:

CSS2.1:(z-index: auto)The stack level of the generated box in the current stacking context is 0. The box does not establish a new stacking context unless it is the root element.

当定位元素 z-index: auto,生成盒在时下层叠上下文中的层级为 0。但该盒不成立新的层叠上下文,除非是根成分。

正式是如此,但 IE6-7 有个 BUG,定位成分正是 z-index: auto 照样创设层叠上下文。

上述是基于 CSS2.1 的层叠上下文介绍。下边要阐释的是在 CSS3 新情状下,层叠上下文的新调换。

Node.js

  • node
  • io.js
  • nw.js
  • PM2
  • connect
  • q
  • async
  • koa
  • node-restify
  • node-static
  • step
  • then.js
  • co
  • node-glob
  • thunks
  • forever
  • request
  • bluebird
  • FormData For node.js
  • node fs模块扩充
  • node-portfinder 得到可用的端口
  • yargs 方便操作process.argv
  • Editor Framework桌面应用框架
  • OAuth2orize
  • Inquirer.js 命令行交互作用
  • jsdom
  • node-lessons包教不包会
  • nodemon
  • node-supervisor
  • node-formidable
  • node-xml2js
  • bagpipe

三、定制哈希类名

css-loader私下认可的哈希算法是[hash:base64],这会将.title编译成._3zyde4l1yATCOkgn-DBWEL那样的字符串。

webpack.config.js个中能够定制哈希字符串的格式。

JavaScript

module: { loaders: [ // ... { test: /.css$/, loader: "style-loader!css-loader?modules&localIdentName=[path][name]---[local]---[hash:base64:5]" }, ] }

1
2
3
4
5
6
7
8
9
module: {
  loaders: [
    // ...
    {
      test: /.css$/,
      loader: "style-loader!css-loader?modules&amp;localIdentName=[path][name]---[local]---[hash:base64:5]"
    },
  ]
}

运转那些示例。

JavaScript

$ npm run demo03

1
$ npm run demo03

你会发现.title被编译成了demo03-components-App—title—GpMto。

明确命令制止外人以iframe加载你的页面

下边包车型客车代码已经无庸赘述了,没什么多数说的。

JavaScript

if (window.location != window.parent.location) window.parent.location = window.location;

1
if (window.location != window.parent.location) window.parent.location = window.location;

2 CSS3 带给的改动

总的看变化能够归为两点,我们之后相继研讨:

  1. CSS3 中过多属性会创造局地层叠上下文
  2. tranform 属性退换相对定位子成分的蕴藏块

Nginx

  • Nginx配置用例

四、 Class 的组合

在 CSS Modules 中,四个采纳器可以延续另二个接收器的平整,那称之为”组合”(“composition”)。

在App.css中,让.title继承.className 。

JavaScript

.className { background-color: blue; } .title { composes: className; color: red; }

1
2
3
4
5
6
7
8
.className {
  background-color: blue;
}
 
.title {
  composes: className;
  color: red;
}

App.js无须修正。

JavaScript

import React from 'react'; import style from './App.css'; export default () => { return ( <h1 className={style.title}> Hello World </h1> ); };

1
2
3
4
5
6
7
8
9
10
import React from 'react';
import style from './App.css';
 
export default () => {
  return (
    <h1 className={style.title}>
      Hello World
    </h1>
  );
};

运行这几个示例。

JavaScript

$ npm run demo04

1
$ npm run demo04

打开

App.css编写翻译成下边包车型大巴代码。

JavaScript

._2DHwuiHWMnKTOYG45T0x34 { color: red; } ._10B-buq6_BEOTOl9urIjf8 { background-color: blue; }

1
2
3
4
5
6
7
._2DHwuiHWMnKTOYG45T0x34 {
  color: red;
}
 
._10B-buq6_BEOTOl9urIjf8 {
  background-color: blue;
}

对应地, h1的class也会编写翻译成<h1 class=”_2DHwuiHWMnKTOYG45T0x34 _10B-buq6_BEOTOl9urIjf8″>。

浏览器地址栏运转HTML代码

假使说上边那条小秘密接头的人还算多以来,那条秘笈知道的人将要少一些了,在非IE内核的浏览器地址栏能够平素运转HTML代码!

比方在地点栏输入以下代码然后回车运营,会鬼使神差内定的页面内容。

data:text/html,<h1>Hello, world!</h1>

1
data:text/html,<h1>Hello, world!</h1>

图片 12

CSS3 中的层叠上下文初探

2015/10/09 · CSS · 层叠上下文

原稿出处: HaoyCn   

前言:关于层叠上下文,笔者还不曾去阅读更详细的 W3C 标准来精通更加精神的法规(表打小编,等自家校招获得 offer 了笔者就读好伐 T_T)。一贯听他们说 CSS3 里的层叠上下文有新情景,但没找到很好的参考资料,故本人实战大器晚成把。鉴于作者水平有限,如有任何脱漏恐怕失实,则恳求读者斧正。

代码管理工科具

  • babel
  • traceur-compiler
  • webpack
  • node-browserify
  • amdclean
  • gulp
  • grunt

黄金时代、局地功用域

CSS的规规矩矩都以大局的,任何二个构件的体裁准则,都对整个页面有效。

爆发局地功用域的当世无双格局,正是利用二个旷世的class的名字,不会与其余选拔重视名。那正是CSS Modules 的做法。

上面是七个React组件App.js。

JavaScript

import React from 'react'; import style from './App.css'; export default () => { return ( <h1 className={style.title}> Hello World </h1> ); };

1
2
3
4
5
6
7
8
9
10
import React from 'react';
import style from './App.css';
 
export default () => {
  return (
    <h1 className={style.title}>
      Hello World
    </h1>
  );
};

上面代码中,大家将样式文件App.css输入到style对象,然后引用style.title代表三个class。

CSS

.title { color: red; }

1
2
3
.title {
  color: red;
}

塑造工具会将类名style.title编写翻译成一个哈希字符串。

XHTML

<h1 class="_3zyde4l1yATCOkgn-DBWEL"> Hello World </h1>

1
2
3
<h1 class="_3zyde4l1yATCOkgn-DBWEL">
  Hello World
</h1>

App.css也会同时被编写翻译。

JavaScript

._3zyde4l1yATCOkgn-DBWEL { color: red; }

1
2
3
._3zyde4l1yATCOkgn-DBWEL {
  color: red;
}

那样一来,那个类名就形成独占鳌头了,只对App组件有效。

CSS Modules 提供各样插件,帮忙分歧的创设筑工程具。本文使用的是 Webpack 的css-loader插件,因为它对 CSS Modules 的扶持最棒,而且比较轻便接收。顺便说一下,借令你想学 Webpack,能够阅读作者的教程Webpack-Demos。

下边是以此示例的webpack.config.js。

JavaScript

module.exports = { entry: __dirname + '/index.js', output: { publicPath: '/', filename: './bundle.js' }, module: { loaders: [ { test: /.jsx?$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015', 'stage-0', 'react'] } }, { test: /.css$/, loader: "style-loader!css-loader?modules" }, ] } };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
module.exports = {
  entry: __dirname + '/index.js',
  output: {
    publicPath: '/',
    filename: './bundle.js'
  },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'stage-0', 'react']
        }
      },
      {
        test: /.css$/,
        loader: "style-loader!css-loader?modules"
      },
    ]
  }
};

上边代码中,关键的风姿洒脱行是style-loader!css-loader?modules,它在css-loader后边加了一个查询参数modules,表示张开CSS Modules 作用。

方今,运转那几个德姆o。

JavaScript

$ npm run demo01

1
$ npm run demo01

打开 ,能够看出结果,h1标题展现为栗褐。

笔直居中

有好数次博主皆宛如此的必要,垂直居中显示某些DIV,我们明白CSS中自然有水平居中的样式 text-align:center 。唯独那些垂直居中无解。

理当如此你可以将容器设置为 display:table ,然后将子成分相当于要笔直居中显得的要素设置为 display:table-cell ,然后加上来达成,但此种达成多次会因为 display:table 而损坏全部布局,那还比不上直接用table标签了呢。

上边这么些样式利用了translate来都行落成了垂直居中样式,需IE9+。

CSS

.center-vertical { position: relative; top: 50%; transform: translateY(-50%); }

1
2
3
4
5
.center-vertical {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

相比较来说,水平居中要简明得多,像上边提到的text-align:center,平常应用的技艺还会有margin:0 auto 。但对于margin大法也只在子元素宽度小于容器宽度时管用,当子成分宽度抢先容器宽度时此法失效。

照猫画虎,利用left和transform相近可实现程度居中,不过意义超小,毕竟text-align和margin大致满足需求了。

CSS

.center-horizontal { position: relative; left: 50%; transform: translateX(-50%); }

1
2
3
4
5
.center-horizontal {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

 

2.2 进步层叠上下文中的层级

以上因素创建新层叠上下文的同期,也会升高成分自己所在层叠上下文中的层级。

我们以 opacity 为例。来看下 CSS3 标准中的话:

If an element with opacity less than 1 is not positioned, implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that would be used if it were a positioned element with ‘z-index: 0’ and ‘opacity: 1’. If an element with opacity less than 1 is positioned, the ‘z-index’ property applies as described in [CSS21], except that ‘auto’ is treated as ‘0’ since a new stacking context is always created.

借使成分 opacity 小于 1 且未稳固,则必得在其父层叠上下文中,按其在定点了的、z-index: 0 且 opacity: 1 的景色中的层叠顺序绘制。借使 opacity 小于 1 且已定位,z-index 属性按 CSS2.1 应用,但 auto 要视为 0,因为新的层叠上下文化总同盟是创建了的。

正如案例:

CSS

div { width: 100px; height: 100px; } #box1 { position: absolute; background: red; top: 40px; left: 40px; } #box2 { background: blue; } <body> <div id="box1"></div> <div id="box2"></div> <body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
div {
    width: 100px;
    height: 100px;
}
#box1 {
    position: absolute;
    background: red;
    top: 40px;
    left: 40px;
}
#box2 {
    background: blue;
}
 
<body>
    <div id="box1"></div>
    <div id="box2"></div>
<body>

以上 CSS 和 HTML 片段中,由于 box1 是纯属定位(层级为“Z-index: 0”级),而 box2 是文书档案流内块级盒(层级为“块级盒”级),由此 box1 会层叠在 box2 之上。上边增多如下 CSS 法规:

CSS

#box2 { opacity: .5; }

1
2
3
#box2 {
    opacity: .5;
}

那个时候, box2 则会层叠在 box1 上述了。因为 box2 的 opacity 为 0.5(小于 1),故视其为“Z-index: 0”级,也就和 box1 同级了。同级境况下,依据双方在源代码中的顺序,居后的 box2 又重新占有高地了。

读者能够取上边法则之大肆一条实践,都能落得同等效果:

CSS

#box2 { transform: scale(1); mix-blend-mode: difference; isolation: isolate; -webkit-filter: blur(5px); }

1
2
3
4
5
6
#box2 {
    transform: scale(1);
    mix-blend-mode: difference;
    isolation: isolate;
    -webkit-filter: blur(5px);
}

模板引擎

  • swig
  • dustjs
  • doT
  • marko
  • mustache.js
  • hogan.js

二、全局效能域

CSS Modules 允许行使:global(.className卡塔尔(英语:State of Qatar)的语法,声明一(Wissu卡塔尔(قطر‎(Karicare卡塔尔国个大局法则。凡是那样表明的class,都不会被编写翻译成哈希字符串。

App.css踏向八个大局class。

JavaScript

.title { color: red; } :global(.title) { color: green; }

1
2
3
4
5
6
7
.title {
  color: red;
}
 
:global(.title) {
  color: green;
}

App.js利用普通的class的写法,就能够援引全局class。

JavaScript

import React from 'react'; import styles from './App.css'; export default () => { return ( <h1 className="title"> Hello World </h1> ); };

1
2
3
4
5
6
7
8
9
10
import React from 'react';
import styles from './App.css';
 
export default () => {
  return (
    <h1 className="title">
      Hello World
    </h1>
  );
};

运作这么些示例。

JavaScript

$ npm run demo02

1
$ npm run demo02

打开

CSS Modules 还提供风姿洒脱种显式的某些功用域语法:local(.className卡塔尔(英语:State of Qatar),等同于.className,所以地点的App.css也足以写成上面这样。

JavaScript

:local(.title) { color: red; } :global(.title) { color: green; }

1
2
3
4
5
6
7
:local(.title) {
  color: red;
}
 
:global(.title) {
  color: green;
}

实时编辑CSS

透过安装style标签的 display:block 样式能够让页面包车型客车style标签突显出来,而且增进content艾德itable 属性后能够让体制作而成为可编写制定状态,校订后的样式效果也是实时更新彰显的。此本领在IE下无效。具有此本事者,逆天也!

<!DOCTYPE html> <html> <body> <style style="display:block" contentEditable> body { color: blue } </style> </body> </html>

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
    <body>
        <style style="display:block" contentEditable>
         body { color: blue }
        </style>
    </body>
</html>

图片 13

2.3 transform 退换相对定位子成分包涵块

transform 除了树立新的部分层叠上下文外,还或然会干一件事:改换相对定位子成分的蕴藏块。须在意的是,固定定位也是纯属定位的后生可畏种。

如何是包罗块?有的时候候有个别盒子依据矩形盒总计本人定位和分寸,此矩形盒即含有块。越来越多详细情况请阅读视觉格式化模型详述。

牢固定位元素

定点定位成分的包蕴块由视口创造(假若读者领悟视觉格式化模型详述的新闻,也就清楚那或多或少:在测算其“静态地方”的时候,则以开头化包罗块作为其总括富含块)。今后大家看以下源代码:

CSS

div { width: 100px; height: 100px; } #fixed { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: blue; } #transform { background: red; padding: 20px; } <body> <div id="transform"> <div id="fixed"></div> </div> </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
div {
    width: 100px;
    height: 100px;
}
#fixed {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: blue;
}
#transform {
    background: red;
    padding: 20px;
}
 
<body>
    <div id="transform">
        <div id="fixed"></div>
    </div>
</body>

那时,以视口为带有块实行一定和尺寸计算, fixed 将会铺满全体荧屏。

但近些日子,大家加多如下准绳:

CSS

#transform { transform: scale(1); }

1
2
3
#transform {
    transform: scale(1);
}

那时,fixed 的蕴藏块不再是视口,而是 transform 的内边距盒的边缘盒了。故那时 fixed 的宽高均为 140px。

纯属定位成分

咱俩举一个事例:

CSS

#relative { position: relative; width: 100px; height: 100px; background: green; } #absolute { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: blue; } #transform { background: red; width: 50px; height: 50px; } <div id="relative"> <div id="transform"> <div id="absolute"></div> </div> </div>

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
#relative {
    position: relative;
    width: 100px;
    height: 100px;
    background: green;
}
#absolute {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: blue;
}
#transform {
    background: red;
    width: 50px;
    height: 50px;
}
 
<div id="relative">
    <div id="transform">
        <div id="absolute"></div>
    </div>
</div>

当时 absolute 的满含块为 relative 的内边距盒的边缘盒。因而 absolute 的宽高均为 100px。然后大家增添如下法规:

CSS

#transform { transform: scale(1); }

1
2
3
#transform {
    transform: scale(1);
}

鉴于 transform 成立了风流浪漫部分层叠上下文,absolute 的包罗块不再是 relative 而是 transform 了,依照那风华正茂新的满含块,得新宽和高为 50px。

中的层叠上下文初探,Github能源搜罗。 1 赞 1 收藏 评论

图片 14

编辑:美高梅游戏网站 本文来源:中的层叠上下文初探,Github能源搜罗

关键词: