1、YCF正版可修改PPT（中職）Web前端設計基礎 項目十-1電子課件CSS 3創建網格布局項目十授課教師：姓名WEB前端設計基礎Contents1.項目描述2.知識準備3.項目實施4.項目拓展5.項目小結6.技能訓練一 項目描述本項目學習要點網格項元素屬性；創建雙飛翼布局。網格布局的術語；網格容器的屬性；如何創建網格布局；二 知識準備CSS一直用來布局網頁，但一直以來都存在這樣或那樣的問題。一開始我們用表格（table），然后是浮動（float），再是定位（postion）和內嵌塊（inline-block），但是所有這些方法本質上都是只是hack而已，并且遺漏了很多重要的功能（例如垂直居中）

2、。后來，Flexbox在很大程度上改善了布局方式，但它是為了解決更簡單的一維布局，而不是復雜的二維布局。Grid布局是專門為了解決二維布局問題而創建的CSS模塊，是有史以來最強大的CSS模塊之一。二 知識準備網格布局的重要術語；子元素網格項的屬性。父元素網格容器屬性；網格布局的重要術語1網格容器和網格項網格容器任何應用display屬性值為grid的元素就是網格容器，是所有網格項（Grid Items）的父級元素。網格項網格容器（Grid Container）的子元素（例如直接子元素）。網格布局的重要術語1網格容器和網格項【例10-1】創建具有3個子元素的網格容器，代碼如下所示（示例文件10-

3、1.html）。網格容器和網格項/*只要display的值為grid，這個元素就是網格容器*/.containerdisplay:grid;第1個網格項第2個網格項第3個網格項網格布局的重要術語2網格線構成網格結構的分界線。它們既可以是垂直的，也可以是水平的，并位于行或列的任一側，如圖所示黃線就是一條列網格線。網格布局的重要術語3網格軌道兩條相鄰網格線之間的空間。可以把它們想象成網格的列或行。如圖所示的第二條和第三條行網格線之間的就是網格軌道。網格布局的重要術語4網格單元格兩個相鄰的行和兩個相鄰的列網格線之間的空間。這是網格系統的一個“單元格”。如圖所示，第1至第2條行網格線和第2至第3條列網

4、格線交匯構成的就是網格單元格。網格布局的重要術語5網格區域四條網格線包圍的總空間。一個網格區域可以由任意數量的網格單元格組成。如圖所示，第1條到第3條行網格線和第1條到第3條列網格線之間的就是網格區域。父元素網格容器屬性1display屬性將元素定義為網格容器，并為其內容建立新的網格格式。display屬性值如表所示。Display屬性含義grid生成一個塊級網格inline-grid生成一個內聯網格subgrid表示網格容器本身是另一個網格的網格項（即嵌套網格）父元素網格容器屬性1display屬性需要注意：在網格容器(Grid Container)上使用column，float，clear

5、，vertical-align不會產生任何效果。.containerdisplay:grid|inline-grid|subgrid;CSS代碼格式如下：父元素網格容器屬性2grid-template-columns和grid-template-rows屬性使用空格分隔的值列表，用來定義網格的列和行。這些值表示網格軌道大小，它們之間的空格表示網格線。屬性值為：（1） ：可以是長度值、百分比或者等份網格容器中可用空間( fr單位）（2） ：可以選擇的任意名稱.container grid-template-columns: . | .; grid-template-rows: . | .;CSS

6、代碼格式如下：父元素網格容器屬性【例10-2】創建一個3行5列的網格布局（示例文件10-2.html）。.containerdisplay:grid;height: 300px;grid-template-columns: 40px 50px auto 50px 40px;grid-template-rows: 25% 100px auto;grid-gap: 10px;.container divbackground-color: green;父元素網格容器屬性【例10-2】創建一個3行5列的網格布局（示例文件10-2.html）。123456789101112131415在chrome瀏覽

7、器中預覽父元素網格容器屬性當在網格軌道(Grid Track)值之間留出空格時，網格線會自動分配數字名稱，如圖所示。父元素網格容器屬性也可以明確的指定網格線(Grid Line)名稱，即值，如圖所示。父元素網格容器屬性請注意網格線名稱的括號語法，修改例10-2中的第7-13行。.containerdisplay:grid;height: 300px;background-color: #000;grid-template-columns: first40pxline250pxline3autocol4-start50pxfive40pxend;grid-template-rows: row1-

8、start25%row1-end100pxthird-lineautolast-line;grid-gap: 10px;.container divbackground-color: green;父元素網格容器屬性fr單位是指用等分網格容器剩余可用空間來設置網格軌道的大小。例如，下面的代碼會將每個網格項設置為網格容器寬度的三分之一。.containergrid-template-columns:1fr 1fr 1fr;剩余可用空間是除去所有非靈活網格項之后計算得到的。在上面的例子中，可用空間總量減去50px后，再給fr單元的值三等分：.containergrid-template-column

9、s:1fr 50px 1fr 1fr;父元素網格容器屬性3grid-template-areas屬性通過引用grid-area屬性指定網格區域名稱來定義網格模板。重復網格區域的名稱導致內容跨越這些單元格。一個點號（.）代表一個空的網格單元。這個語法本身可視作網格的可視化結構。grid-template-areas屬性值如表所示。grid-template-areas屬性值含義由網格項的grid-area指定的網格區域名稱.（點號）代表一個空的網格單元none不定義網格區域父元素網格容器屬性3grid-template-areas屬性【例10-3】創建一個4列3行的網格（示例文件10-3.htm

10、l）。.containerdisplay: grid;grid-template-columns: 100px 100px 100px 100px;grid-template-rows: 50px 200px 50px;grid-template-areas:header header header headermain main.sidebarfooter footer footer footer;.item1grid-area: header;background-color:blue; .item2grid-area: main;background-color: yellow;.ite

11、m3grid-area: sidebar;background-color: pink;.item4grid-area: footer;background-color: green;父元素網格容器屬性3grid-template-areas屬性【例10-3】創建一個4列3行的網格（示例文件10-3.html）。headermainsidebarfooter在chrome瀏覽器中預覽父元素網格容器屬性3grid-template-areas屬性【例10-3】創建一個4列3行的網格（示例文件10-3.html）。整個頂行將由header區域組成。中間一排將由兩個main區域，一個是空單元格，一個

12、sidebar區域組成。最后一行全是footer區域組成。父元素網格容器屬性4grid-column-gap和grid-row-gap屬性指定網格線(grid lines)的大小，可以想象為設置列和行之間間距的寬度。但只能在列和行之間創建間距，網格外部邊緣不會有這個間距。屬性值為：長度值。.containergrid-column-gap:;grid-row-gap:;CSS代碼格式如下：父元素網格容器屬性4grid-column-gap和grid-row-gap屬性.containergrid-template-columns:100px 50px 100px;grid-template-r

13、ows:80px auto 80px;grid-column-gap:10px;grid-row-gap:15px;效果如圖父元素網格容器屬性5justify-items和align-items屬性justify-items沿著行軸線對齊網格項內的內容，屬性值如表所示。justify-items屬性值start將內容對齊到網格區域(grid area)的左側end將內容對齊到網格區域的右側center將內容對齊到網格區域的中間（水平居中）stretch填滿網格區域寬度（默認值）父元素網格容器屬性5justify-items和align-items屬性justify-items屬性的CSS代碼格

14、式：.containerjustify-items:start|end|center|stretch;父元素網格容器屬性5justify-items和align-items屬性align-items沿著列軸線對齊，屬性值如表所示；這兩個屬性的值適用于容器內的所有網格項。align-items屬性值含義示例start將內容對齊到網格區域的頂部end將內容對齊到網格區域的底部center將內容對齊到網格區域的中間（垂直居中）stretch填滿網格區域高度（默認值）父元素網格容器屬性5justify-items和align-items屬性align-items屬性的CSS代碼格式：.containe

15、ralign-items:start|end|center|stretch;父元素網格容器屬性6justify-content和align-content屬性justify-content屬性使用情況當網格合計大小可能小于其網格容器的大小時，所有網格項都使用像素這樣的非靈活單位設置大小的情況下，可以設置網格容器內的網格的對齊方式。此屬性沿著行軸線對齊網格，屬性值如表所示。justify-content屬性值含義示例start將網格對齊到網格容器的左邊end將網格對齊到網格容器的右邊center將網格對齊到網格容器的中間（水平居中）父元素網格容器屬性6justify-content和align-

16、content屬性justify-content屬性值含義示例stretch調整網格項的寬度，允許該網格填充滿整個網格容器的寬度space-around在每個網格項之間放置一個均勻的空間，左右兩端放置一半的空間space-between在每個網格項之間放置一個均勻的空間，左右兩端沒有空間space-evenly在每個柵格項目之間放置一個均勻的空間，左右兩端放置一個均勻的空間父元素網格容器屬性6justify-content和align-content屬性justify-content屬性的CSS代碼格式：.containerjustify-content:start|end|center|st

17、retch|space-around|space-between|space-evenly;父元素網格容器屬性6justify-content和align-content屬性align-content屬性使用情況：網格合計大小可能小于其網格容器的大小時，所有網格項都使用像素這樣的非靈活單位設置大小的情況下，可以設置網格容器內的網格的對齊方式。此屬性沿著列軸線對齊網格，屬性值如表所示。align-content屬性值含義示例start將網格對齊到網格容器的頂部end將網格對齊到網格容器的底部center將網格對齊到網格容器的中間（垂直居中）父元素網格容器屬性6justify-content和al

18、ign-content屬性align-content屬性值含義示例stretch調整網格項的高度，允許該網格填充滿整個網格容器的高度space-around在每個網格項之間放置一個均勻的空間，上下兩端放置一半的空間space-between在每個網格項之間放置一個均勻的空間，上下兩端沒有空間space-evenly在每個柵格項目之間放置一個均勻的空間，上下兩端放置一個均勻的空間父元素網格容器屬性6justify-content和align-content屬性align-content屬性的CSS代碼格式：.containeralign-content:start|end|center|stre

19、tch|space-around|space-between|space-evenly;父元素網格容器屬性7grid-auto-columns和grid-auto-rows屬性指定任何自動生成的網格軌道（又名隱式網格軌道）的大小。在明確定位的行或列（通過grid-template-rows或grid-template-columns）超出定義的網格范圍時，隱式網格軌道被創建了。屬性值為：可以是長度值，百分比，或者等份網格容器中可用空間（fr單位）.containergrid-auto-columns:.;grid-auto-rows:.;CSS代碼格式如下：父元素網格容器屬性7grid-aut

20、o-columns和grid-auto-rows屬性創建隱式網格軌道，請看以下的代碼：.containerdisplay:grid;grid-template-columns:60px 60px;grid-template-rows:90px 90px;這樣會生成了一個22的網格。父元素網格容器屬性7grid-auto-columns和grid-auto-rows屬性使用grid-column和grid-row來定位你的網格項，修改為：.item-agrid-column:1/2;grid-row:2/3;.item-bgrid-column:5/6;grid-row:2/3;父元素網格容器屬性7grid-auto-columns和grid-auto-rows屬性效果分