圣杯布局
效果：左右宽度固定，缩小页面，中间盒子随页面变化
原理：父盒子里三个子盒子，三个子盒子都左浮动，给左盒子margin-left:-100%,右盒子margin-left:右盒子的宽，这样在一个水平内，但左右盒子盖住中间的盒子
，给父盒子加padding值，在给左右盒子position:relative,（相对定位是相对于原来的位置）。
缺点：不能无限缩小，页面缩小到左右盒子宽的和时，布局会乱
解决：给body{min-大于左右盒子的宽度和}
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 body,div{margin:0;padding:0;} 8 body{min-width:700px;} 9 .column{ 10 height:300px;float:left; 11 } 12 .main{ 13 width:100%;background:red; 14 } 15 .left{ 16 width:200px;margin-left:-100%;background:blue; 17 position:relative;left:-200px; 18 } 19 .right{width:200px;margin-left:-200px; background:orange; 20 position:relative;left:200px; 21 } 22 .container{ 23 padding:0 200px 0 200px; 24 } 25 26 </style> 27 28 29 </head> 30 <body> 31 <div class="container"> 32 <div class="column main">acvbdfdfesdfacvbdfdfesdfacvbdfdfesdf 33 acvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdf 34 acvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdf 35 acvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdf 36 acvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdf 37 acvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdf 38 acvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdf</div> 39 <div class="column left"></div> 40 <div class="column right"></div> 41 </div> 42 </body> 43 </html>
双飞翼布局
效果同圣杯布局
原理：中间盒子内加一个盒子，给margin属性
缺点：不能无限缩小，页面缩小到左右盒子宽的和时，布局会乱
解决：给body{min-大于左右盒子的宽度和}
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 body,div{margin:0;padding:0;} 8 body{min-width:700px;} 9 .column{ 10 height:300px;float:left; 11 } 12 .main{ 13 width:100%; 14 } 15 .inner{ 16 height:300px;background:red;width:100%; 17 margin:0 200px 0 200px; 18 } 19 .left{ 20 width:200px;margin-left:-100%;background:blue; 21 22 } 23 .right{width:200px;margin-left:-200px; background:orange; 24 25 } 26 27 28 </style> 29 30 31 </head> 32 <body> 33 <div class="container"> 34 <div class="column main"> 35 <div class="inner"> 36 acvbdfdfesdfacvbdfdfesdfacvbdfdfesdf 37 acvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdf 38 acvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdf 39 acvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdf 40 acvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdf 41 acvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdf 42 acvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdf</div> 43 </div> 44 <div class="column left"></div> 45 <div class="column right"></div> 46 </div> 47 </body> 48 </html>