10种有用的CSS技巧

 

1. 重置浏览器的默认设置

          首先将以下代码加到你的全局css文件中：

/* 1.Reset browser defaults then reset the browser font size */
            body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,
            blockquote,th,td  { margin : 0 ;  padding : 0 ;   }
            table  {  border-collapse : collapse ;  border-spacing : 0 ;   }
            fieldset,img  {  border : 0 ;   }
            address,caption,cite,code,dfn,em,strong,th,var  {  font-style : normal ;  font-weight : normal ;   }
            ol,ul  {  list-style : none ;   }
            caption,th  {  text-align : left ;   }
            h1,h2,h3,h4,h5,h6  {  font-size : 100% ;  font-weight : normal ;   }
            q:before,q:after  {  content : “ ;   }
            abbr,acronym  {  border : 0 ;   }
            html  { font-size :  62.5% ; }

 

然后，我们把字体大小font-size设为10px如：

 

html  { font-size :  62.5% ; }

 

这样我们就比较容易的通过em单位来设置页面字体的大小了，e.g

 

Code
p {font-size: 1.2em;}/* the same as 12px*/
h1 {font-size: 2em;}/* the same as 20px */

 

     2.水平居中（仅限固定宽度）

          

     这个我想大家都会知道的，如：

    

div#container  { margin :  0 auto ; }

 

 

     3.充分利用position中的absolute和relatively

 

     4.居中，还是居中（纵横通杀）

 

     

div.popup  {  height : 400px ;  width : 500px ;  position :  absolute ;  top :  50% ;  left :  50% ; }
div.popup  {  margin-top :  -200px ;  margin-left :  -250px ; }

 

     Memo：

               ·必须指定width和height的固定值；

               ·position值为absolute；

               ·分别指定top与left为50%；

               ·设置margin-top和margin-left分别height和width的负值的一半，也可以简写为：margin:-200px 0 0 -250px;

 

     5.CSS也能复用

 

      建立你的global css rules，充分在任何可以用到的页面用它吧，e.g

     

.left  { float :  left ; }
.right  { float :  right ; }
img .left  {  border : 2px solid #aaaaaa ;  margin :  0 10px 0 0 ; }
img .right  {  border : 2px solid #aaaaaa ;  margin :  0 0 0 10px ;  padding :  1px ; }

 

 

     6.IE6的margin bug

     

     当你设置div元素的float属性并指定了margin-left属性，在IE6或以下版本浏览的时候你可以会太跌眼镜，IE6怎么给你愉愉地加了margin的值呢？

     解决方法：把div设为内联的就行了 e.g

 

     

div  { float : left ; margin : 40px ; display : inline ; }

 

 

     7.简单的导航菜单

     xhtml:

     

 

< div  id ="navbar" >
         < ul >
         < li >< a  href =http://www.peakflowdesign.com > Peakflow Design a > li >
         < li >< a  href =http://www.google.com > Google a > li >
         < li >< a  href ="http://zenhabits.net/" > Zen Habits a > li >
         ul >
         div >

 

     CSS:

          

            #navbar ul li  { display : inline ; margin : 0 10px 0 0 ; }
            #navbar ul li a  { color :  #333 ; display : block ; float : left ; padding : 5px ; }
            #navbar ul li a:hover  { background : #eee ; color : black ; }

 

 

     8. 尽量减少使用table来布局

 

     9.页面元素可以有多个class, e.g

 

     

< div  class ="regColor bigSize" > I am a reg color of font width big size! div >

 

 

     orginal article:http://www.peakflowdesign.com/design/10-useful-css-tricks-to-conquer-the-world/