1.IE6下,当float存在时,margin双倍的问题

 

解决方法:加display:inline;

例:

#content {

 

   float: left;

    width: 500px;

    padding: 10px 15px;

    margin-left: 20px;

    display:inline;

}

2.克服盒子模型的hack

原写法:

#main-div{width: 150px;border: 5px;padding: 20px;}

修正后

#main-div1{width: 150px;}#main-div1 div{border: 5px;padding: 20px;}

例如:

     
      1
     
 
     
      
       2
      
     

见图:

两者区别:1是把padding加到父层里,DIV的宽度是150+20+20

2是把PADDING加到子层里,div的宽度是150.

我习惯是用1的方法去自己计算宽高.

3,4.最小高度(最小宽度)IE不识别的解决方法

.container {width:20em;padding:0.5em;border:1px solid #000;min-height:8em;height:auto;}* html .container {height: 8em;}

5.整块元素居中对齐的方法

body{text-align: center;}#container{text-align: left;width: 960px;margin: 0 auto;}

先定义BODY中的文字整个居中text-align:center,再定义其中需要左对齐的子元素text-align:left;

6.垂直居中的CSS

#wrapper {        width:530px;        height:25px;        background:url(container.gif) no-repeat left top;        padding:0px 10px;}#wrapper p {        line-height:25px;}

适用单行文字,将height设成line-height同值

7.固定宽度下几个LI元素float横排时,超出宽度限定的解决方法

css:

ul.listing{   margin:0;   width:400px; border:1px solid #000;} ul.listing li{   list-style-type:none;   float:left;   margin:0 20px 0 0;   width:83px; border:1px solid red;}  

ul.listing1{   margin:0 0 0 -20px;   width:420px; border:1px solid #000;}

ul.listing1 li{   list-style-type:none;   float:left;   margin:0 0 0 20px;   width:83px; border:1px solid red;}

例子:

     
 
      
第一句
 
      
第二句
 
      
第三句
 
      
第四句
 
     
  
     
 
      
 
       
第一句
 
       
第二句
 
       
第三句
 
       
第四句
 
      
     

图示:

原理:

用负margin的方法

9.定位z-index

z-index起作用的前提是,必须有position:absolute, position:fixed or position:relative这三种中的任一种属性.

css:

.relativeblock1 {        position:relative;        width:200px;        height:80px;        z-index:51;}.absoluteblock1 {        position:absolute;        left:10px;        top:90px;        width:40px;        height:40px;        z-index:1;}.relativeblock2 {        position:relative;        width:200px;        height:80px;        z-index:50;}例:

     
        
      
     
     
见图:

按CSS来说,relativeblock2应该会盖上absoluteblock1,但实际正相反,是因为

absoluteblock1的优先级别高于relativeblock2,他继承了absoluteblock1的z-index,虽然他自身的z-index值为1,但实际为51.1,当然高于relativeblock2的z-index:50.

10.相对定位relative和绝对定位absolute的区别

 CSS:

#redSquare{position: relative;bottom: 40px;right: 40px;}图例:

11.绝对定位的应用

css:

#hang_tab {position: absolute;top: 7px;left: 0px;width: 157px;height: 93px;}

图例:

13.正确消除浮动(float)的方法

css:

#container:after{        content: ".";        display: block;        height: 0;        clear: both;        visibility: hidden;}#container{display: inline-block;}* html #container{height: 1%;}#container{display: block;}

例图:

经实现,用:after属性是为了消除float浮动(针对FIREFOX使用)时父层无法正确识别高度，复杂且不易记不，优点是不需要再写
     
这样一个空层来撑起高度。

15.如何处理圆角

最简单的方法是用一张足够大的图，然后我该圆角标注

html:

     
  
      
beautifully-encapsulated paragraph
  
      
     

css:

.roundBox {  background:transparent url(roundBox.gif) no-repeat top left;  width:340px;  padding:20px;}.roundBox .boxBottom {  background:white url(roundBox.gif) no-repeat bottom left;  font-size:1px;  line-height:1px;  height:14px;  margin:0 -20px -20px -20px;}

实例：

17.用label标签做表单（非table）

精华html：

     
           
      Name:     
      
     

.....

css:

label {        float: left;        text-align: right;        margin-right: 15px;        width: 100px;}

实例：

另一个：

20.用有背景图的hr做分隔线,适用所有浏览器的方法.因为hr自身的样式是一根黑线,所以让他自身的样式 隐藏,然后新写一个class="hr"，让hr听他父层的话 经验证这样写无意义,对于目前中国的网站来说,极少用到HR. ========================================================= The CSS Class ====