近期開始獨立攻克百度前端技術學院的各項任務，之前做了兩個比較復雜的頁面，深深感覺基礎不好，好多css的語句都是為了實現效果而去寫的，出現了好多問題，而自己的解決方案也不夠優，於是決定從基礎開始學起，循序漸進。
第一個任務是實現一個三欄布局，外部的兩欄固定寬度，中間自適應，以下是效果圖：
我使用了兩種方法實現以上效果：float和position
以下是float方法的CSS代碼：
1 .team-inf{ 2 float: left; 3 width: 200px; 4 } 5 .logo-group{ 6 float: right; 7 padding: 0; 8 width: 120px; 9 height: 420px; 10 } 11 .team-intro{ 12 margin: 0 140px 0 220px; 13 }
注意：中間欄的margin-left和margin-right是根據左右兩欄的寬度計算而得的，若不設置這兩個參數，中間欄的長度將和父容器相同，無法實現三欄並列的效果。
相應的html代碼如下:
1 <div class="container border-group"> 2 <div class="team-inf border-group"> 3 <img src="images/teamlogo.jpg" class="team-logo"/> 4 <div class="team-name">Yvonne Kong</div> 5 </div> 6 <div class="logo-group border-group"> 7 <img src="./images/logo1.jpg" class="personal-logo"/> 8 ...... 11 </div> 12 <div class="team-intro border-group"> 13 ......21 </div> 22 </div>
注意：
- 中間欄是最后一個div，三欄在html中的書寫順序很重要。
- 為了使父容器的長度自適應最長的子元素，只需將父容器的over-flow屬性設置成hidden。
以下是position方法的CSS代碼：
1 .container{ 2 position: relative; 3 min-height: 460px; 4 background-color: #eee; 5 } 6 .team-inf{ 7 position: absolute; 8 left: 20px; 9 width: 200px; 10 } 11 .logo-group{ 12 position: absolute; 13 right: 20px; 14 padding: 0; 15 width: 120px; 16 height: 420px; 17 } 18 .team-intro{ 19 margin: 0 140px 0 220px; 20 }
將父容器的position設置為relative，兩個邊欄的position設置成absolute即可。
注意：
- 為了使父容器的長度自適應最長的子元素，無法通過設置父容器的over-flow屬性實現。在這里，我們為父容器設置了min-height，其值由兩邊欄中較長的一方決定，當中間欄的長度高於兩邊欄時，父容器的長度會適應中間欄的長度。
- 由於兩邊欄寬度固定，當瀏覽器寬度縮小時，為了保證中間欄仍占用一定寬度，我們為父容器設置了min-width。
- 右側欄的個人logo部分，是四個定高定長的img元素，通過display:block，magin:20px來實現等間距布局。（是否還有更好的等間距布局方式，有待學習）
- 當不為div元素設置寬度時，其默認寬度與父容器寬度相同，所以當我們為body設置了width:100%, padding:20px，之后，不必再為子div設置寬度，若此時設置了.container的width為100%，頁面右側不會出現20px的padding。
- 各個模塊都需設置padding屬性，所以box-sizing設置為border-box更佳。
以上是自己做這個task后的感受，其中可能有很多問題，自己會不斷學習，不斷優化本篇博文。