zoukankan      html  css  js  c++  java
  • :after伪类+content内容生成经典应用举例

    一、简单说说content内容生成

    content内容生成就是通过content属性生成内容,content属性早在CSS2.1的时候就被引入了,可以使用:before以 及:after伪元素生成内容。此特性目前已被大部分的浏览器支持: (Firefox 1.5+, Safari 3.5+, IE 8+, Opera 9.2+, Chrome 0.2+)。另外,目前Opera 9.5+ 和 Safari 4已经支持所有元素的content属性,而不仅仅是:before和:after伪元素。

    例如下面这个简单的例子:

    h2:before {
       content: "我是额外文字!";
    }
    

    此段样式的作用是在每个h2标签的前面添加文字“我是额外文字”。
    您可以狠狠地点击这里:content最基本使用Demo

    content内容生成有非常多的特别的技术和应用,具体可以参见我之前写的“CSS content内容生成技术以及应用”一文,但是,那里面介绍的些技术,虽然可以给我们带来看到美女时类似的感觉,但是,目前而言,都是些没有什么实用价值的技术。

    但是,实际上,:after伪类+content内容生成却是有着非常有用实用的作用的,本文就将展示这些实用的应用。

    二、:after伪类+content 清除浮动的影响

    这个技巧我想很多同行都用过,所以,这里仅简单介绍下。

    有点经验的同行应该知道,一般不含包裹属性的div内部有浮动元素的话,那么这个浮动元素会让此div的高度塌陷。如下例子:

    .box{padding:10px; background:gray;}
    .l{float:left;}
    
    <div class="box">
    	<img class="l" src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
    </div>
    

    结果如下图:
    浮动下的div高度塌陷 张鑫旭-鑫空间-鑫生活

    正如文章开始提到的,IE8+和其他所有现代浏览器都支持:after+content,所以,对于这些浏览器我们可以使用:after+content方法清除浮动造成的塌陷。使用如下:

    .fix:after{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}

    这样就可以让IE8+和其他浏览器清除浮动破坏带来的塌陷问题了。至于暂不支持:after伪类的IE6/IE7,我们可以使用IE私有的zoom缩放属性让div远离浮动的破坏。故,双剑合璧下就是:

    .fix{*zoom:1;}
    .fix:after{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}
    

    这样子,就可以实现目前所有浏览器的清除浮动影响的方法了。

    虽然,清除浮动影响方法很多,添加包裹属性的元素,例如:position:absolute; display:inline-block; float:left; overflow:hidden等,但是,这些所有的方法都有局限性。我个人觉得:after伪类+zoom是目前最使用的清除浮动元素影响的方法。且不 产生多余的标签,所以,我一直用它。下图为应用上面fix样式后的效果,截自Firefox3.6浏览器:
    after伪类+content后清除浮动效果图 张鑫旭-鑫空间-鑫生活

    您可以狠狠地点击这里::after伪类+content清除浮动影响demo

    三、:after伪类+content 让大小不固定图片垂直居中

    关于让大小不固定的图片垂直居中,我之前写过篇研究性的文章“大小不固定的图片、多行文字的水平垂直居中”,里面详细展示了多种图片水平垂直居中方法,各个方法的好坏你自己评判。

    这里介绍的:after伪类+content实现的图片垂直居中方法是我目前为止个人觉得最好,最使用的方法。ok,测试CSS代码如下(绿色部分为功能相关CSS代码):

    .pic_box{300px; height:300px; background-color:#beceeb; font-size:0; *font-size:200px; text-align:center;}
    .pic_box img{vertical-align:middle;}
    .pic_box:after{display:inline-block; 0; height:100%; content:"center"; vertical-align:middle; overflow:hidden;}
    

    相应的HTML代码如下:

    <div class="pic_box">
        <img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
    </div>
    

    结果IE7下的效果如下:
    IE7下after伪类和content实现图片垂直居中效果图 张鑫旭-鑫空间-鑫生活

    与清除浮动影响类似,IE6/7不支持:after伪类,我们可以用另外的方法让图片垂直居中,例如font-size方法,设一个比较大点的字体 大小,IE6/7就可以实现图片垂直对齐了,至于其他浏览器,就用:after伪类+content内容生成一个vertical- align:middle属性的元素就可以了。这是我对“大小不固定的图片、多行文字的水平垂直居中”一文中提到的最后的方法的又一次提升。

    目前的测试结果是:所有浏览器都垂直居中,不过Chrome浏览器的水平居中貌似左边偏移了点,这是因为Chrome浏览器font-size:0,不能消除空格产生的水平距离的原因。这或许是唯一点瑕疵吧。

    您可以狠狠地点击这里::after伪类+content图片垂直居中demo

    四、结语

    方法都是人想出来的。
    例如让大小不固定图片垂直居中,我一开始是使用淘宝前端想出的的diaplay:table-cell + font-size方法,但是发现不支持浮动等缺点,开始想新方法;
    后来发现两个vertical-align:middle属性的图片靠在一起是会垂直对齐的,于是自己就将其中一张图片宽度设成1像素,高度100%,且本身为透明图片,于是实现了利用1像素宽度的辅助图片实现图片垂直居中对齐;
    后来发现不一定是图片,只要是inline-block属性或是类似inline-block属性的元素就可以了,于是后来就使用span或是i标签等代替1像素宽的透明图片,于是节约了一次图片链接请求;
    再后来,又发现宽度不一定是1像素,就是设成0,也是可以的,于是,就不用担心辅助元素错行的问题了;
    再到现在,利用content内容生成技术,0宽度的实体标签用:after伪类+content生成,这样,就避免了在页面上写入辅助效果的空标签,同时借助了淘宝前端多年之前发现的font-size居中方法。

    虽说不上什么优秀的方法,也可能早有高人知道了并使用了此方法,但是,毕竟见证了自己的进步,还是满心欣慰的。

    :after伪类+content潜力还有很多很多的,希望可以与诸位同行们一起不断思考,不断想出更实际更优秀的一些方法与解决方案,一同进步一同成长。就这些,资质尚浅,文章如有表述不准确或是冒犯之处还请见谅,欢迎指正。希望本文内容能对您的学习有所帮助。

  • 相关阅读:
    codevs 1115 开心的金明
    POJ 1125 Stockbroker Grapevine
    POJ 2421 constructing roads
    codevs 1390 回文平方数 USACO
    codevs 1131 统计单词数 2011年NOIP全国联赛普及组
    codevs 1313 质因数分解
    洛谷 绕钉子的长绳子
    洛谷 P1276 校门外的树(增强版)
    codevs 2627 村村通
    codevs 1191 数轴染色
  • 原文地址:https://www.cnblogs.com/screw/p/5151357.html
Copyright © 2011-2022 走看看