亚洲必赢登录 > 亚洲必赢app > CSS3硬件加速也可能有坑,响应式设计的5个CSS实用

原标题:CSS3硬件加速也可能有坑,响应式设计的5个CSS实用

浏览次数:114 时间:2019-10-05

何足挂齿的 z-index 却能牵扯出这么大的学识

2016/04/30 · CSS · z-index

初稿出处: 朔风吹雪   

必赢国际,z-index在平凡开销中到底一个比较常用的体裁,平时精通正是设置标签在z轴前后相继顺序,z-index值大的展现在最终边,小的则会被遮挡,是的,z-index的实际上效率正是这么。

可是你确实领悟z-index吗?你掌握它有哪些特色吗?这里先抛出多少个名词:“层叠顺序(stacking order)”,“层叠上下文(stacking context)699.net亚洲必赢,”,“层叠水平(stacking level)”。

先说一下z-index的基本用法:

z-index能够设置成多个值:

  • auto,默许值。当设置为auto的时候,当前因素的层叠级数是0,同不经常候那些盒不会成立新的层级上下文(除非是根成分,即<html>);
  • <integer>。提示层叠级数,能够使负值,同有的时候间无论是什么值,都会成立叁个新的层叠上下文;
  • inherit。父成分承接

z-index只在牢固成分中起效果,举栗子:

XHTML

<style> #box1{ background: blue; width: 200px; height: 200px; } #box2{ background: yellow; width: 200px; height: 200px; margin-top:-100px; } </style> <div id="box1"></div> <div id="box2"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
    #box1{
        background: blue;
        width: 200px;
        height: 200px;
    }
    #box2{
        background: yellow;
        width: 200px;
        height: 200px;
        margin-top:-100px;
    }
      
</style>
<div id="box1"></div>
<div id="box2"></div>

我们愿意box1要展现在box2上面,或者那时候有同学会说,给box1加三个z-index大于0的值就能够了,那样是畸形的,如图:

699.net亚洲必赢 1

box2遮挡了box1,就算box1安装z-index值再大也枉然,前面说了z-index只在稳住成分(position=static除了那些之外,因为成分私下认可正是static,约等于没用position样式)中成效,也是就z-index要同盟position一齐利用感兴趣的能够亲身说Bellamy下,这里只进行试探。

层叠顺序对绝对成分的Z轴顺序

层叠顺序其实不是z-index唯有的,各个成分都有层叠顺序,成分渲染的前后相继顺序跟它有相当大关系,总来讲之当元素爆发层叠时,成分的层级高的会先行显示在上头,层级同样的则会基于dom的前后相继顺序举办渲染,前面包车型地铁会覆盖前边的。文字再多恐怕也从不一张图来的直接,上面那张图是“七阶层叠水平”(互连网盗的,很卓绝的一张图)

699.net亚洲必赢 2

再举个栗子,这里依然拿刚才可怜栗子来讲,在并非z-index的前提下,利用css层叠顺序消除遮挡难题,代码修改如下

CSS

<style> #box1{ background: blue; width: 200px; height: 200px; display:inline-block; } #box2{ background: yellow; width: 200px; height: 200px; margin-top:-100px; } </style> <div id="box1"></div> <div id="box2"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
    #box1{
        background: blue;
        width: 200px;
        height: 200px;
        display:inline-block;
    }
    #box2{
        background: yellow;
        width: 200px;
        height: 200px;
        margin-top:-100px;
    }
      
</style>
<div id="box1"></div>
<div id="box2"></div>

此处只做了细微的更换,正是给box1加了一个display:inline-block;的体制,这里解释一下,首先box1和box2产生了层叠,然后box默以为块级成分,即display:block,从七阶图中看出,display:block的成分的层叠水平低于display:inline-block的元素,所以浏览器就将box2渲染到box1方面,如图:

699.net亚洲必赢 3

灵活的行使七阶图能够令你的代码尽或然的缩减z-index的接纳。因为五个人支付同四个系统,若是过多的用z-index,很有希望会现出争论,即遮挡难点,日常的话z-index使用10以内的数值就够用了。

重大:层叠上下文

  先说一下若是成立层叠上下文,css创制层叠上下文的艺术有众多,不过常用的也就够那么两种

  1、定位成分中z-index不等于auto的会为该因素创制层叠上下文

  2、html根成分私下认可会创立层叠上下文(那是贰个特例,知道就行)

  3、成分的opacity不等于1会创立层叠上下文

  4、成分的transform不对等none会制造层叠上下文

还应该有任何格局创制层叠上下文,这里就不做牵线了,上边四中是付出中常用到的。

那么明亮怎么开创层叠上下文之后,难题的机要来了,层叠上下文有何用吧?

此处肯定要结成前边那张七阶图,最上边那一层background便是是营造在层叠上下文的基本功上的,约等于说在层叠上下文中,全部的成分都会渲染在该因素的层叠上下文背景和边框下边;在block盒子、float盒子等不设有层级上下文的要素中,子成分设置z-index为负值的时候,**那么子成分会被父成分遮挡**。说了恐怕不太好明白,举个栗子消化吸取一下:

XHTML

<style> #box1{ position: relative; width: 200px; height: 200px; background: blue; } #box2{ position: relative; z-index:-1; width: 100px; height: 100px; background: yellow; } </style> <div id="box1"> <div id="box2"></div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
    #box1{
        position: relative;
        width: 200px;
        height: 200px;
        background: blue;
    }
    #box2{
        position: relative;
        z-index:-1;
        width: 100px;
        height: 100px;
        background: yellow;
    }
</style>
 
<div id="box1">
      <div id="box2"></div>
</div>

里,box并未开创层叠上下文,当子元素box2设置z-index:-1时,box2所在的层叠上下文是根成分,即html根标签,遵照七阶图能够看看,box2会渲染在html标签上边,普通盒子box1(z-index:auto)上面,所以box2被挡住了。如图所示:

699.net亚洲必赢 4

那么怎么化解这几个标题吗?相信咱们早已知晓这里该怎么管理了吧,是的,为box1家徒壁立三个层叠上下文,那么box第11中学的成分无论z-index是负的略微,都会展现在box1的背景之上,如图:

699.net亚洲必赢 5

此处自个儿用了前边说的的率先种办法去成立层叠上下文,即固化元素中z-index不为auto的要素会构造建设层叠上下文,大概有的同学伊始纳闷了,box1的z-index小于box2的z-index,为何box2缺显示在box1的下边吧?呵呵,那正对应了七阶图的层叠水平的关联,不清楚的再精心掂量一下七阶图

· 层叠水平仅在一向父级层叠上下文中举办比较,即层叠上下文A中的子成分的层叠水平不会和另一个层叠上下文中的子成分进行比较。举例

XHTML

<style> #box1{ z-index: 10; position: relative; width: 200px; height: 200px; background: green; } #box1_1{ position: relative; z-index: 100; width: 100px; height: 100px; background: blue; } #box2{ position: relative; z-index: 11; width: 200px; height: 200px; background: red; margin-top: -150px; } </style> <div id="box1"> <div id="box1_1"> </div> </div> <div id="box2"> </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
26
27
28
29
30
31
32
33
<style>
    #box1{
        z-index: 10;
        position: relative;
        width: 200px;
        height: 200px;
        background: green;
    }
    #box1_1{
        position: relative;
        z-index: 100;
        width: 100px;
        height: 100px;
        background: blue;
    }
    #box2{
        position: relative;
        z-index: 11;
        width: 200px;
        height: 200px;
        background: red;
        margin-top: -150px;
    }
</style>
 
<div id="box1">
    <div id="box1_1">    
    </div>
</div>
 
<div id="box2">
</div>

叠上下文box第11中学的子成分box2设置z-index为100,而层叠上下文box2的z-index唯有11,而实际上的渲染效果却是,box2在box1和box1_1的方面,那就应了上边那就话,层叠水平仅在要素的率先个父级层叠上下文中张开,即层叠上下文A中的子成分的层叠水平不会和另三个层叠上下文中的子成分进行相比较,也正是活box1_1的z-index对于她的父级层叠上下文之外的因素未有任何影响。这里box2和box1在同一个层叠上下文中(html根元素会暗中同意创设层叠上下文),所以它们八个会进行层叠水平的比较,box2的z-index大于box1的z-index,所以我们来看的也正是下面那样,box2遮挡了box1,不在意box第11中学的子成分z-index是有个别,如图:

699.net亚洲必赢 6

此处作者对z-index的接头也就叙述完成了,大约就说了以下这几点内容:

  1、z-index仅在固定成分(position不对等static)中央银立竿见影

  2、七阶层叠水平图

  3、z-index层叠水平的可比只限于父级层叠上下文中

说不上必要注意以下几点:

  1、在开拓中尽量幸免层叠上下文的多层嵌套,因为层叠上下文嵌套过多的话轻巧发生扑朔迷离,假使对层叠上下文科理科解远远不足的话是倒霉把控的。

  2、非浮层成分(对话框等)尽量不要用z-index(通过层叠顺序或许dom顺序或然经过层叠上下文进行拍卖)

  3、z-index设置数值时尽恐怕用个位数

用了一晚间的年华整治了那篇作品,就连笔者自身对z-index也可以有了更加深厚的精晓,希望对您也许有帮扶。如有错误 应接指正

2 赞 6 收藏 评论

699.net亚洲必赢 7

响应式设计的5个CSS实用技艺

2012/05/26 · CSS · 1 评论 · CSS

英语原稿:5 Useful CSS Tricks for Responsive Design ,翻译:Viven Chen

正如自己在学科响应式Web设计三步走在那之中所讲的,响应式的Web设计其实并简单,可是要让要素在布局切换时亦可平展过渡就相比考验本事了。以后自己享受在编码时常用的五个CSS本领并举个例子表达。那一个手艺都以应用简便的CSS属性,如min-width、max-width、overflow 和相对属性值,然而那些属性在响应式设计中发布着一点都不小的成效。

1. 响应式Video (demo)

响应式video的CSS本事是由tjkdesign.com意识的。小编事先的一篇小说介绍过它,你能够在这里开卷。响应式摄像会适应它的容器宽度。

CSS

.video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video iframe, .video object, .video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
 
.video iframe,
.video object,
.video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

2. Min & Max Width (demo)

性能设置了成分的最大幅度面。其目标是防范成分“越线”。

最大开间容器

在上面包车型客车例证其中,笔者定义了container的肥瘦是800px(译注:要是它的父容器不低于800px),可是不抢先父容器的百分之七十。

CSS

.container { width: 800px; max-width: 90%; }

1
2
3
4
.container {
    width: 800px;
    max-width: 90%;
}

CSS

<strong>响应式图片</strong>

1
<strong>响应式图片</strong>

运用max-width:百分百 and height:auto,图片能自适应父容器的宽窄。

CSS

img { max-width: 100%; height: auto; }

1
2
3
4
img {
    max-width: 100%;
    height: auto;
}

上述的CSS在IE7和IE9都能起效果,不过IE8不识别。能够应用width:auto来修补。你能够利用针对IE8的条件CSS,可能利用下边包车型地铁IE hack:

CSS

@media screen { img { width: auto; /* for ie 8 */ } }

1
2
3
4
5
@media screen {
  img {
    width: auto; /* for ie 8 */
  }
}

Min-Width

反而,它设置了成分的细小宽度。在上边包车型客车例子里面,min-width用来定义input的肥瘦,防止input被拉伸的时候变得过小。

699.net亚洲必赢 8 3. 相对值 (demo) 响应式设计中,使用相对值可以简化CSS和革新布局。上面举例表达。 相对Margin 下边包车型客车例证是研商列表,使用相对margin来安装。小编用百分比的值而不用相对的像素值来隔开子列表。上面包车型地铁截图可以看看,借使用像一直定义,子列表会变得进一步小。 699.net亚洲必赢 9 相对字体大小 以相对值(如em或%)设置的书体、行高、外边距能够被一而再。譬如,只要简单地改成父级成分的字体大小,那么它的子成分的字体大小也能随着改动。 699.net亚洲必赢 10 抵触内边距 下边包车型客车截图注解了针锋相对的百分比边距比相对的一定像素边距更加好。右边的容器体现了采纳像素边距的不平衡。左边的器皿则展示了对容器空间的丰裕利用。 699.net亚洲必赢 11 4. Overflow:hidden Trick 技巧 (demo) 如作者在前头的篇章所说的,能够动用overflow属性来祛除浮动。那么些技艺很实用。应用overflow:hidden,能够对上一个要素清除浮动,保障当前容器的开始和结果能健康彰显。 699.net亚洲必赢 12 5. Word-break (demo) 小编事先也说过word-wrap 属性。能够在胁迫长文本(如长U普拉多L链接)换行。

CSS

.break-word { word-wrap: break-word; }

1
2
3
.break-word {
        word-wrap: break-word;
}

699.net亚洲必赢 13

 

 

赞 5 收藏 1 评论

699.net亚洲必赢 14

单元测量试验相当的慢

几百个单元测量试验套件能在几分钟内运营。

那使得单元测量试验对开荒很有用。 当重构代码时,大家能够退换代码,并在未曾脚刹踏板组件的情事下运作单元测试来检查改动。 我们会在几分钟之内知道大家是还是不是破坏了代码,因为中间七个测量试验会战败。

CSS3硬件加速也可能有坑

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

原作出处: 张云龙(Zhang Yunlong)(@前端农民工)   

常听人说:

移步端要想动画质量流畅,应该运用3d硬件加快

最近深刻摸底了一些浏览器内核的底细,认为那当中其实有坑啊。。。

工作要从近些日子看的《Web基特技巧内部意况》谈起,第二章介绍了网页的组织,在那之中涉及了Webkit硬件加快的法子,会把须要渲染的成分放到一定的『Composited Layer』中,在chrome的调控台可以那样开启:

699.net亚洲必赢 15

选取『Show composited layer borders』以往,就能够见到有动画3d转变的成分会被七个艳情的边框圈起来,表示放到了一个新的『复合层(composited layer)』中渲染,大约长那些样子:

699.net亚洲必赢 16

清水蓝的细线是浏览器渲染时候的『瓦片』,浏览器绘制页面的时候只会绘制可视区域一定范围内的瓦片,以节省质量开支,而森林绿的边框框起来的,就象征了那些元素被放置特殊的复合层中渲染,跟主文书档案不在二个层中

下一场本人认为那些视图挺风趣的,就拿来看了一晃本国某项目,不看不通晓,一看被吓尿:

699.net亚洲必赢 17

本条体系怎么时候搞成具备因素都用3d加速了?!

留神排查了那几个被框出来的成分,完全未有别的部供给要复合层渲染的迹象,作者当成哔了狗了。。。笔者起来三个个删减成分,简化代码,十分的快就开采,原本罪魁祸首在那边:

699.net亚洲必赢 18

头顶的极度轮播动画元素的存在以至会招致上面全体相对和相对定位的成分都被放到复合层中。。。

查了一些 资料:

层创立规范

怎么动静下能使元素得到自身的层?纵然 Chrome 的启发式方法(heuristic)随着岁月在相连向上发展,但是从最近的话,满足以下放肆情状便会创制层:

  • 3D 或透视调换(perspective transform) CSS 属性
  • CSS3硬件加速也可能有坑,响应式设计的5个CSS实用本领。利用加快摄像解码的 成分
  • 具备 3D (WebGL) 上下文或加紧的 2D 上下文的 元素
  • 掺杂插件(如 Flash)
  • 对友好的 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,今后看来难题就在那边了!

于是乎作者写了二个页面,让大家看看那东西到底有多大威力:

699.net亚洲必赢 19

本身在上头那些页面中放置了三个h1标题,应用了translate3d动画,使得它被安置composited layer中渲染,然后在那些因素后边创制了2000个list,各类list中都有三个图形,贰个标题和叁个日子显示,在那之中图片和日期展现是相对定位,父容器li是相对固化,然后,各位能够遵照前述的证实打开chrome的『show composited layer borders』选项看看这几个页面包车型地铁原委复合层分布:

699.net亚洲必赢 20

就是其一鸟样子,很难想象,那样的页面滚动起来会卡成如何。作者用的是mac机器,飞速拖动滚动条chrome已经特别讨厌了,然后小编写了二个简短的滚动条移动操作:

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

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

699.net亚洲必赢 21

三遍『Composite Layers』的猜度依旧要 96.206 ms !!这依旧在笔者的mac系统上哦,手提式有线电话机上确实会卡出翔。

本身在页面上停放了二个开关『为卡通成分设置z-index』,这么些checkbox点击之后,会用js给那一个动画的h1成分加 position:relative 和 z-index: 1 ,这种做法的法规是人工进步动画成分的z-index,让浏览器知道那些成分的层排序,就不会很傻逼的把其余z-index比它高的要素也弄到复合层中了,看看这些意义:

699.net亚洲必赢 22

一味给动画成分设置三个高级中学一年级些的z-index,就会一蹴而就这种无厘头扩充复合层的难题,略无可奈何。。。解决之后,再用滚动条移动函数抓一下页面质量:

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

我们能够用匡助『硬件加快』的『安卓』手机浏览器测验上述页面,给动画成分加z-index前后的习性差别十三分明显。

唯独亦不是独具浏览器都有那个标题,小编在mac上的Safari、firefox都不曾显著差别,安卓手提式无线电话机上的QQ浏览器好像也健康,猎豹、UC、欧朋、webview等浏览器差异可想而知,更加的多测量检验就靠大家来开掘吗。

谈到底计算一下:

选用3D硬件加快升高动画品质时,最棒给成分扩充一个z-index属性,人为干扰复合层的排序,能够有效削减chrome成立不要求的复合层,进步渲染品质,移动端优化成效特别鲜明。

我们可之前天就排查一下这类问题,非常是用了轮播、动画loading的页面,出现那难题很普及。别的推荐在追查质量难题的时候张开『show composited layer borders』选项,若是页面有为数不菲色情的框鲜明是不对的。

末段,再一次推荐一下《Webkit技艺内部原因》那本书。浏览器内核之于前端程序猿,就就像操作系统之于后端工程师,究竟是我们程序运转的宿主情形,多询问部分,比较多主题材料轻巧想通。

1 赞 1 收藏 评论

699.net亚洲必赢 23

科学普及的图片格式

图片格式 压缩方式 动画 适应浏览器
JPG 有损 不支持 所有
PNG 无损 不支持 所有
GIF 无损 支持 所有
APNG 无损 支持 firefox、safari
WebP 有损/无损 支持 chrome、opera

APNG,作为想代替gif的新格式,他比大家常用的gif更为美貌。从其名称中能够看看,APNG其实能够说是会动png,因为png帮衬23位的水彩,而gif最多仅帮助8位的颜料,因而,APNG的显得效果比gif更为鲜明。缺憾APNG并从未踏入png规范,由此我们常常生产中很难将其放入使用。

WebP,是由谷歌(Google)推出的图片格式,想让其用作web中等专门的学业学园用的图片格式。与jpg作比较,WebP有对透明的支撑,以及完全不亚于JPG的压缩率。而与PNG相比较,WebP更加小,加载越来越快。不过遗憾的是,其包容性也是不太友好。

下边二种格式,因为使用不太多,因而独有提起一下。上边将对我们常用的JPG,PNG,以及GIF来做研讨。

单元测量试验

单元测量检验测验的是代码库的单元。

它们一贯调用函数或单元,并保管重返无误的结果。

在大家的选用中,我们的机件是单元。所以大家将为 Button 和 Modal 编写单元测验。没有须要为大家的运用组件编写测量检验,因为它从未任何逻辑。

单元测量检验会浅渲染组件,并预见当大家与它们相互时,它们的一颦一笑是不错的。

浅渲染代表大家渲染组件一层深度。这样大家能够保险只测量试验组件,单元,实际不是多少个级其他子组件。

在我们的测验中,大家将触发组件上的操作,并检讨组件的行事是否与预期一致。

我们绝不看着代码。不过我们的组件规格会如下所示:

  • 当 displayModal 为 true 时,Modal 有类是活跃的
  • 当 displayModal 为 false 时,Modal 未有类是活泼的
  • 当成功按键被点击时,Modal 调用 toggleModal
  • 单击删除按键时,Modal 会调用 toggleModal
  • 当 button 被点击时,button 调用 toggleModal

作者们的测量检验将浅渲染组件,然后检查每一样规格的干活。

单元测验应该攻下大家的测量检验套件的多方有以下几个原因:

JPG

出于jpg的滑坡情势为有损,而笔者辈后面有谈起到,图片所开支的流量已经侵吞了网络的半壁江山,因而,jpg自然就产生了web开拓中的宠儿。对于图片中,未有透明效果的,以及图片更为颜色丰硕的图形,大家多能够运用压缩五分一-十分七的jpg图像。那样能够确定保证使得图片越来越小,网页加载越来越快。可是供给当心的是jpg的每一次缩减,对图纸都以有损的。因而,对于一些有线条,或许文字的图形,jpg压缩之后,看起来并不完美,由此,在这种情形下,应该尽量幸免对jpg的利用

本文由亚洲必赢登录发布于亚洲必赢app,转载请注明出处:CSS3硬件加速也可能有坑,响应式设计的5个CSS实用

关键词:

上一篇:用CSS和SVG制作饼图,使用CSS3画出三个叮当猫

下一篇:没有了