百变鹏仔-专注前端行业精选

伪元素 before、after的介绍和元素隐藏不可见的两种方式区别

作者：鹏仔先生日期：2020-06-02 14:37:01浏览：2528分类：CSS

伪元素

1.元素 before

在父元素中所有子元素的开头添加一个伪元素

eg:

.box:before{
    content: "SharedBlog"; 或 content: url(img/1.jpg);
}

2.元素 after

在父元素中所有子元素的最后添加一个伪元素

eg:

.box:after{
    content: "百变鹏仔";
    display: block;
    width: 500px;
    height: 300px;
}

注：

① 伪元素是内联元素；

② 无论伪元素的内容是否为空，content都必须添加，不能省略；

③ :after 常用来清除浮动，解决高度塌陷问题。

元素隐藏不可见的两种方式的区别

（display: none; 和 visibility: hidden; 的区别）

① display: none; 元素隐藏不可见，位置不保留（看不见，摸不着）；

② visibility: hidden; 元素隐藏不可见，位置保留（看不见，摸得着）。

前端 css

手机扫码访问

猜你还喜欢