-
首先介绍CSS简要发展历史，CSS1解决网页布局和装饰，第一次提出“层叠”概念。CSS2将表现和内容分离，CSS2.1修正和扩展CSS2，CSS3在样式、网站可维护性、性能都有提高。
-
接着介绍CSS基础知识，包括布局、层叠上下文、CSS生态相关知识等。样式表是规则声明的集合，在集合中可能产生声明之间的冲突，层叠规则是为了解决冲突。
层叠三大规则包括样式表来源、选择器优先级和源码位置，优先程度依次递减。 样式表来源重要性按照浏览器默认、用户样式表和作者样式表的顺序依次递增，如果加了！important则顺序反过来。
一般样式来源来自作者样式表，这时候根据选择器优先级判断。
- 基础的选择器包括id、标签、类和通用选择器。组合器包括子组合器、相邻兄弟组合器、通用兄弟组合器。还有复合选择器、属性选择器、伪类选择器、伪元素选择器和逻辑选择器。
- 需要注意的是，内联样式优先级高于所有选择器，在选择器中，id>类=属性=伪类>类型=伪元素。
- 如果选择器优先级相同，则需要根据源码位置来判断。@important的样式根据@important的顺序，link和style标签的样式则根据文档中的顺序，简单来说，谁最后声明谁生效。以声明顺序为准，而不是引用顺序。
- 写css好的习惯是：少用id选择器、！important、自己的样式加载在引用库样式的后面。
CSS样式生效的方式除了主动声明以外，还有一种默认继承的方式。大部分具有继承特性的属性跟文本有关，还可以使用Inherit关键字显式指定一个属性值从其父元素继承。
-
介绍盒模型的概念，常见的属性以及由盒模型特性实现的一些展现形式，如border-bottom:red渲染一个红色三角形，padding-bottom实现固定比例，margin:auto实现水平居中等。
-
CSS3之前的常见布局和CSS3新增布局：flex（一维空间布局）,grid（二维空间布局）和multicol（文本、内容多列显示）。盒模型的显示分为外部显示和内部显示，详细介绍了块级格式化上下文和内联级格式化上下文。
-
体会: 需要重点掌握的是盒模型的应用，默认布局方式即块级格式化上下文和内联级格式化上下文、新增布局的特点。
