Win8 HTML5與JS編程學(xué)習(xí)筆記（二）

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

       微軟基于CSS3開發(fā)了Grid布局方法，它的思路是定義主網(wǎng)格容器與子網(wǎng)格容器，在主網(wǎng)格容器中劃分網(wǎng)格，在子網(wǎng)格容器中直接選擇所在位置。一般所選用的容器都是div元素，難點在于div的相互嵌套中主網(wǎng)格容器與子網(wǎng)格容器的關(guān)系。

       一、單層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>

       現(xiàn)在的顯示布局為：

       接下來通過設(shè)置CSS來修改它。

       第一步是定義主網(wǎng)格容器，即把mainGrid定義為主網(wǎng)格容器，方式如下：

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

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

       然后是對主容器內(nèi)元素進(jìn)行定義，因為元素直接在主網(wǎng)格容器之內(nèi)，所以直接調(diào)用即可，如下：

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

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

       接下來對圖片的大小進(jìn)行優(yōu)化，使用max-height與max-width屬性可以指定圖片顯示的極限大?。皇褂胔eight與width則強制規(guī)定圖片顯示的大小。

       對于圖片元素，添加限制后變?yōu)槿缦翪SS代碼：  

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

       顯示效果如下：

       由此可見利用網(wǎng)格可以高效的實現(xiàn)美觀的布局。

       二、多層div的容器用法

       對于多層的div嵌套，一般思路是由最外層規(guī)定總體網(wǎng)格布局，然后由第二級網(wǎng)格布局繼續(xù)分割，直至進(jìn)入最底層div，也就是說上一級div是本級div的主網(wǎng)格布局，只有最內(nèi)層div內(nèi)部的元素才是純粹的子網(wǎng)格布局。換句話說，在中間層的CSS代碼中，會出現(xiàn)帶s和不帶s的row與column同時出現(xiàn)的情況。

       需要注意的是，不連續(xù)的容器與元素之間不能直接傳遞網(wǎng)格，例如A為div，B為A內(nèi)元素，C為A內(nèi)層的div，D為C內(nèi)元素，則A的屬性可以作用于B和C，但不能作用于D，在C內(nèi)需重新定義二級主網(wǎng)格容器。定義網(wǎng)格容器千萬不要忘記display屬性，并且?guī)的row與column屬性與不帶s的可以并存，從而可以實現(xiàn)對網(wǎng)格內(nèi)部的繼續(xù)分割，具體過程如下：

       首先在最外層div內(nèi)部再嵌套一層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>

     現(xiàn)在要實現(xiàn)的是字符和按鈕在當(dāng)前所顯示元素的右邊，并且文字和按鈕各占一列。

       要實現(xiàn)這個功能，需要把mainGrid網(wǎng)格改為兩列，然后讓secondGrid選擇占據(jù)主網(wǎng)格的第一行第二列，再在secondGrid中重新定義一行兩列的網(wǎng)格，來放置段落和按鈕，具體代碼如下    

#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;
}

       顯示效果如下：

       經(jīng)過上面兩個練習(xí)，我掌握了Grid布局的基本方法，體會到了它的便捷之處，它很方便，但也不太好學(xué)，先將自己的體會寫在這里，供自己以后查閱，也供大家參考。

       補充：近期學(xué)習(xí)win8的官方教材電子書，發(fā)現(xiàn)其中使用了section標(biāo)簽，section標(biāo)簽要調(diào)用css應(yīng)當(dāng)先指定class屬性，然后使用".<class>"進(jìn)行調(diào)用，例如class="test"，則調(diào)用要寫成 .test{}