近期开始独立攻克百度前端技术学院的各项任务，之前做了两个比较复杂的页面，深深感觉基础不好，好多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后的感受，其中可能有很多问题，自己会不断学习，不断优化本篇博文。