CSS那些事儿3 - 简单的布局，面试必备

1.前言

css布局是前端面试最常见的问题，这里仅就其中最常见的4种展示代码及效果

2.搞起

2.1 单栏布局

• 如名字，全部块级元素按照一个顺序单列显示在页面中
• 即 header, main,footer 统一被包裹在content中，单列显示在html页面中：

|HTML文件|

  
  
  


  

     
header
     
main
     
foot
  

|CSS文件|

#content{
  margin: 0 auto;
  margin-bottom:20px;
}
.header{
  height:50px;
  background:red;
  
}
.main{
  height:500px;
  background:blue;
}

.foot{
  height:100px;
  background:yellow;
  
}

效果：详见链接

---

2.2 三列布局

• 两侧两列固定宽度，中间列自适应宽度
  我加入了边框顺便通过overflow解决了浮动问题
  |html|

  
  
  


 

  
    
我是left
    
我是right
    
我是main
  

|CSS配置|

#layout{
  height:400px;
}
.left{
  width:100px;
  float:left;
  background:green;
  
}
.right{
  width:200px;
  float:right;
  background:yellow;
}
.main{
  margin-left: 100px; 
  margin-right: 200px;
  background:pink;
}

效果：详见链接

---

2.3 圣杯布局

  
  
  
  
  


  



  

    
main
    
aside
    
extra
  

效果详见页面

---

2.4 双飞翼布局

  
  
  
  



  
  

    

      
main
    
    
aside
    
extra
  

效果详见页面