? ? ? ?近期一直受到win8應用的Grid布局困擾，經(jīng)過了半下午加半個晚上的奮斗，終于是弄明白了Grid布局方法的規(guī)則。之前我是閱讀的微軟官方的開發(fā)教程，書中沒有詳細說明CSS3的布局規(guī)則，自己鼓搗了半天也是一頭霧水，于是又找到了官方的啟蒙教程的布局一張，仔細閱讀了一遍，又思考了代碼，并在代碼的基礎上實驗，終于是明白了布局方法。官方教程地址是：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)格容器的關系。

? ? ? ?一、單層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)在的顯示布局為：

? ? ? ?接下來通過設置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那么長。

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

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

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

? ? ? ?接下來對圖片的大小進行優(yōu)化，使用max-height與max-width屬性可以指定圖片顯示的極限大小；使用height與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ù)分割，直至進入最底層div，也就是說上一級div是本級div的主網(wǎng)格布局，只有最內層div內部的元素才是純粹的子網(wǎng)格布局。換句話說，在中間層的CSS代碼中，會出現(xiàn)帶s和不帶s的row與column同時出現(xiàn)的情況。

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

? ? ? ?首先在最外層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>

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

? ? ? ?要實現(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)過上面兩個練習，我掌握了Grid布局的基本方法，體會到了它的便捷之處，它很方便，但也不太好學，先將自己的體會寫在這里，供自己以后查閱，也供大家參考。

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

轉載于:https://blog.51cto.com/570842253/1412907

總結

以上是生活随笔為你收集整理的Win8 HTML5与JS编程学习笔记（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。