CSS常見佈局

1、單列布局

  1. 水平居中

    1.1 使用inline-block和text-align 

 .parent{text-align:center;} .child{display:inline-block;}

     1.2 使用margin:0 auto實現    

 .child{width:200px;margin:0 auto;}

     1.3 使用絕對定位實現

 .parent{position:relative;}
 .child{position:absolute;left:50%;margin-left:-100px;width:200px;}  /*margin-left的負值爲盒子寬度的一半*/

     1.4 使用flex佈局實現

 .parent{display:flex;justify-content:center;}

  2. 垂直居中

    2.1 使用vertical-align

  .parent{line-height:100px}
  .child{display:inline-block;vertical-align:middle;}

    2.2 使用絕對定位實現

 .parent{position:relative;} .child{position:absolute;top:50%;margin-top:-100px;height:200px;}  /*margin-top的負值爲盒子高度的一半*/

    2.3 使用flex實現

 .parent{display:flex;align-items:center;}

  3. 水平垂直居中

    3.1 使用inline-block,text-align和vertical-align

 .parent{line-height:100px;text-align:center;} .child{display:inline-block;vertical-align:middle}

    3.2 使用絕對定位實現

 .parent{position:relative;} .child{position:absolute;top:50%;left:50%;margin-top:-100px;margin-left:-100px;width:200px;height:200px;}  /*margin-top的負值爲盒子高度的一半,margin-left的負值爲盒子寬度的一半*/

    3.3 使用flex實現

 .parent{display:flex;justify-content:center;align-items:center;}

2、多列布局

　 1. 聖盃佈局：三列布局，左右定寬，中間寬度自適應；中間欄要在瀏覽器中優先展現渲染；容許任意列的高度最高。

HTML：

 <div class="header">header</div>
 <div class="container">
    <div class="main">main</div>    <!--中間欄優先展現渲染，放在前面-->
    <div class="left">left</div>
    <div class="right">right</div>
 </div>
 <div class="footer">footer</div>

    (1) 基礎樣式

*{margin:0;padding:0}
body{min-width:800px;} .header,.footer{ border: 1px solid #333; background: #aaa; text-align: center;
} .container{ border:2px solid yellow;
} .left{ width:200px; background:skyblue;
 } .right{ width:200px; background:pink;
 } .main{ width:100%; background:tomato;
 }

.main,.left,.right{
   min-height:100px;
 }

   

    (2) 三列均設置左浮動 

.left,.main,.right{ float:left;
}

    (3) 清除浮動

.container{ zoom:1;
} .container:after{ content:""; display:block; clear:both;
}

    (4) 讓left和right上移

.left{
     margin-left:-100%;   /*利用margin-left的負值，將left列移動到上一行的開頭*/
     width:200px;
     background:skyblue;
}
.right{ margin-left:-200px;  /*利用margin-left的負值，將right列移動到上一行的末尾*/
     width:200px;
     background:pink;
}

left列和right列已經上移，可是能夠看見，此時main已被遮蓋。

    (5) 解決遮蓋問題

    給.containter左右內邊距，大小分別爲left列的寬和right列的寬。

.container{ padding:0px 200px; border:2px solid yellow; zoom:1;
}

    而後利用相對定位，將left列和right列定位到兩側空白處。

.left{ position:relative; left:-200px; margin-left:-100%;  width:200px; background:skyblue;
} .right{ position:relative; right:-200px; margin-left:-200px; width:200px; background:pink;
}

   遮擋問題已解決，main可見啦。

   至此，聖盃佈局已完成，中間列寬度自適應。

   2. 雙飛翼佈局：三列布局，左右定寬，中間寬度自適應；中間欄要在瀏覽器中優先展現渲染；容許任意列的高度最高。

   雙飛翼佈局和聖盃佈局基本同樣，不一樣之處在於解決遮蓋問題的方式不一樣。

   雙飛翼佈局在main元素中添加了一個子元素content，並給這個子元素設置margin-left和margin-right，以致於content裏的內容不被遮蓋。

   HTML：

<div class="header">header</div>
<div class="container">
   <div class="main">
      <div class="content">content</div>
   </div>
   <div class="left">left</div>
   <div class="right">right</div>
</div>
<div class="footer">footer</div>

  CSS：

.content{margin:0 200px}

   雙飛翼佈局也完成了，我的感受比聖盃佈局更簡潔；完整代碼就不上了，很簡單的，不熟悉的能夠動手試試哦。