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

資訊專欄INFORMATION COLUMN

CSS Grid 讀書筆記

liuhh / 1503人閱讀

摘要：和絕對定位和絕對定位如果父容器有定位標識等，那么下面的子會根據原始它們應該布局的位置定位，反之如果父容器沒有定位標識，那么應用了會脫離布局，并且按照傳統的方式布局。

基本概念

MDN上的解釋是這樣的

CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

另外，下面一段話摘自A Complete Guide to Grid，對于CSS Grid會有更加清楚地釋義

CSS Grid Layout (aka "Grid"), is a two-dimensional grid-based layout system that aims to do nothing less than completely change the way we design grid-based user interfaces.

總結來說：

  • CSS Grid 是一個二維的布局系統
  • CSS Grid 相比傳統布局在頁面整體劃分布局上更加出色
  • CSS Grid 并不是只能多帶帶使用，依然可以搭配Flexbox以及傳統定位布局一起使用

兼容性

摘自Can I Use中對CSS Grid的兼容性分析。

從圖中可以看出瀏覽器的兼容率整體達到84.16%，并且都是無需帶前綴的。

基本概念

網格是一組相交的水平線和垂直線，它定義了網格的列和行。我們可以將網格元素放置在與這些行和列相關的位置上。

Grid Container (網格容器)

在一個元素上應用了display: grid;或者display: inline-grid;那么就創建了一個網格容器，它下面的直接子元素都會成為網格元素，例如：





  
One

  
Two
    
I have some more content in.

    
This makes me taller than 100 pixels.
    
  

  
Three

  
Four

  
Five

從網頁的基本表現看，和平常的布局沒有什么差別，Mac OSX 【alt + command + I】，Windows 【F11】打開網頁檢查器即可看出網格布局。

Grid Tracks (網格軌跡)

從字面上的意譯來看還是比較繞口，但是我換一種說法你可能就會明白了。可以把tracks看做是table中的行和列就好了。

定義一個網格中的行和列的數量分別使用grid-template-rows和grid-template-columns來確定這個表格會有多少行以及多少列。例如：

.container {
  display: grid;
  grid-template-rows: 100px 50px 100px;
  grid-template-columns: 100px 100px 100px;
}

上面的代碼寫出了一個3 x 3的網格

在圖中可以看出網格的數量，其中的子元素會根據這些網格的數量自動填充。如果事先不知道要劃分多少行，可以使用只使用grid-template-columns來確定多少列，行數會根據有多少子item來自動計算，例如下面的：

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

5個元素如果是劃分3列，那么就應該會有兩行。

fr

如果想要均分容器的寬度，那么可以使用新引入的單位fr，新的fr單位代表網格容器中可用空間的一等份。例如：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

repeat()

可以使用repeat()函數來標記軌道重復使用的部分，例如上面的樣式就可以寫成：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

每行高度

如果想確定使用每行高度，可以使用grid-auto-rows: 100px;來確定每行只有100px

minmax()

如果想讓每行的高度隨著內容自動填充，那么可以使用minmax()來確定最小值與最大值，例如：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}

上面的樣式規定了一個3列布局，每行的高度最少為100px的網格。

Grid Line (網格線)

網格線用來構建整個網格，包括水平的和豎直的

當一個網格被構建出來，網格線就會被默認地有一個標識，看下圖：

標識的線可以是正向也可以是逆向的，例如第一行的線的標識就是[1|-4]，那么線標識有什么用？線標識主要用來確定一個子元素要占有的面積，也成為Grid Area，例如下面的代碼：

.one {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

給線命名

默認的線的標識都是用數字來表示的，當然也可以給線來命名，具體如下：

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

從圖中可以看出，第一列的第一根線被命名成了first，那么我們就可以將之前的寫法稍微改一下了：

.one {
  grid-column-start: first;
  grid-column-end: col4-start;
  grid-row-start: 1;
  grid-row-end: 3;
}

關于更多的線的命名使用方法，可以參看Naming lines when defining a grid，這里只是簡單的介紹

Grid Cell (網格單元)

可以簡單理解為一個table中的一個單元格

Grid Area (網格面積)

可以通過規定一個item的起始行和起始列來規定一個area，注意：area必須為一個 規則的舉行，而不能為一個類似于L形狀的圖形

通過行和列標識來確定一個面積，例如：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}

上面的代碼就劃定了一個兩行兩列的區域，上面的寫法可以簡寫為：

.one {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  
  /* 這種寫法對應： */
  grid-column: [grid-column-start] / [grid-column-end];
  grid-row: [grid-row-start] / [grid-row-end];
}

或者使用grid-area，

.one { 
  grid-area: 1 / 1 / 3 / 3;
  
  /* 這種寫法分別對應： */
  grid-area: [grid-row-start] / [grid-column-start] / [grid-row-end] / [grid-column-end];
}

還可以配合grid-template-areas來提前劃分區域，例如：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-template-areas: 
   "header header header"
   "siderbar main main"
   "footer footer footer"
}

上面的樣式中，規定了一個3 x 3的網格，并且劃分了區域，第一行為header，第二行為左側為siderbar，右側為main，第三行為footer，那么剩余的工作就是制定子元素對應的區域即可，例如：

.header {
  grid-area: header;
}
.siderbar {
  grid-area: siderbar;    
}
.main {
  grid-area: main;    
}
.footer {
  grid-area: footer;
}

對應的網頁文件為：


  
header

  
siderbar

  
main

最終的效果為：

Grid Gutters (網格間距)

分為行間距和列間距，類似于table中的colspan和rowspan，具體例子如下：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 10px;
  
  /* 這里的grid-gap相當于： */
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

從上一個例子中，我也設置了10px的間距，可以從圖中看出來。

Grid z-index

類似于position: absolute;絕對定位之后的層級，后面渲染的item會覆蓋前面的，因此下例中的item為Two的會覆蓋在One上

.z-index-1 {
  grid-column: 1 / 3;
  grid-row: 1;
  background-color: aliceblue;
}
.z-index-2 {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
  background-color: antiquewhite;
}

調整item1的index之后z-index: 2;，會看到item1會覆蓋在item2上面

One


Two

網格布局中的對齊

如果熟悉flex，那么一定會知道flex中的布局，相同的，在grid布局中也有相應的布局

網格布局的兩條軸線

When working with grid layout you have two axes available to align things against – the block axis and the inline axis. The block axis is the axis upon which blocks are laid out in block layout. If you have two paragraphs on your page they display one below the other, so it is this direction we describe as the block axis.

  • 塊方向的列軸

  • 文字方向的行軸

以上的文字以及圖片均摘自MDN

對齊列項目

對齊列項目主要的CSS聲明有兩個：align-items以及align-self，align-items用于所有item的設置，align-self可以多帶帶進行自定義。這兩個聲明可取的屬性值有以下幾種：

  • auto
  • normal
  • start
  • end
  • center
  • stretch
  • baseline
  • first baseline
  • last baseline

下面我們用一個栗子分別說明如下(栗子摘自MDN)：





  
Item 1

  
Item 2

  
Item 3

  
Item 4

定義了一個8 x 4列的網格，其中劃分為均勻的四個區域，分別用item[1,2,3,4]來進行填充，默認的對齊方式為stretch

可以通過幾個select來控制對齊方式，分別通過控制整體和單個item的對齊

相對于容器的列對齊

使用align-content這個屬性聲明來決定整個網格在容器中的列方向的布局，可選的值如下：

  • normal
  • start
  • end
  • center
  • stretch
  • space-around
  • space-between
  • space-evenly
  • baseline
  • first baseline
  • last baseline

可以看到圖中，當選擇了align-content: end的時候，整個網格就會在容器的下方對齊。

更多內容請參看MDN CSS_Grid_Layout

Grid 布局和其他布局的關系

Grid 和 Flex

The basic difference between CSS Grid Layout and CSS Flexbox Layout is that flexbox was designed for layout in one dimension - either a row or a column. Grid was designed for two-dimensional layout - rows, and columns at the same time.

Grid布局和Flex布局最大的不同點就是：Grid布局是二維布局，針對行和列的布局，而Flex布局為一維布局，只針對行和列的當行布局。

Tips: 這兩種布局并不沖突，可以搭配使用。可以在整體布局上采用grid布局，而細節處理可以使用flex

下面看一個栗子，來看看這兩種布局之間有什么不同（栗子來源MDN）:

編寫一個自動換行適應的布局

  • Flex方式




  
One
 
  
Two

  
Three

  
Four

  
Five
  • Grid 方式

使用flex-wrap: wrap;來限定如果一行不足就自動換行。使用auto-fill來根據容器寬度決定會有多少列，并且使用minmax()函數來確定最小為200px，最大為容器寬度來自適應。

如果屏幕上有很多剩余的空間，flex布局會均分成5列，而grid布局則會始終為3列，并且余下的兩個item也長度也 相同，而如果屏幕寬度調整為小于200時，flex布局會彈性地變為1列，但是grid布局如果沒有使用auto-fill時，會始終為設置的列數。

另外，grid布局和flex布局還有一點不同的是，在最開始的分配的時候grid布局會優先劃分布局，即會優先規定出屏幕中可以最大容忍出 多少個符合條件（這里是最小為200px， 最大為1fr）的item數量，然后依次填充。

Grid 和 絕對定位

.positioned {
  grid-template-columns: repeat(4,1fr);
  grid-auto-rows: 200px;
  grid-gap: 20px;
  position: relative;
}
.box3 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  position: absolute;
  top: 40px;
  left: 40px;
}

如果父容器有定位標識relative Or absolute等，那么下面的子item會根據原始它們應該布局的位置定位，反之如果父容器沒有 定位標識，那么應用了position: absolute;會脫離gird布局，并且按照CSS傳統的方式布局。

備注：

  • 文中部分圖片以及案例均來自于A Complete Guide to Grid和MDN
  • 本文代碼倉庫：https://github.com/Rynxiao/css-grid-tutorial/
  • 本文部分實例：http://rynxiao.com/css-grid-tutorial/

參考連接

  • MDN Css Grid Layout
  • A Complete Guid to Grid

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

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

相關文章

  • CSS技巧

    摘要：技巧使你的更加專業這是上關于技巧的一篇譯文，另外你也可以在本項目看到原文。列舉了一些很實用的技巧，比如給空內容的標簽添加內容，逗號分隔列表等等。排序算法看源碼，把它背下來吧排序算法的封裝。主要幫助初學者更好的掌握排序算法的實現。 成為專業程序員路上用到的各種優秀資料、神器及框架 成為一名專業程序員的道路上，需要堅持練習、學習與積累，技術方面既要有一定的廣度，更要有自己的深度。 Java...

    DangoSky 評論0 收藏0

  • CSS技巧

    摘要：技巧使你的更加專業這是上關于技巧的一篇譯文，另外你也可以在本項目看到原文。列舉了一些很實用的技巧，比如給空內容的標簽添加內容，逗號分隔列表等等。排序算法看源碼，把它背下來吧排序算法的封裝。主要幫助初學者更好的掌握排序算法的實現。 成為專業程序員路上用到的各種優秀資料、神器及框架 成為一名專業程序員的道路上，需要堅持練習、學習與積累，技術方面既要有一定的廣度，更要有自己的深度。 Java...

    zgbgx 評論0 收藏0

  • CSS技巧 - 收藏集 - 掘金

    摘要：筆者作為一位，將工作以來用到的各種優秀資料神器及框架整理在此，畢竟好記性不如爛鍵盤，此前端知識點大百科全書前端掘金，，不定期更新技巧前端掘金技巧，偶爾更新。計算數組的極值技巧使你的更加專業前端掘金一個幫你提升技巧的收藏集。 CSS 樣式畫各種圖形 - 前端 - 掘金下面是一些我在 CSS 中經常用到的圖案，還有一些是在css-tricks看到的。記錄一下，以后會用到。會持續更新… 一、...

    Jonathan Shieber 評論0 收藏0

  • CSS技巧 - 收藏集 - 掘金

    摘要：筆者作為一位，將工作以來用到的各種優秀資料神器及框架整理在此，畢竟好記性不如爛鍵盤，此前端知識點大百科全書前端掘金，，不定期更新技巧前端掘金技巧，偶爾更新。計算數組的極值技巧使你的更加專業前端掘金一個幫你提升技巧的收藏集。 CSS 樣式畫各種圖形 - 前端 - 掘金下面是一些我在 CSS 中經常用到的圖案，還有一些是在css-tricks看到的。記錄一下，以后會用到。會持續更新… 一、...

    SHERlocked93 評論0 收藏0

  • 前端補集 - 收藏集 - 掘金

    摘要：原文地址一個非常適合入門學習的博客項目前端掘金一個非常適合入門學習的項目，代碼清晰結構合理新聞前端掘金介紹一個由編寫的新聞。深入淺出讀書筆記知乎專欄前端專欄前端掘金去年的一篇老文章，恰好今天專欄開通，遷移過來。 破解前端面試（80% 應聘者不及格系列）：從閉包說起 - 掘金修訂說明：發布《80% 應聘者都不及格的 JS 面試題》之后，全網閱讀量超過 6W，在知乎、掘金、cnodejs ...

    YorkChen 評論0 收藏0

發表評論

0條評論

liuhh

男|高級講師

TA的文章

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