00-准备

前言

css 进阶的主要内容如下。

1、css 非布局样式

  • html 元素的分类和特性

  • css 选择器

  • css 常见属性（非布局样式）

2、css 布局相关

  • css 布局属性和组合解析

  • 常见布局方案

  • 三栏布局案例

3、动画和效果

属于 css 中最出彩的内容。

  • 多背景多投影特效

  • 3D特效编写实践

  • 过渡动画和关键帧动画实践

  • 动画细节和原理深入解析

4、框架集成和 css 工程化

  • 预处理器作用和原理

  • less/sass 代码实践

  • Bootstrap 原理和用法

  • css 工程化的的实践方式

  • js 框架中的 css 集成实践

常见问题

不会 css 的前端称之为伪前端。

Vue 中模拟Scoped CSS的方式

方案一：随机选择器。css modules。

方案二：随机属性。<div abcd>、div[adcd]{}

其他问题

  • html 元素的嵌套关系是怎么确定的？哪些嵌套不可以发生？

  • 比如说，为什么 div 可以放在 a 标签里面？

  • css 选择器的权重是如何计算的？写代码时要注意什么？

  • 浮动布局是怎么回事？有什么优缺点？国内用的多吗？

  • css 可否做逐帧动画吗？性能如何？

  • Bootstrap 怎么做响应式布局？

  • 如何解决 css 模块化过程中的选择器互相干扰的问题？

总结

单独看 css 属性并不难，难的是需要把这些思路和思想，想到它的应用场景。