CSS3学习笔记-03-CSS3伪元素

前言

伪元素:顾名思义,就是一个假的元素,是由css所写的一个元素
内容 :before 在前面添加一个元素
ofter 在后面添加一个元素
注意:添加的伪元素默认是一个行内元素,不能设置宽度和高度,且伪元素是不可以被用户选中复制的,但是开发者调试的里面可以哈哈，
伪元素里面的content必须加
伪元素最好的运用就是消除浮动，后面会详细讲解消除浮动是什么

详情:before

before就是在元素前面添加一个元素,比如我在div前面添加一个元素,伪元素的写法格式为::before ,当然也可以是一个冒号,因为ie这玩意这么搞。ie就是来恶心人的，终于不更新了。。。。。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div::before{
            content: "我来帮你";
            color: red;
        }
    </style>
</head>

<body>
    <div>我孤军奋战</div>
</body>

</html>

结果如下，可以看到我来帮你是不能被复制的

当然你也可以在调试器里面看到这个元素

有的浏览器不给你看，但是也可以在style样式里面看到，还可以在里面复制他的内容
注意里面的内容如果没有就用下面的,直接写成空.

 div::before{
            content: "";
        }

绝对不能不写,不写就不能创建这个元素。还有一点注意就是
这个元素是行内元素，但是可以调整为行内块或者块状元素做一些操作。

：:after

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div::before{
            content: "我在前面看戏";
        }
        div::after{
            content: "我在后面背刺";
        }
    </style>
</head>

<body>
    <div>中间人最多也最暖和</div>
</body>

</html>

after的用法和before差不多

可以看到都被添加上了,那我我要把它转换成块元素玩玩

转换为块元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div::before{
            content: "我在前面看戏";
            display: block;
            width: 100px;
            background-color: blue;
            border: 2px solid red;
        }
        div::after{
            content: "我在后面背刺";
            color: brown;
        }
    </style>
</head>

<body>
    <div>中间人最多也最暖和</div>
</body>

</html>

效果如下

可以看到,这个元素可以被我们随意操作,当成一个确实存在的元素去玩就好。

作用

清除浮动是他最大的作用之一，可以很方便的就可以为一个父元素清除浮动
一般我们在父元素里面添加两个浮动的子元素时，我们的父元素如果没有设置高度，那么就默认高度是0，就是说父元素处在标准流，如下

总结

伪元素为我们提供更方便的添加一个有需要的元素的方法，没必要专门在html再添加元素以满足我们的需求，没必要。所有伪元素也是很常用的。特别是在清除浮动时，很好用。
先准备两个盒子

 <section>
        <div></div>
        <div></div>
    </section>

然后为两个div盒子添加高度和宽度

section div{
            float: left;
            width: 200px;
            height: 200px;
        }

然后分别给这两个盒子添加背景色为cyan和red

section div:last-child{
            background-color: red;
        }
section div:first-child{
            background-color: cyan;
        }

再为父元素添加背景色为brown

section{
            background-color: brown;
        }

结果我们看不到父元素的颜色

只有两个子元素,为什么呢,我们打开调试工具看看
父元素的高度是0,为什么?
子元素浮动了,脱离的标准流,但是父元素还在标准流,所以父元素的高度不会随浮动的子元素而变化。儿子们都飞到天生去了，作为父亲没有翅膀，飞出去管不了了。。。。
但是，父亲有一把武器叫飞机，就是溢出隐藏，他的特性可以直接让他的高度在回来，进而限制孩子，自己的高度也随着子元素的高度去变化。
当我们给父元素加上

父元素的高度就回来了

好了,那么问题来了。不是说好了是伪元素了，这跟伪元素有关系吗？？
没有关系，但是其实这是一个为了解决浮动问题迫不得已的方法，因为如果有的子元素就是需要溢出，而且在标准流的子元素，那么如果添加这个溢出隐藏，就会砍掉那些溢出的元素。但是，我们可以借助消除浮动的方法去消除这个浮动，那就是在父元素里面的最后一个子元素后面在添加一个子元素，然后给最后一个子元素加上clear：both；等，就可以消除浮动。
比如我在最后面添加一个div，添加行内元素，上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        section{
            background-color: brown;
            overflow: hidden;
        }
        section div{
            float: left;
            width: 200px;
            height: 200px;
        }
        section div:nth-child(2){
            background-color: red;
        }
        section div:first-child{
            background-color: cyan;
        }
        section div:last-child{
            height: 0;
            width: 0;
            clear: both;
        }
    </style>
</head>

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

</html>

我们也可以消除浮动
那么就有一个问题产生了,以后每一次要消除浮动,还要去html里面加一个元素,小工程还好,大工程就恶心了。
所有这里的伪元素就有很大的用处啦，只要在要清除浮动的父元素后面添加一个：：after，然后把它转换为块状元素，最后clear一下，就更方便了。
after代码如下

.clearfix::after{
            content: "";
            display: block;
            height: 0;
            font-size: 0;
            clear: both;
        }

这是写的一个类，就是说以后如果要消除浮动,直接给父元素加上这个类,就好了。效果最好，也最方便。如下图
好了,伪元素就复习到这里,越来越精彩了