深入CSS
CSS（Cascading Style Sheets，层叠样式表）是为 web 内容添加样式的代码。
CSS 规则集
P(Selector){color(Property): red(Property value) ;}(declaration)
选择器：
HTML元素的名称位于规则及开始。要给不同元素添加样式，秩序更改选择器。
声明： 一个单独的规则，如color：red；用来指定添加样式元素的属。
样式元素主要有以下几类常见属性:
文字属性
- color - 设置文字颜色
- font-family - 设置文字字体
- font-size - 设置文字大小
- font-weight - 设置文字粗细(正常/粗体)
- font-style - 设置文字样式(正常/斜体)
- text-align - 设置文字对齐方式(左对齐/右对齐/居中)
- text-decoration - 设置文字修饰(无修饰/下划线/删除线)
边框属性
- border - 设置元素边框(宽度 样式 颜色)
- border-width - 设置边框宽度
- border-style - 设置边框样式(实线/虚线/点线)
- border-color - 设置边框颜色
背景属性
- background-color - 设置背景颜色
- background-image - 设置背景图片
盒模型属性
- width - 设置元素宽度
- height - 设置元素高度
- padding - 设置内边距
- margin - 设置外边距
- display - 设置元素显示类型(块状/内联)
其他属性
- opacity - 设置透明度
- cursor - 设置鼠标指针样式
- overflow - 设置内容溢出时的处理方式
注意其他重要的语法：
除了选择器部分，每个规则集都应该包含在成对的大括号里（{}）。
在每个声明里要用冒号（:）将属性与属性值分隔开。
在每个规则集里要用分号（;）将各个声明分隔开。
其他类型的选择器
| 选择器名称 | 选择的内容 | 示例 |
|---|---|---|
| 元素选择器（也称作标签选择器或类型选择器） | 所有指定类型的HTML元素 | P选择 |
| ID选择器 | 具有特定的ID元素。单一HTML页面中，每个ID值对应一个元素，一个元素只对应一个ID | #MY-id选择 或<a.id=”my-id”> |
| 类选择器 | 具有特定类的元素。单一页面中，一个类可以有多个实例 | .my-class选择 |
| 属性选择器 | 拥有特定属性的元素 | Img[src]选择 但不是 |
| 伪类选择器 | 特定状态下的特定元素（比如鼠标指针悬停于链接之上） | a:hover选择尽在鼠标指针悬停在链接上时的元素 |
选择器的特异度（Specificity）
| Id | （伪）类 | 标签 | |
|---|---|---|---|
| #nav.list li a:link | 1 | 2 | 2 |
| .hd ul.links a | 0 | 2 | 2 |
继承：
某些属性会自动继承其父元素的计算值，除非显式指定一个值（inherit）。
初始值：
CSS中，每个属性都有一个初始值，可以使用initial关键字显式重置为初始值
‘
布局是什么？
确定内容的大小和位置的算法
依据元素、容器、兄弟节点和内容等信息来计算
布局相关技术：
常规流：航机，块级，表格布局，FlexBox，Grid布局
浮动
绝对定位
