前端基础——css中的高度塌陷问题

「已注销」

已于 2022-10-18 16:08:29 修改

阅读量148

点赞数

分类专栏： css 前端文章标签： css html 前端

于 2022-10-18 16:06:50 首次发布

本文链接：https://blog.csdn.net/deartors/article/details/127389725

版权

前端同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

css

13 篇文章 0 订阅

订阅专栏

高度塌陷，：实际上还是布局的问题，就像之前介绍过的二级菜单栏设计，当前布局下如果加其他东西就会出现问题，俗称bug。

解决当前bug就要先引入伪元素；伪元素的规范写法是有两个：：

以上是伪元素的基本用法，相关代码如下：

<!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::first-letter{
            font-size: 50px;
            color: rgb(135, 92, 40);
        }
        div::first-line{
            background:linear-gradient(rgb(255, 0, 0),rgb(255, 255, 255));
        }
        div::before{
            content: "这是一段测试代码，";
        }
        div::after{
            content: "这是一段测试代码，";
        }
    </style>
</head>
<body>
    <div>这是一段测试代码，你说什么才是最优秀的人呢，
        其实我觉得这个定义下没有最，只有更优秀，希望
        正在学前端的你也能通过自己的努力变成更优秀的人</div>
</body>
</html>