亚洲无码Aⅴ,视频1页精品,欧美系列一区二区,曰韩色999

老話長談，css的不固定適應(yīng)布局   不管是面試還是在平時的工作中，這樣的布局
形式一直都在用著，很常見，所以今天我就拿出來在嘮叨一下， 既是給自己一個備忘存儲，
也是一個學(xué)習(xí)鞏固的參考，知道大家都會，還是要記憶一下，不為其他，就為打好基礎(chǔ)。

話說太多， 直接上代碼，一看就能明白。

方法多種， 你有新的方法可以補充說明，在此感謝！！

一、左邊布局固定，右邊自適應(yīng)的布局

  *{ margin:0; padding:0}

   .whole{ width:100%;}

  <div class="whole">
        <p>自適應(yīng)測試</p>
           <div class="left">固定左側(cè) 300px</div>
        <div class="right">右側(cè)自適應(yīng)</div>
 </div>

 方法1： 左側(cè)用float浮動，給固定寬度，右側(cè) 左邊距的距離==左側(cè)層的寬度

  　　css代碼:
.left{ float:left;width:300px; background:red}
.right{ margin-left:300px; background:green; width:100%}

 方法2：左邊絕對定位absolate，右邊代碼沒變化 還是右側(cè) 左邊距的距離==左側(cè)層的寬度;

　　css代碼:

　　　　.left{ position: absolute; left:0; width:300px; background:red}
.right{ margin-left:300px; background:green; width:100%}

  方法3（個人喜好用）：左右兩邊都用絕對定位absolute， 父級相對定義
（不影響，建議加個相對定義，避免重疊） 

　　css代碼:

　　　　.left{ position: absolute; left:0; width:300px; background:red}

　　　　.right{ position: absolute; left:300px; background:green; width:100%}

二、左邊布局不固定，右邊布局固定-----方法一致，位置換下而已

   <div class="whole">
        <p>自適應(yīng)測試</p>
           <div class="left">左側(cè)自適應(yīng)</div>
        <div class="right">右側(cè)寬度固定</div>
  </div>

  方法1、左側(cè)用左浮動，右邊距==右側(cè)層的寬度的負(fù)值（因為你是左撐開，
距離右側(cè)的距離不錯層）， 右側(cè)的有浮動，固定寬度

      .left{ float:left; width:100%; margin-right:-300px; background: red; }
.right{ float: right; width: 300px;background: blue;}

 方法2、左右兩邊都用絕對定位absolute， 父級相對定義（不影響，建議加個
相對定義，避免重疊）      .left{ position: absolute; left:0;  width: 100%;  background: red;}
.right{ position: absolute;  left:200px; width:200px; background: green;}

 方法3、

 

 清除浮動的方法就一筆帶過， 都會

    1、在浮動層的下面單獨定義一個層 <div class="clear"></div>   .clear{ clear:both}

    2、偽類方法:after (用在父類的布局層上)-常用

         .father::after,.father::before{ clear: both; content: ""; display: table;}
  　　 <div class=’father’>
       　　 <div class="son-flotleft"></div>
<div class="son-flotrgt"></div>
  　　 </div>

　　3、父級元素設(shè)置overflow為hidden或者auto，固定高度 也可以--不建議　

         .father{overflow:hidden; width: 100%; }　  //overflow:auto; height:300px;

寫的都比較簡單， 文字表述很少，都是代碼，說的思路再多，
不讓直接代碼實際，用了后就明白意思了。