CSStask1-建立九宮格
目標：建立一個九宮格
任務要求：
- 要求九個正方形在頁面上三三排列，使用div標籤，border擁有圓角屬性，背景顏色為#ff5a00；
- 要求只能使用class選擇器，不能使用id選擇器
- 要求九宮格大小隨螢幕寬度改變，
- 要求配置伺服器，讓頁面在PC和手機上都可以瀏覽；
任務解析：這個題目乍一看非常簡單，細細分析下來實則有點難度。需要的知識技能如下：
- 瞭解CSS的盒子模型、浮動屬性；
- 如何實現九宮格大小自適應；
- Nginx伺服器的配置；
任務完成：
完成HTML頁面的設計，CSS樣式的初步設計
<body> <div class="wrap"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body>body {margin: 0;} .wrap {padding: 40px 0 0 40px;} .wrap div { width: 394px; height: 394px; margin: 0 40px 40px 0; background: #ff5a00; border-radius: 10px; float: left; }現在頁面可以顯示九宮格了，通過Chrome瀏覽器的開發者工具進行除錯發現，九宮格的大小無論在PC端還是手機上都不能進行調整，也就是自適應，這是因為我們在設定div的大小時採用了畫素單位，雖然它是一個相對單位，但是並不能改變大小；為了能夠自適應，我們捨棄px，轉而使用%這個更加靈活的相對單位。
我們將畫素單位全部改為百分比單位
body {margin: 0;} .wrap {padding: 3% 0 0 3%;} .wrap div { width: 30%; height: 30%; margin: 0 3% 3% 0; background: #ff5a00; border-radius: 1%; float: left; }重新整理頁面，一片空白，為什麼元素都不見了呢？
我們知道百分比是相對於父級元素來說的，此例中我們設定的div的父級元素為wrap，但是wrap本身並沒有設定寬高，於是我們想去給wrap設定寬高來讓div顯示出來，可是設定多少呢？
我們知道，wrap實際上應該是有寬度的，所以div也應該有寬度，它繼承了父級body的寬度，但高度怎麼設定呢？
本來，wrap的高度是依賴於它的子級元素div的，當所有子級元素div的寬高設定好之後，wrap的高度自然就定下來了，但是問題在於：現在div的高度依賴wrap，而wrap的高度又依賴於div，所以就形成了一片空白的頁面。實際上也不是一片空白，如果我們給wrap和div都設定一個可見顏色的border，便可以發現此時的div高度為0，這就陷入無限迴圈了，可怎麼辦呢？
到了這兒，熟悉CSS盒子模型的同學就知道，div的邊框border中除了content是依賴於內容存在之外，還有一個padding屬性，注意padding是包含在border之內的，也就是div的background屬性中的color屬性同樣會作用於padding。我們不能設定div的高度，但是別忘了div的height=content+padding+border+margin，所以我們可以通過設定div的padd屬性來讓它看起來有高。
body {margin: 0;} .wrap {padding: 3% 0 0 3%;} .wrap div { width: 30%; padding-top: 30%; margin: 0 3% 3% 0; background: #ff5a00; border-radius: 1%; float: left; }
現在好了，九宮格又重新出現了，哎，你可能會發現九宮格的圓角看起來比第一次的10px小了很多啊？其實是這樣的，我們的百分比是相對於wrap的寬高而言的，而圓角屬性border-radius的百分比是相對於div來說的，div的寬高是wrap的30%，所以如果你想讓圓角屬性也可以自適應的話，就相應的改一下就ok啦。其實如果不改的話，設定為10px也是沒有大問題的，除非你在很小的頁面上去瀏覽，否則差別很小。
現在為了能在各種裝置上檢視網頁，我們需要在head中加上下面這個meta：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">這就是所謂的viewport，具體可以看下面的解釋：viewport
問題回顧：
1.我們對wrap下的div佈局的時候，其寬度設定為30%，margin設定為3%，理論上總寬度=30% * 3 +3% * 4 =102%，為何從頁面來看，並沒有超出頁面邊緣？
2.div之間的margin屬性不會重疊；
3.div如果要設定百分比高度，只有在父級元素明確了高度之後才能設定成功；
4.新增viewport的意義在哪裡，如果不加會有什麼後果？
5.對於本例中實現九宮格的方法有無改進的地方？或者有無其他更好的方法？