Win8 HTML5與JS編程學習筆記（二）

       近期一直受到win8應用的Grid佈局困擾，經過了半下午加半個晚上的奮鬥，終於是弄明白了Grid佈局方法的規則。之前我是閱讀的微軟官方的開發教程，書中沒有詳細說明CSS3的佈局規則，自己鼓搗了半天也是一頭霧水，於是又找到了官方的啓蒙教程的佈局一張，仔細閱讀了一遍，又思考了代碼，並在代碼的基礎上實驗，終於是明白了佈局方法。官方教程地址是：http://msdn.microsoft.com/zh-cn/library/windows/apps/jj841108.aspx

       微軟基於CSS3開發了Grid佈局方法，它的思路是定義主網格容器與子網格容器，在主網格容器中劃分網格，在子網格容器中直接選擇所在位置。一般所選用的容器都是div元素，難點在於div的相互嵌套中主網格容器與子網格容器的關係。

       一、單層div的容器用法

       首先定義一段簡單的html代碼，包含了一個div塊級元素和一些成員，如下：

<div id="mainGrid">
    <img id="displayImg" src="./p_w_picpaths/1.jpg" width="480" height="320"/>
    <button id="button1">Click</button>
</div>

       現在的顯示佈局爲：

       接下來通過設置CSS來修改它。

       第一步是定義主網格容器，即把mainGrid定義爲主網格容器，方式如下：

#mainGrid {
    display:-ms-grid;
    -ms-grid-columns:auto;
    -ms-grid-rows:480px 480px;
}

       其中display屬性指明爲-ms-grid網格佈局類型容器，其中ms代表微軟，下面的-ms-grid-columns與rows分別指定了行和列的劃分距離，每一個數據代表網格中的一個部分，不同部分之間用空格分隔，例如上面的代碼指明瞭一列、兩行網格，其中列隨顯示元素的大小變化，兩行都是480px那麼長。

       然後是對主容器內元素進行定義，因爲元素直接在主網格容器之內，所以直接調用即可，如下：

#displayImg{
    -ms-grid-row:1;
}
#button1{
    -ms-grid-row:2;
}

       這裏和主容器相比去掉了s，使用-ms-grid-row或者column來定位它位於網格的哪一個部分，可以看到圖片元素選擇了第一行，按鈕元素選擇了第二行，由於只有一列，所以無需選擇。這就相當於把圖片和按鈕放入網格的上半部分和下半部分。

       接下來對圖片的大小進行優化，使用max-height與max-width屬性可以指定圖片顯示的極限大小；使用height與width則強制規定圖片顯示的大小。

       對於圖片元素，添加限制後變爲如下CSS代碼：  

#displayImg{
    -ms-grid-row:1;
    width:480px;
    max-height:320px;
}

       顯示效果如下：

       由此可見利用網格可以高效的實現美觀的佈局。

       二、多層div的容器用法

       對於多層的div嵌套，一般思路是由最外層規定總體網格佈局，然後由第二級網格佈局繼續分割，直至進入最底層div，也就是說上一級div是本級div的主網格佈局，只有最內層div內部的元素纔是純粹的子網格佈局。換句話說，在中間層的CSS代碼中，會出現帶s和不帶s的row與column同時出現的情況。

       需要注意的是，不連續的容器與元素之間不能直接傳遞網格，例如A爲div，B爲A內元素，C爲A內層的div，D爲C內元素，則A的屬性可以作用於B和C，但不能作用於D，在C內需重新定義二級主網格容器。定義網格容器千萬不要忘記display屬性，並且帶s的row與column屬性與不帶s的可以並存，從而可以實現對網格內部的繼續分割，具體過程如下：

       首先在最外層div內部再嵌套一層div元素，並放置一個p元素與一個按鈕元素，如下：

<div id="mainGrid">
     <img id="displayImg" src="./p_w_picpaths/1.jpg" width="480" height="320"/>
     <button id="button1">Click</button>
     <div id="secondGrid">
          <p id="p1">Test Click2</p>
          <button id="button2">Click2</button>
    </div>
</div>

     現在要實現的是字符和按鈕在當前所顯示元素的右邊，並且文字和按鈕各佔一列。

       要實現這個功能，需要把mainGrid網格改爲兩列，然後讓secondGrid選擇佔據主網格的第一行第二列，再在secondGrid中重新定義一行兩列的網格，來放置段落和按鈕，具體代碼如下    

#mainGrid {
    display:-ms-grid;
    -ms-grid-columns:auto auto;
    -ms-grid-rows:320px 10px 10px;
}
#secondGrid {
    display:-ms-grid;
    -ms-grid-column:2;
    -ms-grid-columns:120px 120px;
}
#p1 {
    -ms-grid-column:1;
}
#button2 {
    -ms-grid-column:2;
}

       顯示效果如下：

       經過上面兩個練習，我掌握了Grid佈局的基本方法，體會到了它的便捷之處，它很方便，但也不太好學，先將自己的體會寫在這裏，供自己以後查閱，也供大家參考。

       補充：近期學習win8的官方教材電子書，發現其中使用了section標籤，section標籤要調用css應當先指定class屬性，然後使用".<class>"進行調用，例如class="test"，則調用要寫成 .test{}