CSS样式代码写在<style>标签中
选择器的特异度（Specificity）
标签选择器
id选择器 #
伪类选择器 .
通配符选择器 *
选择器越特殊选择度越高
继承
某些属性会自动继承其父元素的计算值，除非显式指定一个值 显式继承inherit从父级开始继承初始值
- CSS中，每个属性都有一个初始值--- background-color的初始值为transparent（透明色）
--- margin-left的初始值为0
- 可以使用initial关键字显式重置为初始值
--- background-color：initial
CSS求值过程
- 筛选规则（filtering）：选择器匹配、属性有效、符合当前media等。
- 声明值（Declared Values）：一个元素的某属性可能有0到多个声明值。
- 优先级（cascading）：按照来源、!important、选择器特异性、书写顺序等选出优先级最高的一个属性值。
- 层叠值（Cascaded Value）：在层叠过程中，赢得优先级比赛的那个值。
- defaulting：当层叠值为空的时候，使用继承或初始值。
- 指定值（Specified Value）：经过cascading和defaulting之后，保证指定值一定不为空。
- resoloving：将一些相对值或者关键字化成绝对值。
- 计算值（Computed Value）：一般来说是，浏览器会在不进行实际布局的情况下，所能得到的最具体的值。
- formatting：将计算值进一步转换。
- 使用值（Used Value）：进行实际布局时使用的值，不会再有相对值或关键字。
- constraining：将小数像素值转为整数。
- 实际值：渲染时实际生效的值。
布局（Layout）
- 确定内容的大小和位置的算法
- 依据元素、容器、兄弟节点和内容等信息来计算
- 布局相关技术：常规流（行级、块级、表格布局、FlexBox、Grid布局）、浮动、绝对定位。
width
- 指定content box 宽度
- 取值为长度、百分数、auto
- auto由浏览器根据其他属性确定
- 百分数相对于容器的content box宽度
height
- 指定content box高度
- 取值为长度、百分数、auto
- auto取值由内容计算得来
- 百分数相对于容器的content box高度
- 容器有指定的高度时，百分数才生效
padding
- 指定元素四个方向的内边距
- 百分数相对于容器宽度
border
- 指定容器边框样式、粗细和颜色
- 三种属性：
border-width、border-style、border-color - 四个方向：
border-top、border-right、border-botton、border-left
margin
- 指定元素四个方向的外边距
- 取值可以是长度、百分数、auto
- 百分数相对于容器宽度
- 使用 margin:auto 水平居中
- 相对整个盒子：box-sizing:border-box
- 隐藏超出的部分overflow
CSS是对写出的html内容进行修饰，使其呈现出好看的构造。
