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

標籤：網格   html5   布局   grid   元素   

       近期一直受到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="./images/1.jpg" width="480" height="320"/>    <button id="button1">Click</button></div>

       現在的顯示布局為：

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M01/28/27/wKiom1N2J8ng7HcYAAFEdz9pE3M143.jpg" title="1.png" alt="wKiom1N2J8ng7HcYAAFEdz9pE3M143.jpg" />

       接下來通過設定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;}

       顯示效果如下：

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M00/28/27/wKioL1N2LWbRaXPNAAFHmhE8Bcg585.jpg" title="1.png" alt="wKioL1N2LWbRaXPNAAFHmhE8Bcg585.jpg" />

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

       二、多層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="./images/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;}

       顯示效果如下：

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M01/28/29/wKioL1N2NlfypR7vAAFn9OXjPbQ280.jpg" title="1.png" alt="wKioL1N2NlfypR7vAAFn9OXjPbQ280.jpg" />

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