伪元素、浮动及浮动案例、清除浮动方法

lxf2023-05-05 16:19:01

首页 > vue
> 正文

「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」

一、伪元素

在页面中，非主题内容可以使用伪元素

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

1-1、伪元素种类

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

1-2、注意点

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

1-3、示例

1-3-1、示例1

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .father {
        width: 300px;
        height: 300px;
        background-color: seagreen;
      }

      .father::before {
        /* 必加的属性 */
        content: '伪元素';
        /* 转换显示方式才能设置宽高，因为默认是行内元素 */
        display: block;
        width: 100px;
        height: 100px;
        background-color: sienna;
      }
    </style>
  </head>
  <body>
    <div class="father">
      我是father内部的内容
    </div>
  </body>
</html>

效果：

伪元素、浮动及浮动案例、清除浮动方法

1-3-2、示例2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .father {
        width: 300px;
        height: 300px;
        background-color: seagreen;
      }

      .father::after {
        /* 必加的属性 */
        content: '伪元素';
        /* 转换显示方式才能设置宽高，因为默认是行内元素 */
        display: block;
        width: 100px;
        height: 100px;
        background-color: sienna;
      }
    </style>
  </head>
  <body>
    <div class="father">
      我是father内部的内容
    </div>
  </body>
</html>

效果：

伪元素、浮动及浮动案例、清除浮动方法

二、标准流

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: orange;
      }

      span {
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <div>我是块级元素div</div>
    <div>我是块级元素div</div>
    <div>我是块级元素div</div>

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

效果：

伪元素、浮动及浮动案例、清除浮动方法

三、浮动

3-1、浮动的作用

早期作用：主要用于做图文环绕的效果
现在作用：网页布局，比如让垂直布局的块级盒子变成水平布局：一个往左，一个往右

3-2、浮动的代码

属性名：float
属性值：
- left：左浮动
- right：右浮动

3-3、浮动的特点

浮动元素会脱离标准流（简称：脱标），在标准流中不占位置（相当于飘到了上层）
浮动元素比标准流高半个级别，可以覆盖标准流中的元素
浮动找浮动，下一个浮动的元素会跟在上一个浮动元素后面
浮动元素会受到上面元素边界的影响
浮动元素有特殊的显示效果（类似于行内块元素）
- 一行可以显示多个
- 可以设置宽高

所以在给行内元素设置完浮动后就不用再使用display转换了，就会多此一举，可直接进行宽高的设置

！浮动的元素不能能过text-align:center或者margin: 0 auto来让浮动元素本身水平居中

3-4、浮动的顺序贴靠特性

子盒子会按照顺序进行贴靠，如果没有足够的空间则会寻找再往前一个兄弟元素

比如：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .box{
        width: 250px;
        height: 100px;
        border: 1px solid #000;
      }
      .box .c1 {
        width: 150px;
        height: 100px;
        background-color: orange;
        float: left;
      }
      .box .c2 {
        width: 100px;
        height: 50px;
        background-color: green;
        float: left;
      }
      .box .c3 {
        width: 100px;
        height: 50px;
        background-color: blue;
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="c1"></div>
      <div class="c2"></div>
      <div class="c3"></div>
    </div>
  </body>
</html>

伪元素、浮动及浮动案例、清除浮动方法

原本所在位置由于父盒子不够宽则会往下掉，遇到了1号盒子，空间足够，则紧贴着1号

3-5、浮动的案例

3-5-1、网页布局案例

实现效果：

伪元素、浮动及浮动案例、清除浮动方法

代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      /* 去除标签默认的margin和padding */
      * {
        margin: 0;
        padding: 0;
      }

      .header {
        /*header不设置宽，默认与父元素body一样宽*/
        height: 40px;
        background-color: #333;
      }

      .nav {
        width: 1226px;
        height: 100px;
        background-color: #ffc0cb;
        margin: 0 auto;
      }

      .banner {
        width: 1226px;
        height: 460px;
        background-color: yellow;
        margin: 0 auto;
      }

      .left {
        float: left;
        width: 234px;
        height: 460px;
        background-color: #ffa500;
      }

      .right {
        float: right;
        width: 992px;
        height: 460px;
        background-color: #87ceeb;
      }

    </style>
  </head>
  <body>
    <!-- 布局流程：从上往下，从外往内 -->
    <!-- 网页的头部 -->
    <div class="header"></div>
    <!-- 网页的导航 -->
    <div class="nav"></div>
    <!-- 网页的轮播图 -->
    <div class="banner">
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </body>
</html>

3-5-2、小米模块案例

实现效果：

伪元素、浮动及浮动案例、清除浮动方法

代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .box {
        width: 1226px;
        height: 614px;
        margin: 100px auto;
      }

      .left {
        float: left;
        width: 234px;
        height: 614px;
        background-color: #800080;
      }

      .right {
        float: right;
        width: 978px;
        height: 614px;
      }

      .item {
        float: left;
        width: 234px;
        height: 300px;
        background-color: #87ceeb;
        margin-right: 14px;
        margin-bottom: 14px;
      }

      /* 找到的是 第 4 和第 8个 4倍数  4n */
      .item:nth-child(4n) {
        margin-right: 0;
      }

      /* 找到从第5个开始往后的所有个子元素 */
      .item:nth-child(n+5) {
        margin-bottom: 0;
      }
    </style>
  </head>
  <body>
    <!-- 布局流程：从上往下，从外往内 -->
    <div class="box">
      <div class="left"></div>
      <div class="right">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
    </div>
  </body>
</html>

3-5-3、网页导航案例

实现效果：

伪元素、浮动及浮动案例、清除浮动方法

代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      /* 1、去除标签默认的margin和padding */
      * {
        margin: 0;
        padding: 0;
      }

      /* 2、找到ul，去除小圆点 */
      ul{
        list-style: none;
      }

      /* 3、找到li标签，设置浮动 */
      ul li {
        float: left;
      }

      /* 4、找到a标签，设置宽高 */
      ul li a {
        /* a标签默认是行内元素，不能直接设置宽高 */
        /* 1、转换成行内块元素 */
        /* display: inline-block; */

        /* 2、转换成块级元素 */
        /* display: block; */

        /* 3、设置浮动 */
        float: left;

        width: 80px;
        height: 50px;
        background-color: skyblue;
        text-decoration: none;/*去除下划线*/
        text-align: center;
        line-height: 50px;/*行高= 高度，让文字垂直居中*/
        color: #fff;
        font-size: 16px;
      }

      ul li a:hover {
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><a href="#">新闻1</a></li>
      <li><a href="#">新闻2</a></li>
      <li><a href="#">新闻3</a></li>
      <li><a href="#">新闻4</a></li>
      <li><a href="#">新闻5</a></li>
      <li><a href="#">新闻6</a></li>
      <li><a href="#">新闻7</a></li>
      <li><a href="#">新闻8</a></li>
    </ul>
  </body>
</html>

3-6、清除浮动

3-6-1、浮动带来的影响

在父元素没有设置高度的情况下，如果子元素浮动，由于子元素浮动脱标，就无法撑开标准流的父盒子，导致父盒子高度塌陷

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动</title>
    <style>
      #father {
        width: 300px;
        border: 1px solid silver;
        background-color: cyan;
      }
      #father div{
        width: 100px;
        height: 50px;
        border: 1px solid silver;
        background-color: hotpink;
      }
      #son1 {float: left;}
      #son2 {float: right;}
    </style>
</head>
<body>
  <span></span>
  <span></span>
  <span></span>
  <hr>
  <div id="father">
    <div id="son1"></div>
    <div id="son2"></div>
  </div>
</body>
</html>

由于父元素没有设置宽度，其子元素又进行了浮动，将会导致父元素高度塌陷：

伪元素、浮动及浮动案例、清除浮动方法

3-6-2、清除浮动方法

1、直接给父元素设置高度

优点：简单、方便
缺点：有很多布局不能固定父元素高度：比如长列表、推荐模块，是无法确定子项内容有多少的

代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .father {
        height: 400px;
        width: 400px;
        background-color: pink;
      }

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

2、额外标签法

实现方式：
1. 给父元素内容的最后添加一个块级元素
2. 给添加的块级元素设置clear: both;
缺点：
- 会添加进去额外的标签，让HTML结构变得复杂
代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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>
</html>

3、单伪元素清除法

实现方式：用伪元素替代额外标签
基本写法：

.clearfix::after { content: ''; display: block; clear: both;}

补充写法：

.clearfix::after {

content: '';

display: block;

clear: both;

/在网页中看不到伪元素/

height: 0;

visibility: hidden;
}

优点：在项目中清除浮动写到公共类文件中，直接给标签加上类名即可
代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .father {
        width: 400px;
        background-color: pink;
      }

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

      .clearfix::after {
        content: '';
        display: block;
        clear: both;
        /* 补充代码：在网页中看不到伪元素 */
        /* height: 0;
        visibility: hidden; */
      }
    </style>
  </head>
  <body>
    <div class="father clearfix">
      <div class="son"></div>
    </div>

    <div class="clearfix"></div>
    <div class="clearfix"></div>
    <div class="clearfix"></div>
    <div class="clearfix"></div>
  </body>
</html>

4、双伪元素清除法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .father {
        width: 400px;
        background-color: pink;
      }

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

      .clearfix::before,
      .clearfix::after {
        content: '';
        display: table;
      }
      .clearfix::after {
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="father clearfix">
      <div class="son"></div>
    </div>
  </body>
</html>

5、为父元素设置overflow: hidden

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .father {
        width: 400px;
        background-color: pink;
        overflow: hidden;
      }

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

    </style>
  </head>
  <body>
    <div class="father">
      <div class="son"></div>
    </div>
  </body>
</html>

本文是由"秘密武器开发者中心"本站原创整理，所有内容的版权归原作者所有。

上一篇 SQL 窗口函数

下一篇系统学习 TypeScript（六）——认识接口

伪元素、浮动及浮动案例、清除浮动方法

一、伪元素

1-1、伪元素种类

1-2、注意点

1-3、示例

1-3-1、示例1

1-3-2、示例2

二、标准流

三、浮动

3-1、浮动的作用

3-2、浮动的代码

3-3、浮动的特点

3-4、浮动的顺序贴靠特性

3-5、浮动的案例

3-5-1、网页布局案例

3-5-2、小米模块案例

3-5-3、网页导航案例

3-6、清除浮动

3-6-1、浮动带来的影响

3-6-2、清除浮动方法

1、直接给父元素设置高度

2、额外标签法

3、单伪元素清除法

4、双伪元素清除法

5、为父元素设置overflow: hidden

相关专题