css技巧总结(未完待续)

1.多列等高问题---padding补偿法 

  解决办法有：可以使用javascript，也可以使用边框模拟法。这里就介绍一种负边距的办法。 

<div id="content">
       <div class="first"></div>
       <div class="second"></div>
</div>

<script>
#content{
    overflow: hidden;
}
.first,.second{
    padding-bottom: 500px;
    margin-bottom: -500px;
}
</script>

 

2.纯css实现下拉列表

   思路：使子菜单为绝对行为，并且使其移除页面，这样子菜单是不显示的，然后定义一个hover伪类，改变子菜单的left值，使其出现在页面中。

   

<ul  class="drop">
    <li><a href="#">首    页</a></li>
    <li><a href="#">概    况</a></li>
    <li><a href="#">项目介绍</a></li>
    <li>
           <a href="#">科研人员</a>
        <ul>
            <li><a href="#">老师</a></li>
                    <li><a href="#">博士</a></li>
            <li><a href="#">硕士</a></li>
         </ul>
     </li>
     <li><a href="#">报考指南</a></li>
    <li><a href="#">联系我们</a></li> 
</ul>    

<script type="text/css">
     ul.drop, ul.drop ul{
         margin: 0;
         padding:0;
         list-style:none; 
     }
     ul.drop: after{
         content:"";
         display:block;
         clear: both;
         visility:hidden;
         height: 0;
    }
    ul.drop li{
          float: left;
          6em;
    }
    ul.drop li ul{
         position: absolute;
         left: -999px;               //关键
          6em;
    }
    ul.drop li:hover ul{
         left: auto;                   //代码的关键地方
   }

</script>

 3.圆顶角技术

     3.1使用背景图片

<div class="box">
    <h2>hello</h2>
    <div class="content">
        <p>要加油，时间就是金钱，抓住现在非常重要！</p>
        <p>要加油，时间就是金钱，抓住现在非常重要！</p>
        <p>要加油，时间就是金钱，抓住现在非常重要！</p>
    </div>
</div>

.box{
    background: url(img/tile2.gif) repeat-y; 
}
.box h2{
    background: url(img/top2.gif) no-repeat top left;
    padding: 2px 200px;
}
.box .content{ 
       background: url(img/bottom2.gif) no-repeat bottom left;
       padding-bottom: 20px; 
}
.content p{
    padding: 2px 10px;
}

 3.2.纯css实现圆顶角---细快组合，模拟圆角 

<div class="box">  
    <b class="b1"></b>
    <b class="b2"></b>
    <b class="b3"></b>
    <b class="b4"></b>
    <div class="content">
        <p>hello world!</p><p>hello world!</p>
                <p>hello world!</p><p>hello world!</p>
    </div>
    <b class="b4"></b>
    <b class="b3"></b>
    <b class="b2"></b>
    <b class="b1"></b>
</div>

.b1,b2,b3,b4{
      display: block;
      height: 1px;
      overflow: hidden;
      color:#96C2F1;
}
.b1{
     margin:0 5px;
}
.b2{
     margin:0 3px;
     border-left:1px solid;border-right:1px solid;
}
.b3{
     margin:0 2px;
     border-left:1px solid;border-right:1px solid;
}
.b4{
     margin:0 1px;
     border-left:1px solid;border-right:1px solid;
}
.content{
      border-left:1px solid;border-right:1px solid;
}

4.绝对底部        

<div id="wrap">
    <div id="main" class="clearfix">
          <div id="content"> </div>
          <div id="side"> </div>
     </div>
</div>

<div id="footer">
</div>

#main {padding-bottom: 150px;}  /* 必须使用和footer相同的高度 */
#footer {position: relative;
    margin-top: -150px; /* footer高度的负值 */
    height: 150px;
    clear:both;
}

5.清楚浮动的方法

   5.1、添加空标签   

<div class="box">  
    <img src="img/tang.jpg" width="200px" height="200px" /> 
    <p>some textsome textsome </p>
    <div class="clear"></div>
</div>

.clear{
    clear: both;
}

   缺点：造成标签的浪费

  5.2、使用afer伪类  

<div class="box  clear">  
    <img src="img/tang.jpg" width="200px" height="200px" /> 
    <p>some textsome textsome </p> 
</div>

.clear:after{
     display:block;
     content:"";
     height:0;
     visibility: hidden;
     clear: both;
}
.clear{
    display: inline-block;
}
/*Holly Hack targets IE win only\*/
*html .clear{
    height:1%;
}
.clear{
    display: block;
}
/*end holly Hack*/

  5.3、触发BFC（block formatting context） 

<div class="box">  
    <img src="img/tang.jpg" width="200px" height="200px" /> 
    <p>some textsome textsome </p>
    <div class="clear"></div>
</div>

/*  using overflow  8/
.box{
    overflow: hidden;
    zoom: 1;    //加入低版本的IE
}  
/*也可使用float来触发BFC，但是后面存在后遗症*/
.box{
   float: left;
} 

6. 关于布局的总结

   6.1、两列定宽的布局   

<div id="container">
    <div id="mainBox"> 
        <p>hello</p> <p>hello</p> <p>hello</p> 
    </div>
    <div id="sideBox">
        <p>world</p>
    </div>
</div>

#container{
     900px;
        background: red;
    overflow: hidden;
}
#mainBox{
    float: left; 
    background:#555; 
     600px;
}
#sideBox{
    float: right;
     300px;
    background: yellow;
} 

   6.2、两列自适应    

<div id="container">
    <div id="mainBox"> 
        <p>hello</p> <p>hello</p> <p>hello</p> 
    </div>
    <div id="sideBox">
        <p>world</p>
    </div>
</div>

#container{
     900px;
    background: red;
    overflow: hidden;
}
#mainBox{
    float: left; 
    background:#555; 
     70%;
}
#sideBox{
    float: right;
     30%;
    background: yellow;
} 

   与6.1相比也就是将width设置为百分数

   6.3、单列固定，单列自适应 （参考 详解）:使用绝对定位，缺点绝对定位无法撑开父容器的高度。 

<div id="container">
    <div id="mainBox"> 
        <p>hello</p>  
    </div>
    <div id="sideBox">
        <p>world</p>
    </div>
</div>

#container{
    position: relative; 
    background: red;
    overflow: hidden;
}
#mainBox{  
    background:#555;
    margin-right: 200px;
}
#sideBox{
    position: absolute;
    top: 0; right: 0;
     200px;
    background: yellow; 
} 

    该实例使用了固定部分使用绝对定位，自适应元素使用margin。还可以使用float固定列，margin自适应列。

  6.4、单列固定，单列自适应：float+margin 

<div id="content"> 
    <div id="left">
        <div class="aa">left</div>
    </div>
    <div id="right">right</div>    
</div>

<style>
    #left{
        float: left;
        width: 100%; 
        background: red;
        
    }
    .aa{
        margin-right: 210px;
    }
    #right{
        float: left;
        width: 200px;
        margin-left: -200px;
        background: green;
    }
</style>

<div id="content"> 
    <div id="left">
        <div class="aa">left</div>
    </div>
    <div id="right">right</div>    
</div>

<style>
     #left{
        float: left;
        width: 100%; 
        background: red;
        margin-left: -210px;
    }
    .aa{
        margin-left: 210px;
    }
    #right{
        float: left;
        width: 200px; 
        background: green;
    }
</style>

   6.5、三列布局，两列定宽，一列自适应     

<div id="container">
    <div class="mainBox">
        <div class="content"></div>
    </div>
    <div class="sub"></div>
    <div class="slide"></div>
</div>

#container{
    float: left;
     100%;
}

.content{
    margin: 0 210px 0 310px;  
}

#sub{
    float: left;
     300px;
    margin-left: 100%;
}
#slide{
   float: left;
   margin-left: -200px;
    200px;
}

　　

 7.使浮动元素居中 

<div id="nav">
    <ul>
         <li><a href="#">a</li>
          <li><a href="#">a</li>
          <li><a href="#">a</li>
    </ul>
</div>

<script>
 #nav{
    float: left;
    position:relative;
    left:50%;
}
#nav ul{
   position: relative;
   left: -50%;
   list-style: none;
}

#nav ul li{
   float: left;
  position: relative;
}

---

8.自适应宽度的按钮   参见  1

<a href="javascript:void(0);" class="btn1"><cite>inline-block方法</cite></a>

.btn1 {
    display: inline - block;
    background: url(.. / image / sina_gray_btn.png) no - repeat left top;
    padding - left: 3px;
    color: #000000;
    font - size: 12px;
    text - decoration: none;
}
.btn1 cite {
    display: block;
    line - height: 26px;
    padding: 0 13px 0 10px;
    background: url(.. / image / sina_gray_btn.png) no - repeat right top;
}

<a href="javascript:void(0);" class="btn1"><cite>float方法</cite></a>

.btn2 {
    float: left;
    background: url(.. / image / sina_gray_btn.png) no - repeat left top;
    padding - left: 3px;
    color: #000000;
    font - size: 12px;
    text - decoration: none;
}
.btn2 cite {
    display: block;
    line - height: 26px;
    padding: 0 13px 0 10px;
    background: url(.. / image / sina_gray_btn.png) no - repeat right top;
}