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)
- 背景(background)
- 其他(animation,transition,box-shadow,transform)
目的:减少浏览器reflow(回流),提升浏览器渲染dom的性能
原理:
浏览器的渲染流程为——
①解析html构建dom树,解析css构建css树:将html解析成树形的数据结构,将css解析成树形的数据结构
②构建render树:DOM树和CSS树合并之后形成的render树。
③布局render树:有了render树,浏览器已经知道那些网页中有哪些节点,各个节点的css定义和以及它们的从属关系,从而计算出每个节点在屏幕中的位置。
④绘制render树:按照计算出来的规则,通过显卡把内容画在屏幕上。
css样式解析到显示至浏览器屏幕上就发生在②③④步骤,可见浏览器并不是一获取到css样式就立马开始解析而是根据css样式的书写顺序将之按照dom树的结构分布render样式,完成第②步,然后开始遍历每个树结点的css样式进行解析,此时的css样式的遍历顺序完全是按照之前的书写顺序。在解析过程中,一旦浏览器发现某个元素的定位变化影响布局,则需要倒回去重新渲染
举例:
/**
当浏览器解析到position的时候发现该元素是绝对定位元素需要脱离文档流,
而之前却是按照普通元素进行解析的,
所以不得不重新渲染,解除该元素在文档中所占位置,
然而由于该元素的占位发生变化,其他元素也可能会受到它回流的影响而重新排位。
最终导致③步骤花费的时间太久而影响到④步骤的显示,影响了用户体验。
**/
width: 100px;
height: 100px;
background-color: red ;
position: absolute;
注意:
-
render树的结构不等同于DOM树的结构,一些设置display:none的节点不会被放在render树中,但会在dom树中。
-
有些情况,比如修改了元素的样式,浏览器并不会立刻reflow或repaint,而是把这些操作积攒一批,然后做一次reflow,这也叫做异步reflow。但在有些情况下,比如改变窗口,改变页面默认的字体等,对于这些情况,浏览器会马上进行reflow.
-
为了更好的用户体验,渲染引擎将会尽可能早的将内容呈现到屏幕上,并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容,同时,可能还在通过网络下载其余内容。
+++
CSS语法
-
css类命令一般为小写英文字母,多个单词用连词符(-)连接,不建议使用(_)来命名选择器
-
命名可以使用单词缩写,但必须确保是有效的缩写
-
命名规则须以内容优先,表现为辅。
-
主要的、重要的、特殊的、最外层的盒子使用 ID 属性命名,其他的都使用 class 属性命名。
-
所有的声明语句应当以分号结尾
-
去掉可以省略的,如小数点前面的0,16进制颜色代码
-
十六进制值应该全部小写,如#fff
-
避免为0值指定单位,如margin: 0px应写成margin: 0
-
更清晰的注释: /* Header */内容/* End Header*/
+++
常用CSS选择器名字
头部:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面布局宽度:wapper
左右中:right,left,center
登录条:loginbar
标记:logo 广告:banner
页面主题:main
自导航:subnav
菜单:menu
子菜单:submenu
页脚:footer
版权:copyright
标签:tags
文章列表:list
栏目标题:title
+++
##面向对象CSS(OOCSS)
将可复用的CSS代码抽取出,单独形成一个CSS类,形成组件CSS中,类似于面向对象的继承。