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

    
    Click

       現(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)元素進行定義，因為元素直接在主網(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)格的上半部分和下半部分。

       接下來對圖片的大小進行優(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)格布局，只有最內(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元素與一個按鈕元素，如下：

     
     Click
     
          Test Click2

          Click2