CSS Introduction：
CSS能够使网页拥有更丰富的交互行为和视觉效果，能够更精准地传递信息。
没有CSS处理的Amazon网页：
经过CSS处理的Amazon网页：
css发展经过了3个阶段。
CSS1 解决网页排版布局和装饰问题，是第一个有“层叠”概念的语言。CSS2 表现和内容分离。CSS3时期规范模块化发展，网页的样式更为丰富、酷炫，网站的可维护性以及性能速度得到显著提高。
层叠的三大优先级：
- 最优先：样式表来源（重要程度：用户代理样式（浏览器默认样式）<用户样式表<作者样式表（developer）<作者样式表中的！important<用户样式表中的！important<用户代理样式表中的！important）
- 次级优先：选择器优先级
- 最次优先：源码位置。当同等选择器优先级情况中，最后声明的优先级为最前。
CSS代码写作建议： 1.选择器尽量少用id 2.尽量不要用！important 3.自己的样式加载在引用库样式的后面 //这三者可以结合之间的优先级概念来理解
继承（CSS中大部分具有继承特性的属性与文本相关） 继承方向如下图：
盒模型：浏览器根据视觉格式化模型，将所有元素表示为盒子模型，css通过盒模型做Layout. 盒模型不仅在浏览器网页格式中使用，也广泛适用在小程序等页面设计中。
在 CSS 中我们广泛地使用两种“盒子” —— 块级盒子 (block box) 和 内联盒子 (inline box)。这两种盒子会在页面流（page flow）和元素之间的关系方面表现出不同的行为：
一个被定义成块级的（block）盒子会表现出以下行为：
- 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
- 每个盒子都会换行
width和height属性可以发挥作用- 内边距（padding）, 外边距（margin）和 边框（border）会将其他元素从当前盒子周围“推开”
除非特殊指定，诸如标题 (<h1>等) 和段落 (<p>) 默认情况下都是块级的盒子。
display:block产生的效果会换行。
display：flex则不会。
布局包括： CSS3之前：常规流布局 浮动流布局 定位流布局 CSS3之后：弹性盒子布局(Flex) 网格布局(Grid)
内联：在计算中，内联扩展，或内联，是一个编译器优化替换一个函数调用的位置与被调用者的身体。 这种优化可以提高的时间和空间的使用率在运行时，在增加了最终方案的规模可能涉及的费用。
BFC布局：指一个独立的块级渲染区域,只有Block-level BOX参与,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关。 简单来说,BFC就是一个独立不干扰外界也不受外界干扰的盒子。 布局规则 内部的Box会在垂直方向,一个一个地布置。 Box垂直方向的距离由margin决定。
格式化上下文：在CSS中，元素定义的环境有两种，一种是块格式化上下文( Block formatting context )，另一种是行内格式化上下文( Inline formatting context ) 。 这两种上下文定义了在 CSS 中元素所处的环境，格式化则表明了在这个环境中，元素处于此环境中应当被初始化，即元素在此环境中应当如何布局等。
网格布局：Grid布局可以定义由行和列组成的二维布局，将元素放到网格中，元素可以只占用其中一个单元格，也可以占据多行多列。相比盒模型来说，分布更为自由。
