前端自学day06-css布局(笔记整理)

day06

1. 结构伪类选择器
2. 伪元素
3. 标准流
4. 浮动
5. 清除浮动

---

一、结构伪类选择器

目标：能够使用结构伪类选择器在html中定位元素
1.作用与优势：
场景：常用于查找某父级选择器中的子元素
作用：根据元素在html中的结构关系查找元素
优势：减少对于html中的类的依赖，有利于保持代码整洁
2.选择器
E:first-child{} :匹配父元素中的第一个子元素，并且是E元素
E:last-child{}:匹配父元素中的最后一个子元素，并且是E元素
E:nth-child(n){}:匹配父元素中第n个子元素，并且是E元素
E:nth-last-child(n){}:匹配父元素中倒数第n子元素，并且是E元素

举例：

 

2.1结构伪类选择器-查找多个

1.通过n可以组成常见公式

• 偶数：2n、even
• 奇数：2n+1、2n-1、odd
• 找到前5个:-n+5 (n写在后面浏览器可能会解析失败)
• 找到第5个往后:n+5

 

 

拓展 结构伪类选择器的易错点

Q:在下列案例中，如果需要找到第一个a标签，应该如何查找？

错误示例：
 

 结果：

因为"first-child"表示找到当前元素其父元素的第一个子元素，第一个a标签对应的父
元素是li标签，而当前li标签中只有a标签本身，所以此a标签就是第一个li标签的第一
个子元素。以此类推，下面每个a标签都是第一个子元素，都符合选择器，所以都会选中
正确示例： 

 

(拓展补充) nth-of0-type

选择器：E:nth-of-type() 只在父元素的子元素(E)范围中，匹配第n个
区别：

• :nth-child 直接在所有子元素中数个数
• :nth-of-type 先通过该类型找到所有符合的子元素，然后在这一堆子元素中数个数

二、伪元素

目标：能够使用伪元素在网页中创建内容
伪元素：一般页面中的非主体内容可以使用伪元素
区别：元素是由html设置的标签；伪元素是由css模拟出的标签效果，不是标签
种类：

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

注意：
1.必须设置content属性才能生效(表示伪元素内部所显示的基本内容)
2.伪元素默认是行内元素，设置宽高需要转换成行内块元素
 

三、标准流

目标：能够认识标准流的默认排布方式及其特点
标准流：又称""文档流"；，是浏览器在渲染显示网页内容时默认采用的一套排版规则，
规定了应该以何种方式排列元素
常见标准流排版规则：
1.块级元素：从上往下、垂直布局、独占一行
2.行内元素或行内块元素：从左往右、水平布局、空间不够自动折行
 

四、浮动

4.1浮动的作用
早期的作用：图文环绕
现在的作用：网页布局
场景：让垂直分布的盒子变成水平布局，例如：一个在左一个在右

4.2浮动的代码
属性名：float
属性值：left:左浮动； right:右浮动

4.3浮动的特点
1.浮动元素会脱离标准流(简称：脱标)，在标准流中不占位置
2.浮动元素比标准流高半个级别，可以覆盖标准流中的元素
3.浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
4.浮动元素会受到上面元素边界的影响
5.浮动元素有特殊的显示效果

• 一行可以显示多个
• 可以设置宽高

注意：浮动的元素不能通过text-align或者margin：0 auto，让浮动元素本身水平居中
 

五、清除浮动

5.1清除浮动的介绍
含义：清除浮动带来的影响 影响：如果子元素浮动了，此时子元素不能撑开标准流的块级元素，导致父元素高度为0
原因：子元素浮动后脱标，不占位置
目的：需要其父元素有高度，从而不影响其他网页的布局

5.2清除浮动的方法-直接设置父元素高度
特点：

• 优点：简单粗暴，方便
• 缺点：有些布局中不能固定父元素的高度，如：新闻列表，京东推荐模块等，高度动态变化的情况

5.2.2清除浮动的方法-额外标签法
操作：
1. 在父元素内容的最后添加一个块级元素
2. 给添加的块级元素设置clear:both
缺点：会给页面中添加额外的标签，会让页面的HTML结构变的复杂

5.2.3清除浮动的方法-单伪元素清除法
操作：
用伪元素代替了额外标签
优点：项目中使用，直接给标签加类即可清除浮动