网页布局前的一些前置工作网页布局前的一些前置工作

浏览器样式重置(CSS Reset)

• 为什么要重置浏览器样式?

  因为不同的浏览器（ie,firefox,chrome等）,不同的核心对CSS的解析效果会有不同的呈现,和自己所期望的效果有所差异.
  如浏览器就会自己给body加上一条外边距(margin)的属性等,但有时候我们便不需要它,所以我们要重置浏览器样式.

• 如何重置浏览器样式?

  CSS reset 在写的时候要慎重考虑,因为它有些元素会破坏浏览器的兼容性.
  但已经有前辈为我们总结了,顺风车.
  点击 normalize 进去,根据自己的需要进行link链接就行了.

CSS的一些前置工作

• 为什么要做css前置工作?

  因为我们的网页越复杂,它所重复用到的一些样式就特别多,如居中,浮动,和清除浮动等经常用到的样式我们希望在布局工作中能够轻松一些所以我们就可以对那些经常使用的样式把他们归到一个类中.

• 我总结了我一些经常用到的,记录在下面:

  • 保持一定宽度并居中
    

    1 2 3 4

    display: block; max-width: 1080px; margin: 0 auto; }

  • 向左(向右)浮动

    1 2	float: left; }

    1 2	float: right; }

  • 对子元素清除浮动

    1 2 3 4 5

    .clear-float:before { content: " "; display: block; clear: both; }

  • 元素所占比例设置(类似格栅)

    1 2 3 4 5 6 7 8 9 10 11 12

    .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9 { display: block; position: relative; min-height: 1px; }

     
    1
    2
    width: 10%;
    }
    
    
    1
    2
    width: 20%;
    }
    
    
    1
    2
    width: 30%;
    }
    
    
    **以下雷同省略...**
    

待补充…