本文共 1215 字，大约阅读时间需要 4 分钟。

靶心布局

重点理解marggin的使用

* {         margin: 0;      padding: 0;    }    .round1,.round2,.round3,.round4,.round5{         border-radius: 50%;      background-color: #00b3ff;      margin: 40px;    }    .round1{         width: 500px;      height: 500px;      border: 10px solid #fff;    }    .round2{         width: 400px;      height: 400px;      border: 10px solid #fff;    }    .round3{         width: 300px;      height: 300px;      border: 10px solid #fff;    }    .round4{         width: 200px;      height: 200px;      border: 10px solid #fff;    }    .round5{         width: 100px;      height: 100px;      border: 10px solid #fff;    }

圣杯布局

为了使中间栏不被覆盖，利用padding: 0px 200px;利用padding而不用marggin是因为其他两个盒子也会跟着移动，然后再对左边栏 left: -200px;，右边栏right: -200px

   
   
	
    
     中间栏
    
	
    
     左边栏
    
	
    
     右边栏
    
   

双飞翼布局

双飞翼布局是再对圣杯布局进行优化，对同一个BFC的两个相邻盒子的margin会发生重叠进行解决，因此重新创作一个BFC，在中间栏加入

   
   
	
    
		
     
      中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间1栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中1间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏
     
	
    
	
    
     左边栏
    
	
    
     右边栏