zoukankan      html  css  js  c++  java
  • .clearfix的用法

    /*用来修正ie6*/
    .clearfix{
    *zoom:1;
    }
    .clearfix:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    overflow:hidden;
    }

    clearfix用在父元素上。But .clearfix:before{}的作用是什么呢?可以不写吗?

    .clearfix:after { 
        visibility: hidden; 
        display: block; 
        font-size: 0; 
        content: " "; 
        clear: both; 
        height: 0; 
    } 
    .clearfix{*zoom:1;} 
     
    但是对于很多同学这种优化程度代码还是不够给力,clearfix 发展到现在的两个终极版。
    终极版一:
    .clearfix:after { 
        content:"200B"; 
        display:block; 
        height:0; 
        clear:both; 
    } 
    .clearfix {*zoom:1;}/*IE/7/6*/ 
     
    解释下:content:"200B";这个参数,Unicode字符里有一个“零宽度空格”,即 U+200B,代替原来的“.”,可以缩减代码量。而且不再使用visibility:hidden。
    终极版二:
    .clearfix:before,.clearfix:after{ 
        content:""; 
        display:table; 
    } 
    .clearfix:after{clear:both;} 
    .clearfix{ 
        *zoom:1;/*IE/7/6*/ 
    } 

    由此可以看到,.clearfix:before{}的用法可能是指为了content:"";而存在吧?

  • 相关阅读:
    SmartJS 系列规划分享和背景介绍
    SmartJS 第一期(0.1)发布
    让文档和Demo生成更加简单和强大
    SmartDoc(YUIDoc) 注释编写
    smartjs
    smartjs
    smartjs 0.3 DataManager 发布&介绍
    smartjs 0.2 OOP讲解
    smartjs 0.2 OOP讲解
    smartjs 0.2发布
  • 原文地址:https://www.cnblogs.com/nicefuting/p/5311645.html
Copyright © 2011-2022 走看看