CSS知识总结

选择器

选择器权重表

通配符	标签	类	伪类	id	行内	!important
0,0,0,0	0,0,0,1	0,0,1,0	0,0,1,0	0,1,0,0	1,0,0,0	+∞

• :nth-of-type(n)div:nth-of-type(n)和div :nth-of-type(n)是不一样的,第一个表示div父元素的第n个div子元素,第二个是表示div的所有第n个相同类型元素

• :nth-child(n)div:nth-child(n)和div :nth-child(n)也是不一样的,第一个表示div父元素的第n个子元素如果是是div那么就选它,第二个表示div的第n个子元素

• :not(selector)选择所有元素,除了selector选中的元素

浏览器渲染原理

渲染顺序

1. 根据html得到DOM
2. 根据css得到CSSOM
3. 将两者合并为渲染树(rendertree)
4. 根据渲染树展开布局(Layout)
5. 根据渲染树绘制(draw)
6. 将图层按照层叠关系合并(compose)

更新样式

更少的渲染环节意味着更佳的性能.

• 全走: 修改渲染树>>布局>>绘制>>合成
• 跳过布局: 修改渲染树>>绘制>>合成
• 跳过绘制: 修改渲染树>>合成

@import

导入页面之外的样式表,可以避免为不支持的媒体类型检索资源

语法:必须放到style标签内或CSS文件开头,要在CSS文件最前,最后加分号

CSS 动画的两种做法（transition和animation）

transition

只有一次动画效果,或者和hover组合有了两次动画,成为以下的简写属性:

• 样式名(transition-property)
• 过渡时间(transition-duration)
• 加速度曲线(transition-timing-function)
• 延迟(transition-delay

transform

transform旋转，缩放，倾斜或平移给定元素,这些函数值分别为rotate(),scale(),translate(),skew(3)等

animation

animation可以实现多次动画,成为以下的简写属性:

• animation-name
• animation-duration
• animation-delay
• animation-iteration-count
• animation-direction
• animation-timing-function
• animation-fill-mod

@keyframes

声明关键帧采用from和to,或者采用百分比

@keyframes example {
  form {}
  to {}
}
@keyframes example {
  0%   {}
  50%  {}
  100% {}
}