CSS中的佈局

佈局那些事

• 兩欄佈局
  很多情況下，要用到諸如左邊固定，右邊自適應這種情況，此時可以利用浮動來解決這個問題。

     <div class="wrapper  ">
       <div class="left"></div>
       <div class="right"></div>
     </div>

.wrapper{
  border:1px solid blue;
  height:300px;
}
.left{
  background-color:#ddd;
  width:100px;
  height:100%;
  float:left;
}
.right{
  background-color:red;
  height:100%;
  margin-left:100px;
}

通過給左邊塊級元素設置向左浮動，使其脫離標準文檔流，從而右邊的塊級元素能夠從第二行“跑到“第一行，這裏要注意的是，左邊元素其實是覆蓋在右邊元素上的，所以這裏要給右邊元素設置坐外邊距，該值的大小是左邊元素的寬度。

• 三欄佈局
  這裏的三欄佈局實現有很多種方式。

  —簡單的利用浮動的方式

 <div class="left">左欄</div>
<div class="right">右欄</div>
<div class="middle">中間欄</div>

.left{
  width: 100px;height: 300px; background: yellow; float: left;    
}
.right{
  width: 100px; height: 300px; background: green; float: right;
}
.middle{
  height: 300px; background: red; margin:0 100px;
}

這裏要注意的是html的結構，可以看到中間攔是在最後面的，在某些極端優化場景下，要求中間內容要首先被解析出來，這樣子可能會有問題，後續再說。

–利用定位的方式

<div class="left">左欄</div>
  <div class="middle">中間欄</div>
<div class="right">右欄</div>

html,body{
  margin:0;
}
.left{
  width: 200px;height: 300px; background: yellow;
  position:absolute;   
  top:0;
  left:0;
}
.right{
  width: 200px; height: 300px; background: green;
 position:absolute; 
  top:0;
  right:0;
}
.middle{
  height: 300px; background: red;
  margin:0px 200px;
}

這樣子的html結構是比較正常的，但是如果他們的父元素有內外邊距，那麼中間的部分可能不會和兩端平齊，所以我給根元素設置了外邊距爲0。

—設置負值的margin
在上述第一個方法中提到，有時候我會希望中間主體內容先渲染出來，所以要把中間欄的dom放在最前面，那這時候要怎麼去佈局呢，可以這樣來：

 <div class='main'>
  <div class='middle'>
    <div class="content">
          中間欄
    </div>
  </div>
  <div class="left">左欄</div>
  <div class="right">右欄</div>
 </div>


.main{
  overflow:hidden;

}
.content{
     border:1px solid #555;
     margin:0 200px;
}

.left{
  width: 200px;height: 300px; background: yellow;
  float:left;
  margin-left:-100%;
  word-break:break-all;

}
.right{
  width: 200px; height: 300px; background: green;
  float:left;
  margin-left:-200px;
}
.middle{
  height: 300px; background: red;
 float:left;
  width:100%;

}
.wrapper{
  float:left;
  width:100%;
}

其實主要是利用了負值的margin，值得注意的是，在middle下還有一個content的子元素，並且設置了水平的margin，主要是爲了讓內容能夠在中間顯示，這也是所謂的“雙飛翼“佈局，不過這種做法多了一些標籤，乍看之下有點複雜。還有一種類似的“聖盃“佈局，大致想法是一樣的，只不過在解決內容不被遮蓋上，是利用了padding和相對定位來實現。

—利用flex佈局
彈性盒子的話實現就很簡單了

  <div class='box'>
  <div class="left">左欄</div>
  <div class="middle">中間欄</div>
  <div class="right">右欄</div>
  </div>
.box{
 display:flex;
}
.left{
  width: 200px;height: 300px; background: yellow;
}
.right{
  width: 200px; height: 300px; background: green;
}
.middle{
  height: 300px;width:100%; background: red;
}

除了兼容性問題以外，這個實現起來就好多了