2024-3-13,14(CSS)

1.复合选择器

有两个或者多个基础选择器，通过不同的方式组合而成。

目的是更加准确高效的选择目标元素（标签）

分类：

后代选择器：选中某个元素的所有后代元素

写法：父选择器 子选择器 {CSS属性}，父子之间用空格隔开

子代选择器：选中某个元素的子代元素（最近的儿子）

选择器写法：父代选择器 > 子代选择器 {CSS属性}，父子之间用>隔开

并集选择器：选择多组标签设置相同的样式

写法：选择器1，选择器2，选择器3.......选择器n {CSS属性}，，选择器之间用，隔开

伪类选择器：伪类表示元素状态，可以选中元素的某个状态设置样式

鼠标悬停状态写法：选择器:hover{CSS属性}

2.CSS特性：继承性，层叠性，优先级

继承性：子级默认继承父级的文字控制属性。

层叠性：

相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性

不同的属性会叠加：不同的CSS属性都生效。

优先级：当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。

通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内选择器 < ！important

（选中标签的范围越大，优先级越低） 

3.结构伪类选择器

根据标签的结构关系来查找标签

nth-child括号里面可以写公式，来多选

4.伪元素选择器

创建虚拟元素（伪元素），用来摆放装饰性的内容。

其实就是在一个标签内部再放置一个标签。

5.盒子模型

作用：布局网页，摆放盒子和内容。

盒子模型的构成：

内容区域：width，height

内边距：padding

边框线：border

外边距：margin（盒子外面）

6.标准流：也叫文档流，指的是标签在页面中默认的排布规则，例如块元素默认独占一行，行内元素默认一行可以显示多个。 

7.flex布局：display:flex 属性可以把父容器变为弹性容器，容器中的子标签变为弹性盒子