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

伪元素Xp5胜于蓝|优秀个人博客

1.元素 beforeXp5胜于蓝|优秀个人博客

    在父元素中所有子元素的开头添加一个伪元素Xp5胜于蓝|优秀个人博客

    eg:Xp5胜于蓝|优秀个人博客

 Xp5胜于蓝|优秀个人博客

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

    在父元素中所有子元素的最后添加一个伪元素Xp5胜于蓝|优秀个人博客

    eg:Xp5胜于蓝|优秀个人博客

 Xp5胜于蓝|优秀个人博客

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

        ① 伪元素是内联元素；Xp5胜于蓝|优秀个人博客

        ② 无论伪元素的内容是否为空，content都必须添加，不能省略；Xp5胜于蓝|优秀个人博客

        ③ :after 常用来清除浮动，解决高度塌陷问题。Xp5胜于蓝|优秀个人博客

 Xp5胜于蓝|优秀个人博客

元素隐藏不可见的两种方式的区别Xp5胜于蓝|优秀个人博客

    （display: none; 和 visibility: hidden; 的区别）Xp5胜于蓝|优秀个人博客

    ① display: none; 元素隐藏不可见，位置不保留（看不见，摸不着）；Xp5胜于蓝|优秀个人博客

    ② visibility: hidden; 元素隐藏不可见，位置保留（看不见，摸得着）。Xp5胜于蓝|优秀个人博客

Tags：

转载：【免责声明】：转载自其他平台或媒体的文章，本站将注明来源及作者，但不对所包含内容的准确性、可靠性或网站性提供任何明示或暗示的保证，仅做参考！如有侵权，请联系本站并提供相关证明，本站将依据著作权人意见删除该文，并不承担任何责任！
如果您认为本文侵犯了您的版权信息，请与我们联系修正或删除。感谢您对胜于蓝个人博客网站平台的认可，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源胜于蓝个人博客”。/web/html/80.html

扫描关注胜于蓝微信|公众号，第一时间获取网站模板更新动态

本文地址：/web/html/80.html

很赞哦！ ()