|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
属性值就追加上去,重复的属性值就以最后一个为准。这里要注意的是,样式的先后不是根据页面上应用的名字顺序,而是样式表里的样式顺序。
破洛洛文章简介:mozilla的工程师dbaron宣布过一篇演讲,提到reflow的成绩。观点不难了解.
对实际没乐趣的,能够只看白色标注的结论
mozilla的工程师dbaron宣布过一篇演讲,提到reflow的成绩。观点不难了解
mozilla系列扫瞄器构建网页的历程:
- 1、读取HTML文档,构建网页文档树——就是从body入手下手到停止,把每一个table大概div纪录上去
- 2、reflow——经由过程CSS大概其他要素盘算文档树中每一个工具的巨细、结构等
- 3、把盘算了局显现在屏幕上
复杂言之扫瞄器的运算开支年夜多在reflow这一步,就是猎取工具的结构、排版等款式,假如款式的界说有误则扫瞄器会从头运算,以后再展示在扫瞄器上。
别的经由过程JS来覆写工具的款式是对照典范的一种烧毁原款式偏重建的历程,这类烧毁和重修,城市增添扫瞄器的开支。个中CSS方面,经常使用的JS切换display:none和display:block是个最好的例子
而HTML文档中,对照典范的是图片的宽高不决义,扫瞄器会自行盘算,以是良多网页优化的文章都列进了这条,便可能的话,就把图片的宽度高度写进HTML文档里。
从衬着历程下去讲,mozilla有过CSS的誊写倡议:
1.显现款式display/position/float/clear2.本身款式width/height/margin/padding/border/background3.内容款式line-height/text-align/font系列(font-size/font-weight)/color/text-decoration/vitical-align推测这应当和mozilla系列扫瞄器自己衬着网页的优先级按次符合。
我的誊写按次:
select{clear:both;display:block;float:left;margin:100px;padding:100px;width:100px;height:100px;line-height:100px;text-align:center;color:#000;font-size:12px;font-weight:400;background:#FFF;border:1pxsolid#F00;)
大抵切合倡议划定规矩,同时由于誊写款式时修正频次最高的就是背景和边框,以是放在最表面,取了划定规矩和事情效力的均衡点。
使页面的字体变得更漂亮,更容易编排,使页面真正赏心悦目。 |
|