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

資訊專欄INFORMATION COLUMN

GRID布局

amc / 975人閱讀

摘要：布局兼容性支持老的語法目前大多數(shù)的瀏覽器實(shí)現(xiàn)了支持或者停留在實(shí)驗(yàn)特性基本概念網(wǎng)格容器網(wǎng)格項(xiàng)網(wǎng)格項(xiàng)網(wǎng)格軌道網(wǎng)格單元網(wǎng)格區(qū)的屬性定義在容器的屬性生成塊級網(wǎng)絡(luò)生成行內(nèi)網(wǎng)絡(luò)作為網(wǎng)格項(xiàng)需要繼承父網(wǎng)格的行列大

GRID布局 兼容性

IE10 IE11 支持老的語法
目前大多數(shù)的瀏覽器實(shí)現(xiàn)了支持, 或者停留在實(shí)驗(yàn)特性

基本概念

Grid Container 網(wǎng)格容器
Grid Item 網(wǎng)格項(xiàng)
Grid Line 網(wǎng)格項(xiàng)
Grid Track 網(wǎng)格軌道
Grid Cell 網(wǎng)格單元
Grid Area 網(wǎng)格區(qū)

Container的屬性

定義在容器的屬性 display grid-template-columns grid-template-rows grid-template-areas grid-column-gap grid-row-gap grid-gap justify-items align-items justify-content align-content grid-auto-columns grid-auto-rows grid-auto-flow grid

display

  grid                生成塊級網(wǎng)絡(luò)
  inline-grid         生成行內(nèi)網(wǎng)絡(luò)
  subgrid             作為網(wǎng)格項(xiàng)需要繼承父網(wǎng)格的行列大小

grid-template-columns grid-template-columns 設(shè)置行和列的大小

  grid-template-columns: 40px 50px auto 50px 40px ;
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
    // line-name track-size line-name 在行軌道或列軌道兩邊是網(wǎng)格線
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];  // 網(wǎng)格線double name
  grid-template-columns: repeat(3, 20px [col-start]) 5%;  // 等價(jià)于下面的表達(dá)
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
  grid-template-columns: repeaat(3, 1fr);  // 將容器分為三等份
  grid-template-columns: 1fr 50px 1fr 1fr;  // fr 的行列將劃分剩余部分

grid-template-areas

通過獲取網(wǎng)格項(xiàng)中的grid-area屬性值（名稱），來定義網(wǎng)格模版。重復(fù)網(wǎng)格區(qū)（grid-area）名稱將跨越網(wǎng)格單元格，‘.’代表空網(wǎng)格單元

  .container {
    display: grid;
    grid-template-columns: 50px 50px 50px 50px;
    grid-template-rows: auto;
    grid-template-areas: "header header header header" "main main . sidebar" "footer footer footer footer"
  }
  .item-a{
    grid-area: header;
  }
  .item-b{
    grid-area: main;
  }
  .item-c{
    grid-area: sidebar;
  }
  .item-d{
    grid-area: footer;
  }

grid-gap: grid-row-gap 和 grid-column-gap 的簡寫

justify-items
垂直于列網(wǎng)格線對齊

  start end center stretch(默認(rèn))

align-items
垂直于行網(wǎng)格線對齊

  start end center stretch

justify-content
使用px等非彈性單位定義, 總網(wǎng)格區(qū)域大小可能會小于網(wǎng)格容器, 設(shè)置網(wǎng)格橫向?qū)ζ浞绞?/p> 

  start           頂部對齊
  end             底部對齊
  center          居中對齊
  stretch         填滿網(wǎng)格容器
  space-around    網(wǎng)格項(xiàng)兩邊間距相等，網(wǎng)格項(xiàng)之間間隔是單側(cè)的2倍
  space-between   兩邊對齊, 網(wǎng)格項(xiàng)之間間隔相等
  space-evenly    網(wǎng)格項(xiàng)間隔相等

align-content

grid-auto-columns grid-auto-rows
自動生成隱式網(wǎng)格軌道, 當(dāng)定位網(wǎng)格超出網(wǎng)格容器的范圍時(shí), 將自動創(chuàng)建隱式網(wǎng)絡(luò)軌道

grid-auto-flow

  row         按照行依次從左到右排列
  column      按照列依次從上到下排列
  dense       按先后順序排列

grid

  grid: 200px auto / 1fr auto 1fr;

Item的屬性

grid-column grid-column-start grid-column-end 的縮寫
grid-row grid-row-start grid-row-end 的縮寫
grid-area 父容器定義的 grid-template-areas
justify-self
align-self

justify-self 定義單個網(wǎng)格項(xiàng)垂直于列網(wǎng)格線的對齊方式

  start:        網(wǎng)格區(qū)域左對齊
  end:          網(wǎng)格區(qū)域右對齊
  center:       網(wǎng)格區(qū)域居中
  stretch:      網(wǎng)格區(qū)域填滿(默認(rèn))

align-self 定義單個網(wǎng)格項(xiàng)垂直于行網(wǎng)格線的對齊方式

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/114674.html

相關(guān)文章

  • 翻譯 | CSS網(wǎng)格（CSS Grid）布局入門

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

    Ashin 評論0 收藏0

  • Grid布局——頁面布局如此簡單

    摘要：網(wǎng)格單元格被劃分之后每一個格子就是單元格，也是布局的最小單位。網(wǎng)格區(qū)域若干個單元格拼接而成的區(qū)域。網(wǎng)格間隙單元格與單元格之間的距離，可以垂直也可以水平。 前言 CSS網(wǎng)格布局用于將頁面分割成數(shù)個主要區(qū)域，或者用來定義組件內(nèi)部元素間大小、位置和圖層之間的關(guān)系。像表格一樣，網(wǎng)格布局讓我們能夠按行或列來對齊元素。 但是，使用CSS網(wǎng)格可能還是比CSS表格更容易布局。 例如，網(wǎng)格容器的子元素可...

    Scorpion 評論0 收藏0

  • css grid布局入門

    摘要：簡介網(wǎng)格布局又稱網(wǎng)格，是一種二維網(wǎng)格布局系統(tǒng)。在處理網(wǎng)頁布局方面一直做的不是很好。網(wǎng)格容器中的所有子元素就會自動變成網(wǎng)格項(xiàng)目網(wǎng)格線組成網(wǎng)格線的分界線。 簡介 CSS網(wǎng)格布局（又稱網(wǎng)格），是一種二維網(wǎng)格布局系統(tǒng)。CSS在處理網(wǎng)頁布局方面一直做的不是很好。一開始我們用的是table（表格）布局，然后用float(浮動)，position（定位）和inline-block（行內(nèi)塊）布局，但是...

    wzyplus 評論0 收藏0

  • CSS Grid 讀書筆記

    摘要：和絕對定位和絕對定位如果父容器有定位標(biāo)識等，那么下面的子會根據(jù)原始它們應(yīng)該布局的位置定位，反之如果父容器沒有定位標(biāo)識，那么應(yīng)用了會脫離布局，并且按照傳統(tǒng)的方式布局。基本概念 MDN上的解釋是這樣的 CSS Grid Layout excels at dividing a page into major regions or defining the relationship in term...

    liuhh 評論0 收藏0

  • 如何使用Flexbox和CSS Grid，實(shí)現(xiàn)高效布局

    摘要：代碼如下頁面內(nèi)容樣式接下來，將側(cè)邊欄和主內(nèi)容區(qū)域使用一個包含起來。列和行布局部分橫跨所有的列。也可以使用簡寫，起始值和結(jié)束值位于同一行上，并用斜杠分隔。設(shè)計(jì)方法總結(jié)以上的布局設(shè)計(jì)中，使用了來進(jìn)行整體布局以及設(shè)計(jì)中的非線性部分。 CSS 浮動屬性一直是網(wǎng)站上排列元素的主要方法之一，但是當(dāng)實(shí)現(xiàn)復(fù)雜布局時(shí)，這種方法不總是那么理想。幸運(yùn)的是，在現(xiàn)代網(wǎng)頁設(shè)計(jì)時(shí)代，使用 Flexbox 和 CSS...

    eternalshallow 評論0 收藏0

  • CSS Grid布局：網(wǎng)格單元格布局

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

    maxmin 評論0 收藏0

發(fā)表評論

0條評論

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