一、结构伪类选择器

目标：能够使用结构伪类选择器在HTML中定位元素

1. 作用与优势

• 作用：根据元素在HTML中的结构关系查找元素
• 优势：减少对HTML中类的依赖，有利于保持代码整洁
• 场景：常用于查找某父级选择器中的子元素

2. 选择器

• n的注意点：

  1）n为：0、1、2、3、4、…

  2）通过n可以组成常见公式

  功能	公式
  偶数	2n、even
  奇数	2n+1、2n-1、odd
  找到前5个	-n+5
  找到从第5个往后	n+5

二、伪元素

目标：能够使用伪元素在网页中创建内容

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

• 区别：

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

• 种类：

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

• 注意点：

  1. 必须设置content属性才能生效
  2. 伪元素默认是行内元素

  
  
  
  
  爱
  
  
  

三、标准流（标签默认的排列方式）

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

• 常见标准流排版规则：

  • 1.块级元素：从上往下，垂直布局，独占一行

  • 2.行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行

四、浮动

1. 作用

• 早期：图文环绕

• 现在：网页布局

2. 特点

• 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置

  • 相当于从地面飘到了空中

• 浮动元素比标准流高半个级别，可以覆盖标准流中的元素

• 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

• 浮动元素有特殊的显示效果

  • 一行可以显示多个

  • 可以设置宽高

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

3. 综合案例-导航

新闻
新闻
新闻
新闻
新闻
新闻
新闻
新闻

五、清除浮动

1. 清除浮动的介绍

• 含义：清除浮动带来的影响

  • 影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素

• 原因：子元素浮动后脱标—不占位置

• 目的：需要父元素有高度，从而不影响其他网页元素的布局

2. 清除浮动的方法

1)直接设置父元素高度

• 优点：简单粗暴，方便

• 缺点：有些布局中不能固定父元素高度，如：新闻列表，京东推荐模块

2)额外标签法

• 操作：1.在父元素内容的最后添加一个块级元素。2.给添加的块级元素设置clear：both

• 特点：缺点：会在页面中添加额外的标签，会让页面的html结构变得复杂

3)单伪元素清除法

		/* 单伪元素清清除浮动 和 额外标签法一样的原理 */.clearfix::after {content:'';/* 伪元素添加的标签是行内的，要求块 */display: block;clear: both;/* 为了兼容性 */height: 0;visibility:hidden ;}

4)双伪元素清除法

		/* 清除浮动 */.clearfix::before,.clearfix::after {content: '';display: table;}/* .clearfix::after 作用：解决外边距塌陷问题外边距塌陷：父子标签，都是块级，子级加margin会影响父级的位置*//* 真正清除浮动的标签 */.clearfix::after {clear: both;}

5)给父元素设置overflow：hidden

• 操作：直接给父元素设置overflow：hidden

• 特点：优点：方便

2022/8/29 Caroline finish