国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS--使用CSS Grid(網格)布局

xiongzenghui / 849人閱讀

摘要:一網格布局簡介布局由兩個核心組成部分是父元素和子元素,父元素是實際的網格,子元素是網格內的內容。添加這個屬性被稱為網格區域,也叫模板區域,能夠讓我們輕松地進行布局實驗。

、一 CSS Grid(網格布局)簡介

CSS Grid 布局由兩個核心組成部分是父元素和子元素,父元素 是實際的 grid(網格),子元素是 grid(網格) 內的內容。
下面是一個父元素和六個子元素

</>復制代碼

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6

要把父元素元素變成一個 grid(網格),只要簡單地把其 display 屬性設置為 grid
效果圖:

下面進行網格布局:(具體解釋在代碼中)

</>復制代碼

  1. .box {
  2. width: 350px;
  3. height: 350px;
  4. /* background: #ccc; */
  5. margin: 0 auto;
  6. grid-gap: 5px;
  7. display: grid;
  8. grid-template-columns: 100px 100px 100px;
  9. grid-template-rows: 100px 100px 100px;
  10. }
  11. .item {
  12. border: 1px solid black;
  13. box-sizing: border-box;
  14. }
  15. .div1 {
  16. grid-column-start: 1;
  17. grid-column-end: 3;
  18. /*(div1從占據從第一條網格線開始,到第三條網格線結束)*/
  19. line-height: 100px;
  20. text-align: center;
  21. background: rgb(252, 0, 0);
  22. /* grid-column: 1/3;(這是縮寫的形式) */
  23. }
  24. .div2 {
  25. line-height: 100px;
  26. text-align: center;
  27. background: rgb(252, 134, 0);
  28. }
  29. .div3 {
  30. grid-row-start: 2;
  31. grid-row-end: 4;
  32. /* grid-row: 2/4;(這是縮寫的形式) */
  33. line-height: 200px;
  34. text-align: center;
  35. background: rgb(21, 207, 108);
  36. }
  37. .div4 {
  38. grid-column-start: 2;
  39. grid-column-end: 4;
  40. line-height: 100px;
  41. text-align: center;
  42. background: rgb(18, 21, 189);
  43. /* grid-column: 2/4;(這是縮寫的形式) */
  44. }
  45. .div5 {
  46. line-height: 100px;
  47. text-align: center;
  48. background: rgb(16, 170, 197);
  49. }
  50. .div6 {
  51. line-height: 100px;
  52. text-align: center;
  53. background: rgb(172, 126, 199);
  54. }

上面代碼中的網格線(如圖箭頭所指的地方就是一根網格線):

二、響應式網格布局

和上面的差不多(添加了以下的內容)
使用grid-template-columns 屬性創建一個 12 列的網格,每個列都是一個單位寬度(總寬度的 1/12 )
使用 grid-template-rows 屬性創建 3 行

使用 grid-gap 屬性在網格中的網格項之間添加一個間隙。

代碼如下:

</>復制代碼

  1. 頂部(一個點表示一個空白的格子),所以距離左邊和右邊各有一個格子的距離。
  2. 中間2所以可以利用空白的格子來對你所要拍的網頁來進行布局

添加 grid-template-areas
這個屬性被稱為網格區域,也叫模板區域,能夠讓我們輕松地進行布局實驗。
效果圖:
][3]
代碼如下:(具體描述在代碼中)

</>復制代碼

  1. .container {
  2. display: grid;
  3. grid-template-columns: repeat(12, 1fr);
  4. grid-template-rows: 50px 350px 50px;
  5. grid-gap: 5px;
  6. grid-template-areas: ". h h h h h h h h h h ." " m m c c c c c c c c c c" "f f f f f f f f f . . .";
  7. }
  8. .container>div {
  9. border: 1px solid #ccc;
  10. box-sizing: border-box;
  11. }
  12. .header {
  13. text-align: center;
  14. line-height:50px;
  15. grid-area: h;
  16. color:rgb(219, 52, 169);
  17. }
  18. .menu {
  19. grid-area: m;
  20. text-align: center;
  21. line-height:350px;
  22. }
  23. .content {
  24. text-align: center;
  25. line-height:350px;
  26. grid-area: c;
  27. color:rgb(25, 158, 69);
  28. }
  29. .footer {
  30. color:rgb(212, 112, 18);
  31. text-align: center;
  32. line-height:50px;
  33. grid-area: f;
  34. }

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/113640.html

相關文章

  • 翻譯 | CSS網格CSS Grid布局入門

    摘要:瀏覽器兼容性網格布局從開始收到支持,微軟在會更新對網格布局的支持。微軟的瀏覽器和有一種比較舊的實現,所以有不少限制,我們會簡單介紹新的實現方式和老的實現方式之間的區別,這樣你能知道如何規避他們。 原文地址:Getting to know CSS Grid Layout 原文作者:Chris Wright 譯者:華翔 校對者:珂珂、干干 翻譯 | CSS網格(CSS Grid)布局入...

    Ashin 評論0 收藏0
  • CSS Grid 布局完全指南(圖解 Grid 詳細教程)

    摘要:重復網格區域的名稱導致內容跨越這些單元格。中間一排將由兩個區域,一個是空單元格,一個區域組成。你可以使用任意數量的相鄰的點來聲明單個空單元格。只要這些點之間沒有空隙隔開,他們就代表一個單獨的單元格。? CSS Grid 布局是 CSS 中最強大的布局系統。與 flexbox 的一維布局系統不同,CSS Grid 布局是一個二維布局系統,也就意味著它可以同時處理列和行。通過將 CSS 規則應用...

    flybywind 評論0 收藏0
  • CSS Grid布局:什么是網格布局

    摘要:網格單元格網格單元格是指四條網格線之間的空間。所以它是最小的單位,就像表格中的單元格。圖中突出顯示的網格區域是行線和列線之間的區域,其主要包括了四個網格單元格。 CSS Grid現在已經被W3C納入到CSS3的一個布局模塊當中,被稱為CSS Grid Layout Module。而我們較為熟悉的還是將其想像成網格或者柵格,也就是早期的960gs。不管是網格還是柵格或者現在的CSS Gr...

    xiaoqibTn 評論0 收藏0
  • (譯)原生CSS網格布局學習筆記

    摘要:你可以用網格這樣做這樣的顯示效果是沒什么錯誤的,當使用網格,重新定義列數非常簡單。絕對定位當我們絕對定位一個網格元素的時候,這個元素會跑到它的容器中,我們可以用和來定位它。最簡單的命名約定使用網格自動編號。 注:此文是我翻譯的第一篇技術文章。適合有一定CSS原生網格布局使用經驗的開發者(讀前需要先去了解一下原生CSS網格的語法),原生CSS網格布局(Native CSS grid)截止...

    v1 評論0 收藏0
  • (譯)原生CSS網格布局學習筆記

    摘要:你可以用網格這樣做這樣的顯示效果是沒什么錯誤的,當使用網格,重新定義列數非常簡單。絕對定位當我們絕對定位一個網格元素的時候,這個元素會跑到它的容器中,我們可以用和來定位它。最簡單的命名約定使用網格自動編號。 注:此文是我翻譯的第一篇技術文章。適合有一定CSS原生網格布局使用經驗的開發者(讀前需要先去了解一下原生CSS網格的語法),原生CSS網格布局(Native CSS grid)截止...

    Warren 評論0 收藏0
  • CSS Grid布局網格單元格布局

    摘要:基于網格線的占位區網格中的單元格是有網格線劃分出來的,那么在網格布局中,同樣可以使用網格線來給子元素設置占位區域。也就是說這四條網格線間的區域是一個單元格。 CSS Grid布局對于我等來說就是一個全新的布局,但國外很多同行朋友已對這種布局做了全面的探知。前面花了兩篇內容(《CSS Grid布局:什么是網格布局》和《[CSS Grid布局:瀏覽器開啟CSS Grid Layout]ht...

    maxmin 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<