CSS真的没那么简单 | 青训营笔记1、CSS基础 2、CSS的求值过程 3、浏览器第一次渲染一个网页 4、CSS布局

这是我参与「第四届青训营」笔记创作活动的第1天

写在前面

第一次写这么长的文章，真的谢了。
写了CSS的基础部分，也提炼了CSS中很重要的地方，还有就是一点点小原理
CSS真的很难学：“学习它只需要五分钟，掌握它需要很久时间”。
写这篇文章的目的，也是让自己稍微系统的学习了一下CSS。（CSS的细节、特性太多了）

一、CSS基础【Basics】

1、CSS是什么？

层叠样式表（英语：Cascading Style Sheets，缩写：CSS；又称串样式列表、级联样式表、串接样式表、阶层式样式表）是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。

简单来说就是美化页面的一门计算机语言【不是编程语言、也不是标记语言】
现在的CSS除了用来添加一些各种各样的样式，还可以用来做一些动画，页面布局等等，花样非常多

2、CSS的编写

单独的CSS规则编写规则。

例如


/* 单独的CSS规则，都是以这样的键值对的形式 */
	color: blue;
	width: 200px;

3、CSS样式与HTML元素结合

CSS提供了三种方法，可以将CSS样式与HTML页面结合起来。
- 内联样式：存在与HTML元素的style属性中
- 嵌入样式表：将CSS放在HTML文件的 <head> 元素里的 <style>元素之中
- 外链样式表：将CSS编写在一个独立的 .css文件中，并且通过<link>元素引入到HTML中


<!-- 内联样式 -->
<div style="width: 200px; height: 200px;">Hello World！！！</div>

/* 嵌入样式表 */
<style>
.title {
        font-size: 20px;
        color: red;
      }
</style>

<!-- 外链样式表 -->
<link rel="stylesheet" href="./css/style.css">

三种形式都需要会使用，都有一定的使用场景。
内联样式：在Vue的模板中、React的JSX中用于动态添加某些样式、UI组件库添加自定义的样式等等
后两者可以说是将样式和内容分离开来，方便维护。起码关注点分离了。

4、CSS是如何工作的

先来看一张图。

根据页面生成一颗DOM树。
将解析后HTML中CSS三种使用方式中声明的CSS样式加载并且解析。
将解析出来的CSS附加到DOM树上，变成一颗渲染树。
通过渲染树展示页面
下面是一个页面简单的渲染过程【这里简单说一下，下面还有更详细的步骤】。

5、CSS选择器

选择器是什么？

我们在写代码的时候，经常需要给特定的网页元素设置样式。那么我们就可以按照一定的规则，选择出符号条件的选择器，为之添加CSS样式。

选择器的大致归类


/* 常见的选择器 */

/* 1、通用选择器 */
* {}

/* 2、标签选择器 */
div {}

/* 3、类选择器 */
.box {}

/* 4、ID选择器 */
#title {}

/* 5、属性选择器 */
[disabled] {}
[title=h2] {}

/* 组合 */
/* 6、后代选择器 */
.box span {} /* 后代就行 */
.box > span {} /* 直接子代 */

/* 7、兄弟选择器 */
.box + span {} /* 相邻兄弟 */
.box ~ span {} /* 普遍兄弟 */

/* 选择器组 */
/* 8、交集选择器 */
span.box {} /* 都要满足 */

/* 9、并集选择器 */
body, p, h2, .title {} /* 满足一个即可 */

/* 伪类 */
a:hover {}
a:link {}
input:focus {}

标签选择器
- 使用标签的名字。
- 通用选择器
  - 使用星号* 开头，所有的元素都会被选中
  - 一般用来给所有元素添加一些通用的设置
  - 比如内外边距、重置一些内容。
  - 效率比较低，谨慎使用。
类选择器
- 元素 class属性。通过 点 . 开头，比较常用。
- 在一个文档中，属性值可以重复。
- 为一些元素添加一样的样式。
ID选择器
- 元素的 id 属性。通过 # 开头，比较常用。
- 在一个文档中，属性值必须是唯一的。
属性选择器
- 拥有某一个属性 [attr]
- 属性等于某个值 [attr = value]
伪类
- 伪类是选择器的一种【多了一个点，假装是一个类选择器】
- 用于选择处于特定状态的元素; 下面是常用的一些伪类。
- a:link 未访问的链接
- a:visited 已访问的链接
- a:hover 鼠标挪动到链接上【最常用】
- a:active 激活的链接【鼠标在链接上长按住未松开】
组合

伪元素
- ::first-line【第一行字符】
- ::first-letter【第一个字符】
- ::before【在元素前面加上一些东西】
- ::after【在元素后面加上一些东西】

二、常用属性【Attribute】

1、常用样式的属性

	font-size: 20px;
        color: red;
        background-color: greenyellow;
        height: 40px;
        width: 100px;

font-size：文字大小
color：文字颜色（前景色）
background-color：背景色
width：宽度
height：高度

2、颜色相关

颜色的表示方法

颜色关键字：存在的关键字
RGB模型：以“#”加十六进制或者 rgb() 和 rgba() 函数表达式的形式。如：#6e9434、rgb(25, 50, 100)通过三原色比例的混合，可以组成其他的颜色。

HSL模型：以 hsl() 和 hsla() 函数表达式的形式。如：hsl(18, 91%, 42%)通过调节色彩的色相、饱和度、亮度，可以组成其他颜色

3、文本相关

（1）text-decoration【常用】

用于设置文字的装饰线
常见取值
- none：无装饰线（也可以用于去掉浏览器给 a 元素默认添加的下划线）
- underline：下划线
- overline：上划线
- line-through：中划线（删除线）

（2）text-align【重要】

将后代元素中，定义的行内级元素，相对于他自己的父容器居中对齐。
例如【文字、图片、输入框】
常见取值
- left：左对齐
- right：右对齐
- center：正中间显示
- justify：两端对齐

（3）text-indent

用于设置首行缩进（2em刚好是两个文字）

4、字体相关

font-size
- 设置字体大小
- 属性值 + 单位（px、em、% ... ）
- 1em是 100%、2em是200%【会继承下来，相对于父级元素说的】
font-family
- 设置字体的类型
- 可以设置一个、或者多个（某些浏览器不支持一些字体）
- 通常情况，一个网页仅会设置一次
font-weight
- 设置字体的粗细
- 常用的值
  - [ 100 , 900 ]
  - normal ：等于 400【普通情况】
  - bold：等于 700 【加粗情况】
font-style
- 用于设置文字显示方式，[常规、斜体 ]
- 常用的值
  - normal：常规显示
  - italic：斜体（采用字体本身有斜体）
  - oblique：倾斜（暴力倾斜）
line-height
- 用于设置文本的行高
- 常用与文本行高居中对齐【行高 = 文本所占高度】
font缩写属性
- 方便书写的语法糖。
- 可以在文档查看书写顺序。

	.box {
      font-size: 30px;
      font-family: Arial;
      font-weight: 700;
      font-style: italic;
      line-height: 30px;
    }
    /* 等同于 */
    .box {
      font: italic 700 30px/30px Arial;
    }

三、深入CSS

1、优先级

（1）CSS的层叠性

对于同一个元素来说，相同一个属性，我们可以通过不同的选择器给它进行多次设置。
那么属性会被层叠掉，但是最终只有一个会生效。
比如下面的代码。你觉得 Hello World！！！会是什么样的颜色呢？

  <style>
    div { color: black; }
    #title { color: red; }
    .box { color: blue; }
  </style>

  <div id="title" class="box">Hello World！！！</div>

（2）特异度【权重】

上面说了，同一元素多次设置相同属性时，会被一层一层覆盖掉。最后只留下一个值
谁会是最终留下来，就得看他的特殊程度（权重值）
大体上有两条规则
- 选择器越特殊、权重越大，那么它的优先级就越高。它就是最终留下来的。
- 选择器特异度、权重值相同时，在后面设置的会生效。
特异度的排序


// 特异度排序  	!important > 内联样式 > ID选择器 > (类|属性)选择器/伪类 > (伪)元素选择器 > 通配选择器
// 假设的权重值 	 10000		  1000       100          10                  1           0

（3）优先级的计算

如果是组合选择器。那么就需要计算他们的优先级，也就是看看他们谁更特殊，谁的话语权更大，谁的权重更高。
权重值是可以累加的。

(1)	.box li div
         10 + 1 + 1 = 12

(2)     #title
        100 

(3)     .title span .item::before
          10  + 1  +  1  = 12

2、CSS的继承（Inherited）

如果一个属性具备继承性，那么在该元素上设置后，它的后代都可以使用这个属性
如果后代元素自己有设置该属性，那么优先使用自己的。（不论优先级有多高）
继承后的属性的值，是计算值，而不是设置值

常见的可继承的属性
- 一般情况下，和文本本身相关的属性。可以继承
不可继承的一些属性
- 不需要去记，常用的可以继承的属性，用多了就知道了。实在忘记了，查看文档就行了。或者用浏览器的开发者工具
显式继承
- 对于某些不可继承的属性，后代元素强制要使用它
- 这时候就可以通过inherit关键字，将其属性强制继承过来

4、CSS属性的计算【难点】

（1）CSS的求值过程

（2）其中涉及到的值

声明值（设置值）：coder 手动声明设置的值。
层叠值：若一元素的同一属性在多个地方被赋值，则根据特异度覆盖后最终的值。
默认值：若有些属性没有值，那么去寻找可继承的值。否则就加上默认值。保证属性值不为空。
计算值：在resolving期间就能算出来的值。是在还没有布局时，就能算出来的一些值。并不一定全是绝对值。
指定值：将前面的值未能转换的值（如：某些 %），全部转成绝对的值，不会再有相对值、关键字等等，但可能会含有小数。
使用值（绝对值）：经过formating转换后的值，要用于实际布局了，小数也在化成整数了。

（3）浏览器第一次渲染一个HTML文档的过程【补充】

感兴趣的可以看看后面推荐的一篇文章。
我这里就画了个流程图，加上面说到的 CSS的计算过程总结了一下。
网上很火的一张图

自己总结补充的图

四、CSS布局相关【重要】

1、盒模型【重要】

（1）宽度（width）高度（height）

其实就是在对盒子里的内容做调整的过程
对于行内级级非替换元素来说，设置宽度是无效的。
另外还可以设置最小最大宽度，用于做移动端适配。
- min-width/max-width
- min-height/max-height

（2）内边距（padding）

用于设置盒子的内边距，通常用于设置边框和内容之间的间距（盒子本身）；
上下左右都可以设置内边距
可以将四个方向的值缩写为一个padding
- 书写顺序按顺时针方向。
- 省略的值，用对立面的值代替。

（3）外边距（margin）

用于设置盒子的外边距，通常用于设置元素和元素之间的间距（盒子之间）。
上下左右都可以设置内边距
可以将四个方向的值缩写为一个magin
- 书写顺序按顺时针方向。
- 省略的值，用对立面的值代替。
margin之间的传递

margin-top的传递：如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值回传递给父元素。
margin-bottom的传递：如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是 auto，那么这个块级元素的margin-bottom值回传递给父元素。

如何解决 margin传递的问题


    .parent-box {
      width: 200px;
      height: 200px;
      background-color: #944d4d;
      /* 1、换解决方案 */
      padding-top: 40px;
      box-sizing: border-box;
      /* 2、设置边框 */
      border: 1px solid transparent;
      /* 3、触发BFC */
      overflow: auto;
    }
    .son-box {
      width: 100px;
      height: 100px;
      background-color: #86d684;
      /* 会将此值，传递给父元素 */
      margin-top: 40px;
    }

其实就是让他不满足上面的传递条件。
换一种实现方案：给父元素设置padding-top\padding-bottom，但是不想让他撑大盒子，可以将其设置为border-box
给父元素设置边框
触发外层盒子的BFC：可将overflow: auto;

margin之间的折叠

折叠：垂直方向上相邻的2个margin，有可能会合并为一个margin
水平方向不会被折叠
折叠后的计算值：取较大的值
解决折叠办法：设置一个就行了
用margin将块级盒子水平居中对齐
- margin-left / margin-right初始值是 0；
- 在没有给盒子设置宽度的时候。就按初始值设置
- 如果盒子设置宽度后，那就优先按宽度来设置。而margin-left: 0; margin-right: 父元素总宽 - 该元素总宽;
- 所以这时候，我们要告诉浏览器，你现在，margin的左右，都用auto，让浏览器来分配margin-left / margin-right。
- 然后水平就会居中对齐了
- magin: 0 auto;

（4）内边距 vs 外边距

其实这两个都是相对而言的，有些都不区分这两个。
用什么都可以实现相同的功能，可能都会有些问题。
两个建议
- 设置兄弟元素之间的间距：margin
- 设置父子元素之间的间距：padding

（5）边框（border）

用于设置盒子的边框（盒子本身）
可以设置边框的
- 宽度 / 样式 / 颜色
同内外边距一样，也有四个方向的值
可简写为一个值 border
可以通过border-radius来设置圆角

是对border-box而言的。【内容 + padding + border】
值可以为：数值 / 百分比
如果一个盒子是正方形，值 >= 50% 时，正方形盒子就变成了一个圆形盒子

2、元素类型

（1）块级元素【block level】

独占父元素的一行
某些元素非常重要，可以独占一行突出他。
某些元素不想和别的元素呆在一起，也会独占一行
常见的块级元素
- h元素 / p元素 / div元素

（2）行内集元素【inline level】

多个行内集元素可以在父元素的同一行中显示
某些元素不那么重要，和其他元素放在同一行显示也无关系，没必要独占一行。
某些元素是属于对内容的一个细节的特殊描述，属于该内容，也没必要独占一行。
常见的行内集元素
- span元素 / a 元素 / strong 元素 / i 元素
还可以细分为行内替换元素
- 用其他内容替换掉这个在一行显示的行内元素
- 如：img元素 / input元素 / video元素
行内非替换元素的注意事项

设置width/height/margin-top/margin-bottom不会生效
设置padding-top / padding-bottom / 上下的 border时会生效，但是不会占据空间

（3）相互转换


	// 块级元素 -> 行内级元素
    div {
      display: inline;
    }

	// 行内级元素 -> 块级元素
    span {
      display: block;
    }

CSS中有个display属性，能修改元素的显示类型常见有四个值
- block
  - 让元素显示为块级元素
  - 可以设置宽高和高度
- inline
  - 让元素显示为行内级元素
  - 行内非替换元素不可以设置宽高
- inline-block
  - 让元素同时具备行内级、块级元素的特征
  - 可以和其他元素在同一行显示
  - 可以设置宽度和高度
- none
  - 隐藏元素，并且不会生成在DOM树里。和不存在一样

（4）元素的隐藏方法【补充】

方法一：display 设置为 none【display: none;】
- 元素不显示出来，并且也不占据位置，不占据任何空间，和不存在一样
方法二：visivility 设置为 hidden【visibility: hidden;】
- 元素不显示出来，但是会占据元素应该占据的空间。
- 默认值为visible
方法三：rgba设置颜色，将不透明度设置为 0【rgba(255, 0, 0, 0)、#ff000000】
- 只是设置当前的 color/background 的颜色，不会影响其他元素
方法四：将opacity设置为 0 【opacity: 0;】
- 设置当前元素的透明度，会影响所有的子元素

3、布局相关技术

常规流、文档流
浮动
定位
但是我们在学习定位之前，先来了解一下盒模型、和元素类型

4、布局（Layout）

（1）标准流（Normal Flow）

默认情况下，元素都是按照标准流进行排布的

①排布规则

从左到右、从上到下按顺序摆放在网页中
默认情况下，兄弟元素相互之间不存在层叠现象
在标准流中，可以使用margin/padding对元素做一些简单的定位

②弊端

标准流布局，比较明显的缺点
- 设置一个元素的margin或者padding，通常会有一些副作用，会影响到其他元素
- 不便于实现元素的层叠的效果

（2）定位（Position）【重要】

①认识定位

定位允许我们自己从正常的标准流布局中取出元素，使得这些元素有不同的行为，如：
- 放在另一个元素上面
- 始终保持在浏览器视窗内的某一位置

②排版规则

static（默认值）
- 元素按照标准流布局
- 不可以left、right、top、bottom进行定位
relative
- 元素按照标准流布局
- 可以通过left、right、top、bottom进行定位
- 相对定位参照对象，是自己原来的位置
- 使用场景
  - 在不影响其他元素的前提下，对当前元素进行微调
- 示例

absolute
- 元素脱离标准流（脱标）
- 可以通过left、right、top、bottom进行定位
- 绝对定位参照对象，是最临近的祖先定位元素
  - 定位元素：position值不为static的元素
- 示例1【这里也就是所说的子绝父相】

示例2

如果找不到这样的祖先元素，参照对象是视口。
- 这种情况下，和 fixed 基本上一样。
示例3

fixed
- 元素脱离标准流（脱标）
- 可以通过left、right、top、bottom进行定位
- 固定定位参照对象，是视口
  - 视口（viewport）：文档的可视区域
sticky
- 粘性定位可以看做是相对定位和固定定位的结合体
- 一开始定位元素像相对定位一样，直到它滚动到某个阈值，就会变成固定定位
- 粘性定位是相对于最临近的滚动祖先包含视口

③定位元素的特点

可以随意设置宽高
宽度默认由内容决定
不再受标准流的约束
- 不再严格按照从上到下、从左到右排布
- 不再严格区分是什么盒子类型（块级、行内级），很多类型的特性都会失效
不再给父元素汇报宽高数据【有高度塌陷问题】
脱标元素内部默认还是按照标准流布局
设置z-index时有效
- z-index属性用来设置定位元素的层叠顺序
- 取值可以是正整数、负整数、0

（3）Flex 布局【重要】

①认识flex布局

FlexBox是一种弹性盒子：是一种按行或者按列布局的一维布局方法
- 元素可以膨胀以填充额外的空间，收缩以适应更小的空间
Flex布局时目前web开发中使用最多的布局方案：
- 也叫做弹性布局
flex布局的出现，CSS布局中就出现了一种专门用于一维布局的方案
原先的布局存在的一些痛点
- 在父内容里面垂直居中一个块内容
- 使容器的所有子项等分可用宽度/高度

②Flex布局的重要概念

开启了flex布局的元素叫做：flex container
flex container 里面的直接子元素叫做 flex item
当盒子变成 flex item时，具备以下特点：
- 将受flex container 属性的设置进行控制和布局
- flex-item不再严格区分块级元素和行内级元素
- 默认情况下是包裹内容的，但是可以设置宽度和高度
设置 display 属性为 flex / inline-flex可以变成 flex container
- flex：flex container是块级盒子
- inline-flex：flex container是行内级盒子
父盒子区分盒子类型，子元素不区分盒子类型
示例

③Flex的布局模型

网络上的一张图

主轴（main axis）
- flex item 默认都是沿着主轴，从 main start 开始往 main end方向排布
- 修改主轴的方向：flex-direction，调整 start 和 end 的位置
交叉轴（cross axis）
- 交叉轴永远垂直于主轴。

④Flex相关属性

设置在flex container	设置在flex item
flex-flow	flex-grow
flex-wrap	flex-basis
flex-direction	flex-shrink
justify-content	order
align-items	align-self
align-content	flex

设置在container上的属性

flex-direction

修改主轴的方向，调整start和end的位置
取值
- row（默认）：从左到右
- row-reverse：从右到左
- column：从上到下
- column-reverse：从下到上

flex-wrap

修改 flex container 是单行还是多行，可以修改交叉轴的方向
取值
- nowrap（默认）：单行
- wrap：多行
- wrap-revers：多行，（比wrap，corss start 与 cross end 相反）

flex-flow

是flex-direction 、 flex-wrap的简写属性
- 顺序任意，而且都可以省略

justify-content【常用】

决定了flex items 在主轴上的对齐方式
取值
- flex-start（默认）：与main start对齐
- flex-end：与main end对齐
- center：居中对齐
- space-between：flex items之间的距离相等，并且与main start、main end两端对齐
- space-around：flex items之间的距离相等，并且与main satrt、main end之间的距离是flex items 之间距离的一半
- space-evenly：flex items之间的距离相等，并且main start、main end之间的距离等于flexitems之间的距离

align-item

flex items 在交叉轴上的对齐方式
取值
- normal（默认值）：在弹性布局中，效果和stretch一样
- stretch：当 flex items 在 cross axis 方向的 size 为 auto 时，会自动拉伸至填充 flex container
- flex-start：与 cross start 对齐
- flex-end：与 cross end 对齐
- center：居中对齐
- baseline：与基准线对齐

align-content

多行 flex items 在交叉轴上的对齐方式，用法与justify-content类型
取值
- stretch（默认值）：与 align-items 的 stretch 类似
- flex-start：与cross start对齐
- flex-end：与crossend对齐
- center：居中对齐
- space-between：flex items之间的距离相等，并且与cross start、crossend两端对齐
- space-around：flex items之间的距离相等，并且与cross satrt、cross end之间的距离是flex items 之间距离的一半
- space-evenly：flex items之间的距离相等，并且cross start、cross end之间的距离等于flexitems之间的距离

设置在item上面的属性【不常设置】

order

设置flex items的排布顺序
取值
- 默认值是 0，按HTML的书写顺序。
- 可以设置任意整数（正整数、负整数、0），值越小就越排在前面

align-self

单独设置某一个item，在container里面的对齐方式
取值
- auto（默认值）：遵从 flex container 的 align-items 设置
- stretch、flex-start、flex-end、center、baseline，效果跟 align-items 一致

flex-grow

flex items 如何拉伸、扩展
取值
- 可以设置任意非负数，默认值是 0
- 当 flex container 在 main axis 方向上有剩余 size 时，flex-grow 属性才会有效
flex items 扩展后的最终 size 不能超过 max-width\max-height

flex-shrink

flex items 如何收缩(缩小)
- 可以设置任意非负数字（正小数、正整数、0），默认值是 1
- 当 flex items 在 main axis 方向上超过了 flex container 的 size flex-shrink 属性才会有效
- flex items 收缩后的最终 size 不能小于 min-width\min-height

（4）Grid布局

①为什么还要有Grid布局？

我们可以看到 Flex 已经是一个非常强大的能够实现很多布局了。那么就有了 flex 之后，我们为什么还又引了一个 Grid 布局这样的一概念。
就是因为很多时候我们发现在页面上的一个布局，它不仅仅是一个一条线的，就是流式的从左到右从上到下的布局，有时候它是一个二维的布局方式。

可以理解为， Flex 它是一种单一方向的布局模式。然后 Grid 它是一个二维的。
但是其实从概念上、或者用法上，Grid和 Flex 有一些相似的一些地方。

②Grid排版上下文

通过 display: grid;，生成一个 grid 的一个排版上下文。让一个元素变成一个块级的 grid 容器
然后我们通过 grid-template这个属性。其实它是一系列的一些属性，把这个容器划分成一个二维的网格
然后我们再去设置，他的行数和列数。将他的子元素放在划分的格子里边
在划格子的时候，可以去设置每一个各种占多少行或者多少列

（5）浮动（Float）

①认识浮动

float属性可以指定一个元素应沿容器的左侧或者右侧放置，允许文本和内联元素环绕它
float属性最初只是想用在一段文本内浮动图形，实现图文混排的效果
但是一开始左右布局不好做，所以，float在一段时间内被 “滥用” 于多列布局
随着计算的发展，float又在慢慢的退出布局的舞台，回归本心
常用值
- none：不浮动、默认值
- left：向左浮动
- right：向右浮动

②排布规则

浮动会让元素脱离标准流（脱标）
- 朝着向左或者向右方向移动，直到自己的边界紧贴着包含块，或者其他浮动元素的边界为止
- 定位元素会层叠在浮动元素上面
元素向左（右）浮动，边界不能超出包含块的左（右）边界
浮动元素之间不能层叠
- 如果一个元素浮动后，后浮动的元素会紧贴在前一个浮动元素【左浮找左浮，右浮找右浮】
- 如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，知道有充足的空间为止
浮动元素不能与行内级元素层叠，行内级元素将会被浮动元素挤到后面去。

③浮动的问题

父元素高度塌陷问题
- 由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度
- 解决办法：清除浮动

五、写在后面

本文引用：
- 经典的浏览器工作原理
写文章的启发
- 8年了，开始写点东西了
- 自己前段时间也有计划，多写文章输出输出。
- 慢慢锻炼自己的能力

CSS真的没那么简单 | 青训营笔记

写在前面

一、CSS基础【Basics】

1、CSS是什么？

2、CSS的编写

3、CSS样式与HTML元素结合

4、CSS是如何工作的

5、CSS选择器

二、常用属性【Attribute】

1、常用样式的属性

2、颜色相关

3、文本相关

（1）text-decoration【常用】

（2）text-align【重要】

（3）text-indent

4、字体相关

三、深入CSS

1、优先级

（1）CSS的层叠性

（2）特异度【权重】

（3）优先级的计算

2、CSS的继承（Inherited）

4、CSS属性的计算【难点】

（1）CSS的求值过程

（2）其中涉及到的 值

（3）浏览器第一次渲染一个HTML文档的过程【补充】

四、CSS布局相关【重要】

1、盒模型【重要】

（1）宽度（width）高度（height）

（2）内边距（padding）

（3）外边距（margin）

（4）内边距 vs 外边距

（5）边框（border）

2、元素类型

（1）块级元素 【block level】

（2）行内集元素【inline level】

（3）相互转换

（4）元素的隐藏方法【补充】

3、布局相关技术

4、布局（Layout）

（1）标准流（Normal Flow）

①排布规则

②弊端

（2）定位（Position）【重要】

①认识定位

②排版规则

③定位元素的特点

（3）Flex 布局【重要】

①认识flex布局

②Flex布局的重要概念

③Flex的布局模型

④Flex相关属性

设置在container上的属性

设置在item上面的属性【不常设置】

（4）Grid布局

①为什么还要有Grid布局？

②Grid排版上下文

（5）浮动（Float）

①认识浮动

②排布规则

③浮动的问题

五、写在后面

（2）其中涉及到的值

（1）块级元素【block level】