css的高階和寬度自適應問題
1.寬度自適應
現在網頁佈局基本都是要適配各個螢幕，所以佈局時候的自適應也就非常重要，這個東西說難不難，說簡單也不簡單，主要是一個積累的過程，當你寫得多了，也就掌握了。
我先從三列式佈局講吧，三列式佈局什麼呢，說白了就是兩邊固定，中間自適應，三列式佈局經典的佈局是聖盃佈局
聖盃佈局效果優美且對瀏覽器相容性要求非常低,是一種非常給力的三列式頁面佈局方案，在國內最早是由淘寶UED的工程師傳播開來,它的佈局要求有幾點：
1、三列布局，中間寬度自適應，兩邊定寬；
2、中間欄要在瀏覽器中優先展示渲染；
3、允許任意列的高度最高；
<!DOCTYPE html>
<html 這就是一個很簡單的三列式佈局，我們先給中間的main渲染，使其長度為100%，高度自己定義，用float使其脫離文件流，然後渲染左邊的部分，使左邊的左浮動，然後利用負邊距100%，使其定位到正確位置，再使右邊的利用float脫離文件流，再用margin-left:本身寬度，就能定位到正確位置，這樣一個簡單的三列式佈局就寫出來了
當瀏覽器縮小到一定程度時，這個佈局可能會被破壞，可以在body上新增min-width屬性解決。
2.高度自適應
高度自適應就是高度能跟隨瀏覽器視窗的大小改變而改變，但是屬性height:100%並不能直接產生效果，因為這和其父元素有關
#center{
height:100%;
}上面的程式碼是無效的，對樣式沒有任何改變，需要改寫成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Task3-聖盃佈局</title>
<style>
html,body{
margin:0px;
height:100%;
}
.center{
width:200px;
height:100%;
background-color:#666666;
}
</style>
</head>
<body>
<div class="center"></div>
</body>
</html>對.center物件設定了height:100%,同時設定了html與body的height：100%，這就是高度自適應的問題所在，一個物件的高度是否可以使用百分之比顯示，取決於物件的父類物件，在頁面中，.center直接放在body屬性中，因此它的父類物件是body，而在預設狀態下，瀏覽器並沒有給body一個高度屬性，因此我們所設定的.centere為height：100%並不會產生任何效果，但是一點我們給body設定了100%之後，他的子類物件.center的height:100%便發生作用了，這便是瀏覽器解析規則引發的高度自適應的問題。
程式碼中除了給出body的定義屬性之外，還給html物件也應用了相同的樣式定義，這樣做的好處是使IE與firefox瀏覽器都能夠高度自適應，Ie與firefox對頁面的解析存在一定的差異，ie中html物件預設為100%的高度，而body不是，而在firefox中html標籤就不是100%的高度，因此兩個標籤都設定為100%,可以保證兩款瀏覽器都能正常工作。