1.今天寫練習的時候,給定body寬高，給定背景顔色background-color,但是并沒有預期的背景顔色隻出現在body給定寬高的區域，而是全螢幕。
HTML：
<body>
</body>
CSS:
body{
width: 400px;
height: 400px;
margin: 0 auto;
padding: 10px;
border: 10px solid red;
background-color: gray;
}
然而卻是這樣的結果：
最後到segmentFault提問，有網友給了一個連結，據大神說：body的background起作用，而是body作為一個根結點起作用了，html标簽未被激活，body但當類似于根結點的結點，其background背景色被浏覽器俘獲，浏覽器界面背景色為background的背景色，這就是為什麼上面整個視窗螢幕的顔色都是灰的。
解決辦法就是給html節點添加一個背景顔色就可以，當html标簽無背景樣式時，body的背景色其實不是body标簽的背景色，而是浏覽器的。一旦html标簽含有背景色，則body的背景色變成了正常的body标簽（一個實實在在，普普通通标簽）的背景色，而此時的html标簽最頂級，背景色被浏覽器擷取，成為浏覽器的背景色。
大神的這篇文章比較詳細的介紹了原因，點選這裡檢視詳情
即CSS這樣寫：
html{
background-color: #fff;
}
body{
width: 400px;
height: 400px;
margin: 0 auto;
padding: 10px;
border: 10px solid red;
background-color: gray;
}
這樣即可達到預期的效果：
2.也是根據上面的大神的文章，頁面的html,height的高度100%的原因和預設的滾動條的設定：
一個對象高度是否可以使用百分比顯示，取決于對象的父級對象，#id的父級是body，而浏覽器預設狀态 下，是沒有給body一個高度屬性的，是以當我們直接設定#id為height:100%;時，不會産生任何效果，而當我們給body設定了100% 之後，它的子級對象#id的height:100%;便發生作用了，這便是浏覽器解析規則引發的高度自适應問題。
但是為body設定高度隻是ie6下有作用。而代碼中除了給body應用之外，還 給HTML對象也應用相同的樣式設計，這樣做的好處是使IE與firefox浏覽器都能夠實作高度自适應，而body卻不是。另外，Firefox中的 HTML标簽不是100%高度，是以給兩個标簽都定義為height:100%;以保證兩個浏覽器下均能夠正常顯示。
頁面沒有填滿一屏時，ie6/7會有預設的滾動條，可以通過設定html{overflow:hidden;}來隐藏掉。或者設定html{overflow:sroll;}所有浏覽器顯示滾動條。
3.圖檔自适應容器大小，這裡img用到兩個css樣式，max-width:100%,height:auto;圖檔不會變形，不過當外部容器的高不夠，圖檔會超出該容器
HTML：
<div>
<img src="../images/6.jpg" alt="">
</div>
CSS：
div{
width: 600px;
height: 200px;
}
div img{
max-width: 100%;
height: auto;
}
4. 背景圖檔，設定background-size;圖檔也可很好的自适應容器大小，而且可以使用background-position來定位圖檔的位置
HTML：
<div>
</div>
CSS：
div{
width: 500px;
height: 300px;
background: url(../images/6.jpg) no-repeat center center;
background-size: cover; /*background-size 一般單獨寫*/
}
這樣不論div寬高是怎麼樣，img背景圖檔都能很好的适應。