伪元素选择器使用场景

最新推荐文章于 2024-04-24 16:11:00 发布

DIUDIUjiang

最新推荐文章于 2024-04-24 16:11:00 发布

阅读量255

点赞数 3

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/diudiujiang/article/details/123278530

版权

1：伪元素字体图标

<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>伪元素选择器使用场景-字体图标</title>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?y8l2p5');
            src: url('fonts/icomoon.eot?y8l2p5#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?y8l2p5') format('truetype'), url('fonts/icomoon.woff?y8l2p5') format('woff'), url('fonts/icomoon.svg?y8l2p5#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
        
        div {
            position: relative;
            width: 200px;
            height: 35px;
            border: 1px solid red;
        }
        
        div::after {
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: 'icomoon';
            content: '\e901';
            color: red;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

2：仿土豆效果

之前不用伪元素选择器需要写这么多的代码

<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>仿土豆网显示隐藏遮罩案例</title>
    <style>
        .tudou {
            position: relative;
            width: 444px;
            height: 320px;
            background-color: pink;
            margin: 30px auto;
        }
        
        .tudou img {
            width: 100%;
            height: 100%;
        }
        
        .mask {
             /* 隐藏遮罩层 */
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url(images/images/arr.png) no-repeat center;
        }
        /* 当我们鼠标经过了土豆这个盒子，就让里面遮罩层显示出来 */
        
        .tudou:hover .mask {
            /* 而是显示元素 */
            display: block;
        }
    </style>
</head>

<body>
    <div class="tudou">
        <div class="mask"></div>
        <img src=""images/tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <div class="mask"></div>
        <img src=""images/tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <div class="mask"></div>
        <img src=""images/tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <div class="mask"></div>
        <img src=""images/tudou.jpg" alt="">
    </div>
</body>

那我们换成伪元素选择器时就会简短代码

<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>仿土豆网显示隐藏遮罩案例</title>
    <style>
        .tudou {
            position: relative;
            width: 444px;
            height: 320px;
            background-color: pink;
            margin: 30px auto;
        }
        
        .tudou img {
            width: 100%;
            height: 100%;
        }
        
        .tudou::before {
            content: '';
            /* 隐藏遮罩层 */
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url(images/images/arr.png) no-repeat center;
        }
        /* 当我们鼠标经过了土豆这个盒子，就让里面遮罩层显示出来 */
        
        .tudou:hover::before {
            /* 而是显示元素 */
            display: block;
        }
    </style>
</head>

<body>
    <div class="tudou">
        <img src="" images/tudou.jpg " alt=" ">
    </div>
    <div class="tudou ">
        <img src=" "images/tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <img src="" images/tudou.jpg " alt=" ">
    </div>
    <div class="tudou ">
        <div class="mask "></div>
        <img src=" "images/tudou.jpg" alt="">
    </div>
</body>

3：伪元素清除浮动本质

1.额外标签法也称隔墙法（注意：要求这个新的空标签必须是块级元素）

2.父级添加overflow属性

3.父级添加after伪元素

4.父级添加双伪元素

后面两种伪元素清除浮动算是第一种额外标签法的升级和优化

        .clearfix:after {
            content: "";  /* 伪元素必须写的属性 */
            display: block;   /* 插入的元素必须是块级 */
            height: 0;
            clear: both;   /* 核心代码清除浮动 */
            visibility: hidden;
        }

         .clearfix:before,.clearfix:after {
            content: "";  /* 伪元素必须写的属性 */
            display: table;   /* 转换为块级元素并且一行显示 */
        }
        .clearfix:after {
            clear: both;
        }

添加border和padding时会撑大盒子

<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>CSS3盒子模型</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 20px solid red;
            padding: 15px;
        }
    </style>
</head>

<body>
    <div>
        小猪乔治
    </div>

此时可以在CSS3中通过box-sizing来指定盒子模型，有2个值：即可指定为center-box、border-box,这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：
1、box-sizing: content-box 盒子大小为 width+padding+border（以前默认的）

2、box-sizing: border-box 盒子大小为width

如果盒子模型我们改变了box-sizing: border-box, 那padding和border就不会撑大盒子了（前提是padding和border不会超过width宽度）

<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>CSS3盒子模型</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 20px solid red;
            padding: 15px;
            box-sizing: content-box;
        }
        
        p {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 20px solid red;
            padding: 15px;
            /* CSS3盒子模型 盒子最终的大小就是width的大小 */
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div>
        小猪乔治
    </div>
    <p>
        小猪佩奇
    </p>
</body>

DIUDIUjiang

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
伪元素选择器使用场景

1：伪元素字体图标<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>伪元素选择器使用场景-字体图标</title> &l...
复制链接

扫一扫