mozilla中建议的css属性书写顺序

王朝学院·作者佚名  2009-04-28
窄屏简体版  字體: 小  |  中  |  大  |  超大  

最近看了好多关于reflow的问题,原来没有注意到过这个现象,最近开始慢慢的研究下,毕竟从前对于很多性能方面的细节没有注意到。关于reflow应该简单的说就是dom的渲染吧(通过CSS或者其他因素计算文档树中每个对象的大小、布局等),也许解释的片面点,但是先定义一个简单的概念,方便理解。

首先是看到了mozilla中建议的css属性书写顺序,文章是从资料看到的,这个书写顺序不但是因为项目的开发代码规范标准,也因为合理的书写顺序更符合了浏览器的渲染的顺序。

mozilla.org Base Styles

* maintained by fantasai

* (classes defined in the Markup Guide -http://mozilla.org/contribute/writing/markup)

*/

/* Suggested order:

//显示属性

* display

* list-style

* position

* float

* clear

//自身属性

* width

* height

* margin

* padding

* border

* background

//文本属性

* color

* font

* text-decoration

* text-align

* vertical-align

* white-space

* other text

* content

这篇《形象化的reflow》很真的是形象的指出了浏览器的渲染过程,从中你可以看到浏览器在加载的过程中并不是一步到位的把所有的dom一次的放置正确,而是在不断的计算后频繁的改变渲染结果,这其中包括了js、css等对dom表现的影响。

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航