CSS复习精选

Willa25

已于 2022-04-28 20:35:47 修改

阅读量941

点赞数

分类专栏： html+css 文章标签： html css

于 2022-04-28 20:22:08 首次发布

本文链接：https://blog.csdn.net/qq_52982670/article/details/124168267

版权

html+css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS复习精选

CSS复习精选
一、选择器进阶
二、CSS三大特性
三、元素显示模型
四、盒子模型
五、结构伪类
- - 5.1 结构伪类选择器的易错点
六、标准流
七、浮动
八、伪元素
九、定位

CSS复习精选

主要是针对CSS重点，易难易错易混淆的CSS知识点整理，并不表明涵盖所有CSS知识

一、选择器进阶

目标：能够理解复合选择器的规则，并使用复合选择器在 HTML 中选择元素

1.1 后代选择器: 空格

作用：根据 HTML 标签的嵌套关系，选择父元素后代中满足条件的元素
选择器语法：选择器1 选择器2 { css }
结果：
在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式
注意点：
1.后代包括：儿子、孙子、重孙子……
2.后代选择器中，选择器与选择器之间用空格隔开

<body>
    <div class="father">
        <p>亲儿子</p>
        <div>
            <p>亲孙子</p>
        </div>
    </div>
    <p>私生子</p>
</body>

        /* 在.father的后代中，找p标签 */
        .father p {
            color: red;
        }

此时亲儿子、亲孙子都变红（只要是同父辈，祖父辈都行）

1.2 子代选择器: >

作用：根据 HTML 标签的嵌套关系，选择父元素子代中满足条件的元素
选择器语法：选择器1 > 选择器2 { css }
结果：
在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式
注意点：
1.子代只包括：儿子
2.子代选择器中，选择器与选择器之前用 > 隔开

<body>
    <div class="father">
        <p>亲儿子</p>
        <div>
            <p>亲孙子</p>
        </div>
    </div>
    <p>私生子</p>
</body>

/* 子代选择器也称亲儿子选择器 */
.father>p {
            color: blue;
        }

此时只有亲儿子才会变蓝

1.3 并集选择器: ,

作用：同时选择多组标签，设置相同的样式
选择器语法：选择器1 ，选择器2 { css }
结果：
找到选择器1 和选择器2 选中的标签，设置样式
注意点：
1.并集选择器中的每组选择器之间用逗号 “,” 分隔
2.并集选择器中的每组选择器可以是基础选择器或者复合选择器
3.并集选择器中的每组选择器通常一行写一个，提高代码的可读性

<body>
  <!-- 需求：把div，p标签和h2设置为红色（节省代码的方式） -->
  <div>我是div</div>
  <div>我也是一个div</div>
  <p>我是p标签</p>
  <p>我也是p标签</p>
  <h1 class="red">我是一个h1标签</h1>
  <h2>我是一个h2标签</h2>
</body>

  <style>
    div,
    p,
    .red {
      color: red;
    }
  </style>

此时只有h2没有变颜色其他都变色

1.4 交集选择器: 紧挨着（贴贴）

作用：选中页面中同时满足多个选择器的标签
选择器语法：选择器1选择器2 { css }
结果：
（既又原则）找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式
注意点：
1.交集选择器中的选择器之间是紧挨着的，没有东西分隔
2.交集选择器中如果有标签选择器，标签选择器必须写在最前面（例:p.red）

<body>
  <!-- 需求：只让小可爱变红（不能改变html结构） -->
  <!-- 解决：找到页面中，既是p标签，又有red这个类名的标签，设置样式 -->
  <div class="red">小姐姐</div>
  <p>小帅哥</p>
  <p class="red">小可爱</p>
</body>

 <style>
    p.red {
      color: red;
    }
  </style>

此时只有小可爱变红

1.5 伪类选择器

注意事项：

a:link选择所有未被访问过的链接
2. a：visited选择所有已经被访问的链接
3. a:hover选择鼠标指针于其上的链接
4. a:active选择活动链接

记忆方法： lvha顺序开发 lv包包hao

    <style>
        /* 1、a:link选择所有未被访问过的链接 */
        a:link {
            color: #333;
            text-decoration: none;
        }
    a:visited {
        color: orange;
    }
    /* 鼠标经过的那个链接 */
    a:hover {
        color: skyblue;
    }
    /* 选择鼠标正在按下还没有弹起的链接 */
    a:active {
        color: green;
    }
    </style>

    <!-- lvha顺序开发 lv包包hao -->
         <!-- 1、a:link选择所有未被访问过的链接
        2、a：visited选择所有已经被访问的链接
        3、a:hover选择鼠标指针于其上的链接
        4、a:active选择活动链接 -->
    <style>
        /* 1、a:link选择所有未被访问过的链接 */
        a:link {
            color: #333;
            text-decoration: none;
        }
    a:visitted {
        color: orange;
    }
    /* 鼠标经过的那个链接 */
    a:hover {
        color: skyblue;
    }
    /* 选择鼠标正在按下还没有弹起的链接 */
    a:active {
        color: green;
    }
    </style>

二、CSS三大特性

2.1 继承性

2.1.1 特性：子元素有默认继承父元素样式的特点（子承父业）
2.1.2 可以继承的常见属性：
1.color
2.font-style、font-weight、font-size、font-family
3.text-indent、text-align
4.line-height
5.……
2.1.3 注意点：
可以通过调试工具判断样式是否可以继承(f12)
2.1.4 常见应用场景：
1.可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式
2.直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小

<body>
  <div class="father">
    父亲
    <div class="son">
      儿子
    </div>
  </div>
</body>

 <style>
    .father {
      color: red;
      font-style: italic;
      font-weight: 700;
      font-size: 30px;
      font-family: 楷体;
      text-indent: 2em;
      text-align: center;
      line-height: 100px;
    }
  </style>

style未对儿子设置样式，此时继承父亲的(子承父业)，效果如下：
在这里插入图片描述

2.1.5 继承失效的特殊情况

如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式
a标签的color会继承失效
• 其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
h系列标签的font-size会继承失效
• 其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
div的高度不能继承，但是宽度有类似于继承的效果
• 宽度属性不能基继承，但是div有独占一行的特性

<body>
  <div class="father">
    <!-- 继承正常情况 -->
    <div class="son">儿子</div>

    <!-- 1、a标签的文字颜色会继承失效 -->
    <a href="#">我是一个a标签</a>

    <!-- 2、h系列标签的font-size会继承失效 -->
    <h1>我是一个h1标签</h1>

    <!-- 3、div标签的高度不能继承，但是宽度有类似于继承的效果 -->
    <div class="son"></div>
  </div>
</body>

   <style>
    .father {
      color: red;
      font-size: 20px;
      width: 400px;
      height: 400px;
      background-color: skyblue;
    }

    .son {
      width: 100px;
      height: 100px;
      background-color: orange;
    }
  </style>

此时,效果如下：
在这里插入图片描述

2.2 层叠性

2.1 特性：
1.给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
2.给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效
注意点：
当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果
1.如果给同一个标签设置了相同的属性，此时样式会层叠覆盖，写在最后的会生效
2.如果给同一个标签设置了不同的样式，此时样式会层叠叠加，共同作用在标签上

<body>
  <p class="orange">我是一个文字</p>
</body>

<style>
    p {
      color: red;
    }

    p {
      /* font-size: 30px; */
      color: blue;
    }
  </style>

此时文字变蓝

2.3 优先级

2.3.1 特性：

不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
同一个元素指定多个选择器，则会有优先级产生。
选择器相同，执行层叠性。
选择器不同，根据选择器权重进行。
优先级由若到强向下，注意权重数值。比较从左往右比较数值大小，权重叠加时永远只有叠加没有进位。

2.3.2 优先级公式：

继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

注意点：
1.!important写在属性值的后面，分号的前面！
2.!important不能提升继承的优先级，主要是继承优先级最低！
3.实际开发中不建议使用 !important 。

<body>
  <div class="father">
    <!-- 6、行内样式 -->
    <p class="son" id="one">我是一个标签</p>
  </div>
</body>

  <style>
    /* 7、!important 最强外挂 */
    p {
      /* color: purple !important; */
    }

    /* 5、id选择器 */
    #one {
      /* color: skyblue; */
    }

    /* 4、类选择器 */
    .son {
      /* color: orange; */
    }

    /* 3、标签选择器 */
    p {
      /* color: blue; */
    }

    /* 2、通配符选择器 */
    * {
      color: green;
    }
    
    /* 1、继承 */
    .father {
      color: red !important;
    }
  </style>

这里就不展示效果了，有需要自己复制代码逐一尝试

2.3.3 权重

场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
权重叠加计算公式： (0， 0，0， 0) 分别对应(行内式样式的个数，id选择器的个数，类选择器的个数，标签选择器的个数)（每一级之间不存在进位）
查看权重小技巧：鼠标悬停在所需要查的，就会自动显示权重

注意：（上面自动显示权重公式的后三类，即ｉｄ，类，标签的个数），行内式写在标签的第一个，用style表示
比较规则：
1.先比较第一级数字，如果比较出来了，之后的统统不看
2.如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
3.……
4.如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算!）
注意点：!important如果不是继承(继承最低），则权重最高，天下第一！
权重计算题解题步骤：

先判断选择器是否能直接选中标签，如果不能直接选中 → 是继承，优先级最低 → 直接pass
通过权重计算公式，判断谁权重最高

注意点：
实际开发中选择标签需要精准，尽量避免多个选择器同时选中一个标签的情况，不要自己难为自己

    <style>
        /* 针对span来说是继承--pass */
        /* 针对p 来说 可以选中 */
        /* 权重：（0,0,0,2） */
        div p {
            color: red;
        }

        /* 针对span来说是继承--pass */
         /* 针对[p]来说还是继承-pass */
         /* 权重：（0,0，1，0） */
        .father {
            color: purple;
        }
        /* 都是继承 子承父业 继承P */
    </style>
</head>
<body>
   <div class="father">
       <p class="son">
           <span>文字</span>
       </p>
   </div>
</body>

解析：这题比较特殊，都是继承，不要真的就pass,虽然father的权重比p的高

三、元素显示模型

3.1 块级元素

属性：display：block
显示特点：
1.独占一行（一行只能显示一个）
2.宽度默认是父元素的宽度，高度默认由内容撑开
3.可以设置宽高
代表标签：
• div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……

  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div>我是div</div>
  <div>我是div</div>
  <div>我是div</div>
</body>

3.2 行内元素

属性：display：inline
显示特点：
1.一行可以显示多个
2.宽度和高度默认由内容撑开
3.不可以设置宽高
代表标签：
a、span 、b、u、i、s、strong、ins、em、del……

  <style>
    span {
      width: 200px;
      height: 200px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <span>我是span</span>
  <span>我是span</span>
  <span>我是span</span>
</body>

3.3 行内快元素

属性：display：inline-block
显示特点：

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

代表标签：
• input、textarea、button、select……
• 特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline
拓展1：HTML嵌套规范注意点
1.块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等……
2.p标签中不要嵌套div、p、h等块级元素
3.a标签内部可以嵌套任意元素
4.a标签不能嵌套a标签

  <style>
    input {
      width: 200px;
      height: 200px;
      background-color: skyblue;
    }

    img {
      width: 250px;
      height: 250px;
    }
  </style>
</head>
<body>
  <!-- <input type="text">
  <input type="text">
  <input type="text"> -->

  <img src="./images/1.jpg" alt="">
  <img src="./images/1.jpg" alt="">
  <img src="./images/1.jpg" alt="">
</body>

四、盒子模型

概念

页面中的每一个标签，都可看做是一个**“盒子”**，通过盒子的视角更方便的进行布局
浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子
CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域(margin）构成，这就是盒子模型

4.1 内容区域：content

作用：利用 width 和 height 属性默认设置是盒子内容区域的大小
属性：width / heigh
常见取值：数字+px

4.2 边框：border

作用：给设置边框粗细、边框样式、边框颜色效果

4.2.1 边框（border）- 连写形式

属性名：border
属性值：单个取值的连写，取值之间以空格隔开
如：border : 10px solid red;
快捷键：bd + tab

4.2.2 边框（border）- 单方向设置

场景：只给盒子的某个方向单独设置边框
属性名：border - 方位名词
属性值：连写的取

    div {
      width: 300px;
      height: 300px;
      background-color: skyblue;

      /* 1、单个属性 */
      /* border-width: 10px;
      border-style: solid;
      border-color: red; */

      /* 2、连写形式 */
      /* border: 10px solid blue; */
      /* border: 10px dotted orange; */

      /* 3、单方向设置 */
      /* border-top: 10px solid red; */
      border-bottom: 10px solid orange;
    }

4.3 内边距

作用：设置边框与内容区域之间的距离
属性名：padding
常见取值：

记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！

4.3.1 内边距（padding）- 连写

属性名：padding
属性值：单个取值的连写，取值之间以空格隔开
如：padding : 10px 20px 30px;
注意事项：
1. 一个取值代表上右下左，例：padding: 1px;表示上右下左内边距为1px.
2. 两个值：padding: 1px 2px; 表示上下1px, 左右2px.
3. 三个值：padding: 1px 2px 3px; 表示上px, 左右内边距px, 下内边距为3px.
4. 四个值： padding: 1px 2px 3px 4px; 表示上、右、下、左内边距分别为: 1px， 2px, 3px 4px.

4.3.2 内边距（padding）- 单方向设置

场景：只给盒子的某个方向单独设置内边距
属性名：fpadding - 方位名词
属性值：数字 + px
内边距
１内容到边框的距离，是内容不是文字盒子的空白
２盒子独占一行时没有设置宽高，盒子不会撑大，默认占满
（拓展）不会撑大盒子的特殊情况
不会撑大盒子的特殊情况（块级元素）
如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子

    div {
      width: 100px;
      height: 100px;
      background-color: pink;
      border: 1px solid #000;

      /* 1、padding的取值 */
      /* padding: 10px; */
      /* padding: 10px 20px; */
      /* padding: 10px 20px 30px; */
      /* padding: 10px 20px 30px 40px; */

      /* 2、padding的单方向取值 */
      padding-left: 20px;
    }

 <div>我是内容我是内容我是内容我是内容我是内容我是内容</div>

4.4 外边距

4.4.1 外边距（margin）- 连写

属性名：margin
属性值：单个取值的连写，取值之间以空格隔开
如：margin : 10px 20px 30px;
注意事项：
1. 一个取值代表上右下左，例：margin: 1px;表示上右下左内边距为1px.
2. 两个值：margin: 1px 2px; 表示上下1px, 左右2px.
3. 三个值：margin: 1px 2px 3px; 表示上px, 左右内边距px, 下内边距为3px.
4. 四个值： margin: 1px 2px 3px 4px; 表示上、右、下、左内边距分别为: 1px， 2px, 3px 4px.
作用：设置边框以外，盒子与盒子之间的距离
属性名：margin
常见取值：
记忆规则：从上开始赋值，然后(上右下左)顺时针赋值，如果设置赋值的，看对面的！！

4.4.2 外边距（margin） - 单方向设置

场景：只给盒子的某个方向单独设置外边距
属性名：margin - 方位名词
属性值：数字 + p

常见取值

   /* 去除浏览器默认的margin和padding */
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      /* 转换成行内块元素 */
      display: inline-block;
      width: 200px;
      height: 200px;
      background-color: pink;

      /* 1、margin的取值 */
      /* margin: 10px; */
      /* margin: 10px 20px; */
      /* margin: 10px 20px 30px; */
      /* margin: 10px 20px 30px 40px; */

      /* 2、margin的单方向 */
      margin-left: 20px;
    }

4.5 清除默认内外边距

场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的
margin和padding，后续自己设置
• 比如：body标签默认有margin：8px
• 比如：p标签默认有上下的margin
• 比如：ul标签默认由上下的margin和padding-left
• ……

   * {
      margin: 0;
      padding: 0;
    }

4.5.1 外边距正常情况

场景：水平布局的盒子，左右的margin正常，互不影响
结果：最终两者距离为左右margin的和
5.7 外边距折叠现象 – ① 合并现象
场景：垂直布局的块级元素，上下的margin会合并
结果：最终两者距离为margin的最大值
解决方法：避免就好
• 只给其中一个盒子设置margin即可

   * {
      margin: 0;
      padding: 0;
    }

    div {
      /* 转换成行内块元素 */
      display: inline-block;
      width: 300px;
      height: 300px;
    }

    .red {
      background-color: red;
      margin-right: 100px;
    }

    .blue {
      background-color: blue;
      margin-left: 100px;
    }

  <div class="red"></div><div class="blue"></div>```

4.5.2 外边距折叠现象 – ② 塌陷现象

外边距塌陷针对块级元素

场景：互相嵌套的块级元素，子元素的 margin-top 会作用在父元素上
结果：导致父元素一起往下移动
解决方法：

给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
给父元素设置overflow：hidden
转换成行内块元素
设置浮动

合并现象

   * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 300px;
      height: 300px;
    }

    .red {
      background-color: red;
      /* margin-bottom: 200px; */
    }

    .blue {
      background-color: blue;
      margin-top: 200px;
    }

 <div class="red"></div><div class="blue"></div>

塌陷现象

  * {
      margin: 0;
      padding: 0;
    }

    .father {
      width: 400px;
      height: 400px;
      background-color: pink;

      /* border-top: 1px solid #000; */
      /* padding-top: 1px; */

      /* overflow: hidden; */

      /* display: inline-block; */

      float: left;
    }

    .son {
      width: 100px;
      height: 100px;
      background-color: blue;
      margin-top: 100px;
    }

  <div class="father">
    <!-- 我是一行文本 -->
    <div class="son"></div>
  </div>

4.5.3 行内元素的margin和padding无效情况

场景：给行内元素设置margin和padding时
结果：

水平方向的margin和padding布局中有效！
垂直方向的margin和padding布局中无效！

4.6 盒子模型最终计算公式：

盒子宽度 = 左右边框 + 左右padding + 内容宽度
盒子高度 = 上下边框 + 上下padding + 内容宽度

五、结构伪类

目标：能够使用结构伪类选择器在html中的定位
作用与优势：

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

选择器:
注意点:

    /* 1、找到第一个子元素，并且为li标签 */
    li:first-child {
      /* background-color: blue; */
    }

    /* 2、找到最后一个子元素，并且为li标签 */
    li:last-child {
      /* background-color: orange; */
    }

    /* 3、找到第3个子元素，并且为li标签 */
    li:nth-child(3) {
      /* background-color: pink; */
    }

    /* 4、找到倒数第3个子元素，并且为li标签 */
    li:nth-child(8) {
      /* background-color: green; */
    }

    li:nth-last-child(3) {
      background-color: red;
    }

5.1 结构伪类选择器的易错点

nth-child和nth-of-type区别：

nth-child → 直接在所有孩子中数个数
nth-of-type → 先通过该类型找到符合的一堆子元素，然后在这一堆子元素中数个数（这个主要是针对同级的子元素）

    /* 需求：需要找到第3个li标签 */

    /* 1、使用 :nth-child */
    li:nth-child(9) {
      /* background-color: red; */
    }


    /* 2、使用 :nth-of-type */
    li:nth-of-type(3) {
      background-color: orange;
    }

  </style>

<body>
  <ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <div>狸猫</div>
    <div>狸猫</div>
    <div>狸猫</div>
    <div>狸猫</div>
    <div>狸猫</div>
    <div>狸猫</div>
    <div>狸猫</div>
    <div>狸猫</div>
    <div>狸猫</div>
    <div>狸猫</div>
    <li>我是第3个li</li>
    <li>我是第4个li</li>
    <li>我是第5个li</li>
    <li>我是第6个li</li>
    <li>我是第7个li</li>
    <li>我是第8个li</li>
    <li>我是第9个li</li>
    <li>我是第10个li</li>
  </ul>
</body>

六、标准流

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

    div {
      width: 200px;
      height: 200px;
      background-color: orange;
    }

    span {
      background-color: skyblue;
    }

<body>
  <div>我是块级元素div</div>
  <div>我是块级元素div</div>
  <div>我是块级元素div</div>

  <span>我是行内元素span</span>
  <span>我是行内元素span</span>
  <span>我是行内元素span</span>
  <span>我是行内元素span</span>

</body>

七、浮动

目标：能够认识使用浮动的作用，了解浮动的特点
属性名：float

7.1 浮动的作用

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

浮动相关属性：
1.左浮动：float : left
2.右浮动：float : right
7.2 浮动的特点

浮动元素会脱离标准流（脱标），在标准流中不占位置
相当于从地面飘到了空中
浮动元素比标准流高半个级别，可以覆盖标准流中的元素
浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
浮动元素会受到上面元素边界的影响
浮动元素有特殊的显示效果，如：一行可以显示多个、可以设置宽高

    * {
      margin: 0;
      padding: 0;
    }

    div {
      /* 左浮动 */
      float: left;

      /* 右浮动 */
      /* float: right; */
      width: 200px;
      height: 200px;
    }

    .red {
      /* 转换成行内块元素 */
      /* display: inline-block; */
      background-color: red;
    }

    .green {
      /* 右浮动 */
      /* float: right; */

      /* 左浮动 */
      /* float: left; */
      background-color: green;
    }

    .blue {
      /* width: 210px; */
      /* height: 210px; */
      background-color: blue;
    }

    span {
      float: left;
      width: 200px;
      height: 200px;
      background-color: lime;
      border: 1px solid gold;
      line-height: 200px;
      text-align: center;
    }

<body>
  <!-- <div class="red"></div>
  <div class="green"></div>
  <div class="blue"></div> -->

  <span>我是一个span标签</span>
  <span>我是一个span标签</span>
  <span>我是一个span标签</span>
</body>

7.3 清除浮动的方法

目标：能够认识清除浮动的目的，并能够给使用清除浮动的方法
目的：如果子元素设置了浮动，此时子元素不能撑开标准流的块级元素

方法一、直接设置父元素高度

  <style>
    .father {
      height: 400px;
      width: 400px;
      background-color: pink;
    }

    .son {
      float: left;
      width: 100px;
      height: 400px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>

方法二、额外标签法

  <style>
    .father {
      width: 400px;
      background-color: pink;
    }

    .son {
      float: left;
      width: 100px;
      height: 400px;
      background-color: blue;
    }

    .clear {
      clear: both;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
    <div class="clear"></div>
  </div>
</body>

方法三、单伪元素清除法

4. 方法四、双伪元素清除法 ```css

``` 5. 给父元素设置overflow : hidden

    .father {
      width: 400px;
      background-color: pink;
      overflow: hidden;
    }

    .son {
      float: left;
      width: 100px;
      height: 400px;
      background-color: blue;
    }

八、伪元素

目标：能够使用伪元素在网页中创建内容
区别：
1.元素：HTML 设置的标签
2.伪元素：由 CSS 模拟出的标签效果
种类：
注意点：
1.必须设置content属性才能生效
2.伪元素默认是行内元素

    .father {
      width: 300px;
      height: 300px;
      background-color: skyblue;
    }

    .father::before {
      /* 必加的属性 */
      content: '我是一个伪元素';
      /* 转换显示方式 */
      display: block;
      width: 100px;
      height: 100px;
      background-color: orange;
    }

<body>
  <div class="father">
    我是father内部的内容
  </div>
</body>

九、定位

目标：能够说出定位的常见应用场景，并且能够说出不同定位方式的特点
属性名：position
应用场景：

可以解决盒子与盒子之间的层叠问题
可以让盒子始终固定在屏幕中的某个位置

9.1 设置定位的方式

在这里插入图片描述

9.2 静态定位

介绍：静态定位是默认值，就是之前认识的标准流。
属性：position：static
使用步骤:
1、设置定位方式
核心代码

position: absolute;

设置偏移值
注意：
偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
选取的原则一般是就近原则（离哪边近用哪个）

9.3 相对定位

介绍：自恋型定位，相对于自己之前的位置进行移动
属性：position：relative
特点：

需要配合方位属性实现移动
相对于自己原来位置进行移动
在页面中占位置 → 没有脱标

应用场景：

配合绝对定位组CP（子绝父相）
用于小范围的移动

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 300px;
      height: 300px;
    }

    .red {
      background-color: red;
    }

    .green {
      /* 1、定位方式-相对定位 */
      position: relative;

      /* 2、偏移值 */
      top: 100px;
      left: 100px;

      background-color: green;
    }

    .blue {
      background-color: blue;
    }

  </style>
</head>
<body>
  <div class="red"></div>
  <div class="green"></div>
  <div class="blue"></div>
</body>

效果

9.4 绝对定位

介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动
属性：position：absolute
特点：

需要配合方位属性实现移动
默认相对于浏览器可视区域进行移动
在页面中不占位置 → 已经脱标

应用场景：

配合绝对定位组CP（子绝父相）

注意：

祖先元素中没有定位时 → 默认相对于浏览器进行移动
祖先元素中有定位时 → 相对于最近的有定位的祖先元素进行移动

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 300px;
      height: 300px;
    }

    .red {
      background-color: red;
    }

    .green {
      /* 1、定位方式-绝对定位 */
      position: absolute;

      /* 2、偏移值 */
      top: 100px;
      left: 100px;

      background-color: green;
    }

    .blue {
      background-color: blue;
    }

  </style>
</head>
<body>
  <div class="red"></div>
  <div class="green"></div>
  <div class="blue"></div>
</body>