第四章：实现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相同

清除浮动

• 添加新标签

  <div class="container">
      <h1 style="float:left;"></h1>
      <p style="float:left;"></p>
      
      # 清除浮动
      <div style="clear:both;"></div>
  </div>
  

  缺点：添加无意义的空标签，违背了结构和表现分离的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;}
  
  <div class="container clearfix"></div>
  

• 更优雅的写法

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

页眉页脚样式

主要内容样式