您现在的位置是：网站首页> 编程资料编程资料

详细解读CSS中的伪类afterCSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

2023-10-23 170人已围观

简介 这篇文章主要介绍了CSS中的伪类after,是CSS入门学习中的基础知识,需要的朋友可以参考下


1. 引子

前段时间学习 web 布局的时候，因为要用浮动 float 属性，所以就顺理成章地碰到了清除浮动 clear 属性。教学的案例中是用新建一个空的 div 标签的方式来清除浮动的，主要代码如下：

CSS Code复制内容到剪贴板
  1. "mainBox">   
  2.     "leftBox">
  
  •     "rightBox">
    •   
  •     "clear">
    •   
    •   
  •   
  • .mainBox   
  • {   
  •     width:960px;   
  •     margin:0 auto;   
  •     background-color:#CFF;   
  •     overflow:visible;   
  • }   
  • .leftBox   
  • {   
  •     width:740px;   
  •     height:300px;   
  •     background-color:#C9F;   
  •     float:left;   
  • }   
  • .rightBox   
  • {   
  •     width:210px;   
  •     height:300px;   
  •     background-color:#FCF;   
  •     float:rightright;   
  • }   
  • .clear  
  • {   
  •     clear:both;   
  •     height:0;/*解决IE6下有高度的问题*/  
  •     overflow:hidden;   
  • }  

    • 看到之后，想到以前见到过有用 css 伪类 after 来进行清除浮动的方式。记不太清了，于是写成了如下的情况：

    CSS Code复制内容到剪贴板
    1. "mainBox">   
    2.     "leftBox">
      
  •     "rightBox">
    •   
  •   
  •   
  • .mainBox{   
  •     width:960px;   
  •     background-color:#CFF;   
  •     margin:0 auto;   
  •     }   
  • .leftBox{   
  •     width:740px;   
  •     height:300px;   
  •     background-color:#C9F;   
  •     float:left;   
  • }   
  • .rightBox{   
  •     width:210px;   
  •     height:300px;   
  •     background-color:#FCF;   
  •     float:rightright;   
  • }   
  • .rightBox:after{   
  •     clear:both;   
  •     content:".";   
  •     visibility:hidden;   
  •     display:block;   
  •     height:0;   
  •     overflow:hidden;   
  • }  

    • 悲剧发生了，mainBox 中的 #CFF 颜色并没有出现在 leftBox 和 rightBox 中间，说明上述的写法有地方不对了。询问了伟大的谷歌之后才发现，css 的 after 伪类应该写在 mainBox 之后，即：

    CSS Code复制内容到剪贴板
    1. .mainBox:after{   
    2.     clear:both;   
    3.     content:".";   
    4.     visibility:hidden;   
    5.     display:block;   
    6.     height:0;   
    7.     overflow:hidden;   
    8. }  

        P.S.
        1. 现在回过头来看上述方法，其实上述方法所谓的清除浮动，都是将没有设置高度的.mainBox的高度撑起来，从而使得.mainBox的弟元素能直接跟在.mainBox后面。而不会因为.mainBox高度塌陷而被隐藏在.mainBox内部浮动的子元素下。防止高度塌陷还可以使用创建一个 BFC 的方法（如overflow:hidden）来进行。
        2. 如果.mainBox设置了高度，且大于或等于其浮动的子元素，那么不用这样的清除浮动的方式，.mainBox的弟元素也不会受到.mainBox内部浮动子元素的影响。
        3. 若果不考虑.mainBox的高度塌陷问题，直接在其弟元素处设置clear属性即可。

    2. 关于 after 的思考

    w3school 中关于 after 伪类的介绍如下：

        定义和用法
        :after 选择器在被选元素的内容后面插入内容。
        请使用 content 属性来

    提示： 本文由神整理自网络，如有侵权请联系本站删除！
    本站声明：
    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

    上一篇：CSS中的选择符实际使用指南

    下一篇：一波CSS制作的三角形和圆形小按钮示例利用CSS3实现文本框的清除按钮相关的一些效果用CSS3写的模仿iPhone中的返回按钮HTML5+CSS3实现的音量调节旋转按钮动态特效源码

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网