CSS进阶

一、结构伪类选择器

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

   选择器	说明
   E:first-child{}	匹配父元素中第一个子元素，并且是E元素
   E:last-child{}	匹配父元素中最后一个子元素，并且是E元素
   E:nth-child(n){}	匹配父元素中第n个子元素，并且是E元素
   E:nth-last-child(n){}	匹配父元素中倒数第n个元素，并且是E元素

3. n的注意点：

   1. n为：0、1、2、3、4、5、6、......

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

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

二、伪元素

1. 伪元素：一般页面中的非主内容可以使用伪元素
2. 区别：
   1. 元素：HTML设置的标签
   2. 伪元素：由CSS模拟出的标签效果
3. 种类：

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

4. 注意点:

   1. 必须设置content属性才能生效

   2. 伪元素默认是行内元素

三、标准流

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

四、浮动

1. 浮动的作用
   1. 早期的作用：图文环绕
   2. 现在的作用：网页布局
   3. 
2. 浮动的代码
3. 浮动的特点
   1. 浮动元素会脱离标准流（简称：脱流），在标准流中不占位置
   2. 浮动元素比标准流高半个级别，可以覆盖标准流的元素
   3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动 
   4. 浮动元素有特殊的显示效果
      1. 一行可以显示多个
      2. 可以设置宽高
4. 浮动的案例
   1. CSS书写顺序：浏览器执行效率更高
      1. 浮动/display
      2. 盒子模型：margin border padding 宽度 高度 背景色
      3. 文字样式

五、清除浮动

1. 含义：清除浮动带来的影响，如果子元素浮动了，，此时子元素不能撑开标准流的块级父元素
2. 原因：子元素浮动后脱标→不占位置
3. 目的：需要父元素有高度，从而不影响其他网页元素的布局
4. 清除浮动的方法:
   1. 直接设置父元素高度
      1. 优点：简单粗暴，方便
      2. 缺点：有些布局中不能固定父元素高度。如：新闻列表、金东推荐模块
   2. 额外标签法
      1. 操作
         1. 在父元素内容的最后添加一个块级元素
         2. 给添加的块级元素设置clear：both
      2. 特点：缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂
   3. 单伪元素清除法
      1. 操作：用伪元素代替了额外标签
         1. 基本写法：

            .clearfix::after {

                content:' ';

                display:block;

                clear:both;

            }

         2. 补充写法：

            .clearfix::after{

                content:'';

                display:block;

                clear:both;

                <!-- 在网页中看不到伪元素 -->

                height:0;

                visibility:hidden;

            }

      2. 特点：优点：项目中使用，直接给标签加类即可清除浮动

   4. 双伪元素清楚法

      1. 操作：

         .clearfix::before,

         .clearfix::after {

             content:'';

             display:table;

         }

         .clearfix::after {

             clear:both;

         }

   5. 给父元素设置overflow：hidden

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

      2. 特点：优点：方便