首页 > 其他 > 详细

伪元素的应用以及伪元素清除浮动

时间:2019-09-23 20:38:16      阅读:106      评论:0      收藏:0      [点我收藏+]

1.伪元素定义

概念:在当前元素内容的前面或者后面追加一个虚拟的标签

特点:

(1).伪元素由CSS渲染,不会增加DOM开销;

(2).伪元素默认为行内样式,可以转化成块级处理;

(3).伪元素不管有没有内容,content这是值不能少,即使没有也要写成空;

(3).伪元素官方推荐写成双冒号但为了兼容,写成单冒号;

(5).因为伪元素是CSS渲染,js获取不到。

    <style>
        .box::before{
content:飞飞;
font-size: 30px;
        }
        .box::after{
content:20;
font-size: 30px;
        }
    </style>

    <div class="box">
        的年龄是
    </div>

2.伪元素清除浮动

<style>
.contain{
    width: 500px;
    border: 1px solid #000;
}
.box{
    width: 300px;
    height: 300px;
    background-color: red;
    float: left;
}
.clearfix:after{
    content:‘‘;
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix{
    *zoom: 1;
}

</style>
    
 

<div class="contain clearfix">
<div class="box"></div>
</div>

 

伪元素的应用以及伪元素清除浮动

原文:https://www.cnblogs.com/zhaodz/p/11574044.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!