CSS基础

CSS选择器

基础选择器

1. 标签选择器
2. ID选择器
3. 类选择器
4. 统配选择器

CSS选择器的优先级是什么？
!important > 内联样式(style=“”) > ID 选择器 > 类选择器 = 属性选择器 = 伪类 > 标签选择器 = 伪元素选择器

层级选择器

1. 后代选择器：元素的后代元素，如foo bar
2. 子代选择器：元素的子代元素，如foo > bar
3. 相邻同胞选择器：如foo+bar
4. 通用同胞选择器：foo~bar
5. 并集选择器：foo, bar
6. 交集选择器：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

弹性布局

flex：flexible box 弹性布局。
display: flex

flex容器属性

1. flex-direction：主轴的方向。
   1. row：default
   2. column
2. flex-wrap：如果一个轴线排不下，如何换行。
   1. nowrap：default
   2. wrap
   3. wrap-reverse
3. flex-flow：以上两者的简写。
4. justify-content：
   1. flex-start
   2. flex-end
   3. center
   4. space-between
   5. space-around
   6. space-evenly
5. align-items：
   1. flex-start
   2. flex-end
   3. center
   4. baseline：项目的第一行文字的基线对齐。
   5. stretch：占满高度。

项目属性

1. order：属性定义项目的排列顺序，数值越小，排列越靠前，默认为0。
2. flex-grow：放大比例，剩余空间。默认为0。
3. flex-shrink：缩小比例，剩余空间，默认为1。
4. flex-basis：定义在分配多余空间之前，项目占据的空间。
5. flex：
   flex:1是什么意思？
   1. 如果直接赋值数字：flex:1 – flex: 1 1 0%
   2. 如果给auto：flex: auto – flex: 1 1 auto
   3. flex:none：flex: 0 0 none

动画与变换

transform

变换，2d 变换、3d 变化。
transform值：flat、preserve-3d

1. translate 平移：
   1. translate(x, y)
   2. translate3d(x, y, z) – translateZ(0)
2. scale 缩放：
   1. scale(x,y)
   2. scale3d(x, y, z)
3. skew：扭曲
4. rotate：旋转
   1. rotate()
   2. rotate(x, y, z, a)

transition

1. transition-property
   1. all
   2. none
   3. string
2. transition-duration：持续时间。
3. transition-timing-function
4. transition-delay

transition: none 3s;
1

animation

1. name：动画的名称
2. duration：持续时间
3. timing-function
4. delay
5. 播放次数

.ani {
	width:200px;
	height: 200px;
	position: relative;
	background-color: blue;
	animation:myani 3s linear infinite;
}
@keyframes myani {
	from {
		left: 0px;
	}
	to {
		left: 200px;
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17