CSS样式表属性最佳书写顺序

浏览器的解析顺序
- 解析html构建dom树,解析css构建css树:将html解析成树形的数据结构,将css解析成树形的数据结构
- 构建render树:DOM树和CSS树合并之后形成的render树。
- 布局render树:有了render树,浏览器已经知道那些网页中有哪些节点,各个节点的css定义和以及它们的从属关系,从而计算出每个节点在屏幕中的位置。
- 绘制render树:按照计算出来的规则,通过显卡把内容画在屏幕上。

编写CSS的正确顺序
- 定位属性:position、display、float、left、top、right、bottom、overflow、clear、z-index
- 自身属性:width、height、padding、border、margin、background
- 文字样式:font-family、font-size、font-style、font-weight、font-varient color
- 文本属性:text-align、vertical-align、text-wrap、text-transform、text-indent、text-decoration、letter-spacing、word-spacing、white-space、text-overflow
- css3中新增属性:content、box-shadow、border-radius、transform……

THE END
分享
二维码
< <上一篇
下一篇>>