【青训营】 -- CSS在页面中使用CSS的三种方式 CSS是如何工作的首先加载HTML，然后解析HTML，并且异步的

在页面中使用CSS的三种方式

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

<!-- 嵌入 -->
<style>
li {margin: 0; list-style: none;}
</style>

<!-- 内联 -->
<p style="margin:lem 0">Expemple Content</p>

CSS是如何工作的

首先加载HTML，然后解析HTML，并且异步的加载CSS，然后解析的HTML创建DOM树，加载的CSS进行解析之后，添加样式到各个相应的DOM节点上，完成后，展示页面。

CSS如何工作.png

CSS选择器Selector

找出页面中的元素，以便给他们设置样式
使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置

<style>
/* 通配符选择器 */
* {
    ...
}
/* 标签选择器 */
h1 {
  color: orange;
}
/* id选择器 */
#logo {
    ...
}
/* 类选择器 */
.done {
  color: gray;
  text-decoration: line-through;
}
/* 属性选择器 */   /* <input value="zhao" disabled /> 存在disabled属性 */
[disabled] {
    background: #eee;
    color: #999;
  }
input[type="password"] {
    border-color: red;
    color: red;
  }
a[href^="#"] { /* herf属性以#开头的 */
    color: #f54767;
    background: 0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
    padding-left: 1.1em;
  }
 a[href$=".jpg"] { /* herf属性以.jpg结尾的 */
    color: deepskyblue;
    background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
    padding-left: 1.2em;
  }
</style>

伪类选择器：

不基于标签和数学定位元素
几种伪类
- 状态伪类
- 结构性伪类

<style>
/* 状态伪类 */
a:link {
  color: black;
}

a:visited {
  color: gray;
}

a:hover {
  color: orange;
}

a:active {
  color: red;
}

:focus {
  outline: 2px solid orange;
}

/* 结构性伪类 */
li:first-child {
  color: coral
}

li:last-child {
  border-bottom: none;
}
</style>

使用选择器时，可以组合使用

名称	语法	说明	示例
直接组合	AB	满足A同时满足B	`input:focus`
后代组合	A B	选中B，如果它是A的子孙	`nav a`
亲子组合	A>B	选中B，如果它是A的子元素	`section>p`
兄弟选择器	A~B	选中B，如果它在A后且和A同级	`h2~p`
相邻选择器	A+B	选中B，如果它紧跟在A后面	`h2+p`

字体

font-family使用建议

字体列表最后写上通用字体族
英文字体放在中文字体前面(因为一般中文字体包含了英文字体，而英文字体没包含中文字体)

font-size

关键字
- small、medium、large
长度
- px、em
百分数
- 相对于父元素字体大小

布局

布局相关技术分为常规流(行级、块级、表格布局、FlexBox、Grid布局)、浮动、绝对定位

盒子模型：

盒子模型.png

width

指定content box宽度
取值为长度、百分数、auto
auto 由浏览器根据它属性确定
百分数相对于容器的 content box 宽度

height

指定content box高度
取值为长度、百分数、auto
auto 取值由内容计算得来
百分数相对于容器的 content box 高度
容器有指定高度时，百分数才生效

width和height.png

块级 vs 行级

Block Level Box	Lnline Level Box
不和其他盒子并列摆放	和其它行级盒子一起放在一行或拆开成多行
适用所有的盒模型属性	盒模型中的width、height不适用

常规流 Normal Flow

根元素、浮动和决定定位的元素会脱离常规流
其他元素都在常规流之内(in-flow)
常规流中的盒子，在某种排版上下文中参与布局

行级排版上下文、块级排版上下文、Table排版上下文、Flex排版上下文、Grid排版上下文

行级排版上下文

inline Formatting Context(IFC)
只包含行级盒子的容器会创建一个IFC
IFC 内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align决定一行内盒子的水平对齐
- vertical-align决定一个盒子在行内的垂直对齐
- 避开浮动(float)元素