第四章:实现PC端样式


CSS Resets

消除不同浏览器之间的差异

传统的css resets

Normalize.css
A modern, HTML5-ready alternative to CSS resets

px,em,rem

  • px(1个px相当于1个像素)

  • em(相对的长度单位)

    em相对参照物为父元素的font-size
    em具有继承的特点
    一直到顶级父元素没有设置font-size时,会有一个默认的em设置,一般为:1em = 16px



    缺点:依赖父元素,容易造成混乱

  • rem

    rem相对参照物为根元素html,相对参照物固定不变,好计算



    其它特性和em相同

清除浮动

  • 添加新标签

    # 清除浮动

    缺点:添加无意义的空标签,违背了结构和表现分离的web标准的精髓,如果太多,维护困难。

  • overflow

    .container{
        overflow:auto/hidden;
    }
    
  • 浮动容器本身也浮动

    .container{
        float:left;
    }
    

    缺点:容器外部有嵌套时,也需要浮动,整个页面建立在浮动布局的基础上。



    不推荐使用

  • 使用after伪元素

    .clearfix:after{
        content:".";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }
    /*兼容 ie6/7 */ 
    .clearfix{zoom:1;}
    
    
  • 更优雅的写法

    .clearfix:before,
    /*before设置可以防止上下元素的外边距合并等。*/
    .clearfix:after{
        content:" ";
        display:table;
    }
    .clearfix:after{clear:both;}
    

页眉页脚样式

主要内容样式

你可能感兴趣的:(第四章:实现PC端样式)