常見面試題之左邊固定，右邊自適應佈局(四種方法：負邊距、flex)

這個佈局是最簡單的佈局之一，可是網絡上大可能是copy，而沒有認真解釋以及用新的特性實現。下面就作一個新的歸納.

要求： 左邊固定100px, 右邊自適應

左position:absolute, 右margin-left 入門寫法

<div class="parent">
  <div class="l-child">左邊固定1  左邊固定2 左邊固定3</div>
  <div class="r-child">右邊自適應1 右邊自適應2 右邊自適應3</div>
</div>

//父元素相對定位，做爲子元素絕對定位的參考
.parent{display:relative; background:#ddd }
.l-child{position:absolute; width:100px;background:#bbb }
.r-child{margin-left:100px;background:#999 }

demo展現

左邊float，觸發父元素寬度計算 入門寫法

html結構同上

.parent{background:#ddd;overflow:hidden; }
.l-child{float:left;width:100px;background:#bbb;z-index:10000; }
.r-child{margin-left:100px;background:#999;}

demo展現

左右float，右邊使用負邊距 奇伎淫巧

這個技能要這樣get：

1. 父元素清除浮動

2. A元素寬100%不變，margin-left:-100px後，外部的文檔流認爲以邊框爲界，A減小了100px，而A是右浮動，也就是左邊開始有100px空白可填充的文檔流空間；

3. 子元素A1是認爲父元素大小沒有變化，margin-left:100px後，正好等於父元素在外部空出來的文檔流空間。

4. B元素左浮動，且是後面的dom節點，正好佔據而且覆蓋A空出來的空間

<div class="parent">
  <div class="r-box">
    <div class="r-content">
      右邊自適應1 右邊自適應2 右邊自適應3
    </div>
  </div>
  <div class="l-box">
    左邊固定1  左邊固定2 左邊固定3
  </div>
</div>

.parent{background:#ddd;overflow:hidden; }
.l-box{float:left;width:100px;background:#bbb;}
.r-box{float:right;width:100%;margin-left:-100px;background:#999;}
.r-content{margin-left:100px;}

demo展現

flex佈局 高大尚

父元素flex佈局後，子元素默認就是彈性佈局，除非你肯定子元素的彈性方式
ps：這個方法完美之處還在於，垂直方向也自動填充，輕鬆實現了等高佈局！！
html同第一個demo

.parent{display:flex; background:#ddd }
.l-child{flex:0 0 100px; background:#bbb }
.r-child{background:#999}

demo展現