微軟基於css3開發了grid布局方法，它的思路是定義主網格容器與子網格容器，在主網格容器中劃分網格，在子網格容器中直接選擇所在位置。一般所選用的容器都是div元素，難點在於div的相互巢狀中主網格容器與子網格容器的關係。
一、單層div的容器用法
首先定義一段簡單的html**，包含了乙個div塊級元素和一些成員，如下：
接下來通過設定css來修改它。
第一步是定義主網格容器，即把maingrid定義為主網格容器，方式如下：
#maingrid然後是對主容器內元素進行定義，因為元素直接在主網格容器之內，所以直接呼叫即可，如下：
#displayimg
#button1
接下來對的大小進行優化，使用max-height與max-width屬性可以指定顯示的極限大小；使用height與width則強制規定顯示的大小。
#displayimg由此可見利用網格可以高效的實現美觀的布局。
二、多層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元素與乙個按鈕元素，如下：
test click2
click2
要實現這個功能，需要把maingrid網格改為兩列，然後讓secondgrid選擇佔據主網格的第一行第二列，再在secondgrid中重新定義一行兩列的網格，來放置段落和按鈕，具體**如下
#maingrid
#secondgrid
#p1
#button2
補充：近期學習win8的官方教材電子書，發現其中使用了section標籤，section標籤要呼叫css應當先指定class屬性，然後使用"."進行呼叫，例如class="test"，則呼叫要寫成 .test{}
html5學習筆記之程式設計軟體
學習一門技術，首先要選擇乙個合適的開發軟體，最近剛開始學習html5，選擇使用sublime text2進行編寫，下面主要介紹一下在使用該軟體時遇到的問題。1.package control元件的安裝 為了開發 html 5 css，需要安裝emmet外掛程式,為了管理外掛程式，首先要先安裝乙個pa...
HTML學習筆記（二） HTML5常用元素與屬性
1.插入乙個換行，定義水平線 個人對這兩個標籤經常混淆。2.div與span的區別 div是塊級元素，前後都引入了行分割，span是行內元素 也叫內嵌元素 span預設不會換行。塊元素和行內元素也不是一成不變的，通過定義css的display屬性值可以互相轉化 與以上兩個 元素效果類似的還有標籤，而...
HTML學習筆記（三） HTML5常用元素與屬性
1.超連結 錨點 主要可以包含文字，影象，各種文字格式化元素和表單元素等內容，可指定如下三個重要屬性 1 href 指定超連結指定的另一資源，可以是絕對位址，也可以是相對位址 2 target 指定使用框架中的哪乙個框架來裝載另乙個資源，屬性值可以是 self,blank,top,parent四個值...