结构伪类选择器

1.作用与优势

1. 根据元素在html中的结构关系查找元素
2. 减少html中类的依赖，有利于保持代码的整洁
3. 常用于查找父级选择器中的子元素

选择器：

1. E：first-child(),匹配父元素第一个子元素，且是E元素
2. E:last-child()，匹配父元素最后一个子元素，
3. E:nth-child()，匹配父元素中第n个元素
4. E:nth-last-child(),匹配父元素中倒数第n个元素
5. 可以设置n达到特殊功能，偶数：2n，奇数：2n+1，找到前五个:-n+5,找到从第五个往后:n+5
6. nth-of-type(n),只在父元素中的同类型元素(E)子元素范围中,匹配第n个

伪元素

一般页面中的非主体内容可以用伪元素

区别：

1. 元素：HTML设置的标签
2. 伪元素：由CSS模拟出的标签效果

种类：

::before 在父元素内容的最前添加一个伪元素

::after 在父元素内容的最后添加一个伪元素

注意点:

1. 必须设置content属性才能生效，content里面是他的内容
2. 伪元素默认是行内元素，如果要设置宽高需要转换显示方式

标准流

又称文档流，是指浏览器在渲染网页内容的时候默认采用的一套排版规则，规定了应该以何种方式排列元素

常见标准流排版规则：

1. 块级元素：从上往下，垂直布局，独占一行
2. 行内元素或者行内块元素：从左往右，水平布局，空间不够自动拆行

浮动

1.早期作用

用于图文环绕

2.现在的作用

完成网页布局，让垂直布局的盒子变成水平布局的效果。

浮动的代码

属性名：float

属性值:left,right

浮动的特点

1. 脱离标准流
2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
3. 浮动找浮动，下一个浮动会在上一个浮动元素左右浮动
4. 浮动元素会受到上面元素边界的影响
5. 浮动元素有特殊的显示效果
   • 一行可以显示多个
   • 可以设置宽和高

• 注意：浮动元素不能通过text-align：center或者margin：0 auto 居中