您现在的位置是:首页 > 网站制作 > CSS3|Html5CSS3|Html5

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

胜于蓝2019-07-30【CSS3|Html5】人已围观

简介伪元素1.元素 before 在父元素中所有子元素的开头添加一个伪元素 eg: .box:before{ content: "SharedBlog"; 或 content: url(img/1.jpg);}2.元素 after 在父元

伪元素

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; 元素隐藏不可见,位置保留(看不见,摸得着)。

Tags:

很赞哦! ()

文章评论

站点信息

  • 建站时间:2018-10-24
  • 网站程序:帝国CMS7.5
  • 主题模板《今夕何夕》
  • 文章统计495篇文章
  • 标签管理标签云
  • 统计数据百度统计
  • 微信公众号:扫描二维码,关注我们
[!--temp.jinyong--]