css自適應布局

css自適應布局可以分為以下幾種：

1、寬度全部100%，高度自適應頁面

布局時候的要點是計算出划分的版塊在設計圖中所占的百分比，要注意提前將html，body{height:100%;}

 

2、兩欄（左右） 三欄（雙飛翼布局）

這兩種布局方法是從左往右依次排開，方法如下：

1、觸發BFC規則

兩欄：先將左邊的一欄寬度固定，右邊的高度自適應寬度不適應，設置一個overflow：hidden(因為BFC規定：bfc區域和float是不會重疊的)

.left{float：left；height：100%；width：200px；}

.right{height:100%;overflow:hidden;}

 

三欄：同前面的兩欄布局一樣，但是html結構有所變化，代碼如下：

<div class="box-left"></div>

<div class="box-right"></div>

<div class="box-center"></div>

css樣式如下：

.box-left{float:left;height:100%;width:200px;}

.box-right{float:right;height:100%;width:200px;}

.box-centert{height:100%;overflow:hidden;}