css 特性
选择器
基础选择器
标签选择器
ID 选择器
类选择器
CSS 的优先级是什么？
!important > 内联样式(style="") > ID 选择器 > 类选择器 = 属性选择器 = 伪类 > 标签选择器 = 伪元素选择器。
层级选择器
- foo bar 后代选择器，元素的后代元素
- foo > bar 子代选择器，元素的子代元素
- foo + bar 相邻同胞选择器
- foo ~ bar 通用同胞选择器
- foo, bar 并集选择器
- foo.class 交集选择器
条件选择器
:lang 具体语言标记的元素
:dir() 指定编写方向的元素
:has 包括指定元素的元素
:is 指定条件的元素
:not 非指定条件的元素
:where 指定条件的元素
状态选择器
:active
:hover
:link
:visited
:focus
表单
:valid
:invalid
:checked switch
结构选择器
:root 文档的根元素
:empty 无子元素的元素
:nth-child(n) 元素中指定顺序索引的元素。odd/even
:nth-last-child(n) 倒序索引
:first-child 元素中为首的元素
:last-child 元素中为尾的元素
:only-child 仅有该元素的元素
属性选择器
attr\] 指定属性的元素 \[attr=val\] 属性等于指定值的元素 \[attr\*=val\] 包括指定元素的元素 \[attr\^=val\] 包括开头 \[attr$=val\] 包括结尾 #### 伪元素 ::before 在元素前加入 ::after 在元素后面加入 ::first-letter ::first-line ::backdrop 全屏模式的元素 （Document.fullscreen） ::placeholder ```html
helloluyiteather
luyi
```
### flex 布局
flex -- flexible box 弹性布局。
display: flex
#### 容器属性
* flex-direction 主轴的方向
* row -- default
* column
* flex-wrap 如果一个轴线排不下，如何换行
* nowrap -- default
* wrap
* wrap-reverse
* flex-flow 是以上两者的简写
* justify-content
* flex-start
* flex-end
* center
* space-between
* space-around
* space-evenly
* align-items
* flex-start
* flex-end
* center
* baseline 项目的第一行文字的基线对齐
* stretch 占满高度
#### 项目属性
* order
* 属性定义项目的排列顺序，数值越小，排列越靠前，默认为0.
* flex-grow
* 放大比例，剩余空间。默认为0；
* flex-shrink
* 缩小比例，剩余空间，默认为1；
* flex-basis
* 定义在分配多余空间之前，项目占据的空间。
* flex
* flex: 1 是什么意思
* 如果直接赋值数字，flex:1 -- flex: 1 1 0%
* 如果给 auto, flex: auto -- flex: 1 1 auto
* flex:none flex: 0 0 none
### 动画和变换
tranform, transition, animation
#### transfrom
变换，2d 变换、3d 变化
* transfrom
* flat
* preserve-3d
##### translate 平移
translate(x, y)
translate3d(x, y, z) -- translateZ(0)
##### scale 缩放
scale(x,y)
scale3d(x, y, z)
##### skew 扭曲
##### rotate 旋转
rotate()
rotate(x, y, z, a)
#### transition
##### transition-property
* all
* none
* string
##### transition-duration
持续时间
##### transition-timimg-function
##### transition-delay
#### animation
##### name
有一个动画的名称
##### duration
持续时间
##### timimg-function
##### delay
##### 播放次数