近期开始独立攻克百度前端技术学院的各项任务，之前做了两个比较复杂的页面，深深感觉基础不好，好多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 
     
       2         
      
        3             
        4             
       
        Yvonne Kong
       
 5         
      
 6         
      
        7             
        8             ......11         
      
12         
      
       13             ......21         
      
22     
     

　　注意：

1. 中间栏是最后一个div，三栏在html中的书写顺序很重要。
2. 为了使父容器的长度自适应最长的子元素，只需将父容器的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即可。

　　　注意：

1. 为了使父容器的长度自适应最长的子元素，无法通过设置父容器的over-flow属性实现。在这里，我们为父容器设置了min-height，其值由两边栏中较长的一方决定，当中间栏的长度高于两边栏时，父容器的长度会适应中间栏的长度。
2. 由于两边栏宽度固定，当浏览器宽度缩小时，为了保证中间栏仍占用一定宽度，我们为父容器设置了min-width。
3. 右侧栏的个人logo部分，是四个定高定长的img元素，通过display:block，magin:20px来实现等间距布局。（是否还有更好的等间距布局方式，有待学习）
4. 当不为div元素设置宽度时，其默认宽度与父容器宽度相同，所以当我们为body设置了width:100%, padding:20px，之后，不必再为子div设置宽度，若此时设置了.container的width为100%，页面右侧不会出现20px的padding。
5. 各个模块都需设置padding属性，所以box-sizing设置为border-box更佳。

　　　以上是自己做这个task后的感受，其中可能有很多问题，自己会不断学习，不断优化本篇博文。

　　　最后贴一下我的