1. 程式人生 > >CSS網格佈局(Grid)完全教程

CSS網格佈局(Grid)完全教程

本文譯自《A Complete Guide to Grid》。由於譯者水平有限,如有錯誤,請不吝指正。文中所有圖的版權歸原作者所有

導語:CSS網格佈局是目前CSS中可用的最強大的佈局系統。它是二維繫統,即可以處理行和列,不像flexbox只是一維繫統。我們通過為父元素(變為grid container)和子元素(變為grid items)應用CSS規則來使用Grid佈局。

一、介紹

CSS網格佈局(亦稱Grid)是一種基於網格的二維佈局系統,主要致力於改變我們在頁面中基於網格設計頁面的方式。我們通常使用CSS佈局網頁,但有時並不好用。一開始我們使用table,之後用浮動、定位和行內塊級元素,但是所有這些方法都需要相容,並且未實現一些重要功能(如垂直居中)。彈性盒子可以提供幫助,但它主要面向一維佈局,不能處理複雜的兩維佈局(彈性盒子和網格佈局其實配合得不錯)。只要我們寫網頁,我們不得不考慮那些佈局問題的hack實現,而網格佈局是首個特地為解決這種問題而創造出來的模組。

我寫這篇教程主要是因為受到兩件事的影響。一個是Rachel Andrew的那本了不起的書——Get Ready for CSS Grid Layout。這本書清晰透徹的介紹了Grid,也是本文的基礎。我非常提倡你能買本讀一下。另一個是Chris Coyier的A Complete Guide to Flexbox,它指引我使用flexbox來寫佈局。這篇文章幫助了很多人,從在google中搜索‘flexbox’該文排在第一位就能看出。你會看到兩篇文章有很多相似之處,因為為什麼我不借鑑好的東西中呢?

我寫這篇教程的目的是介紹目前存在的最新版本中Grid的概念。我不會覆蓋過時的IE語法,而且會隨著版本的成熟定期更新教程。

二、基礎和瀏覽器支援

首先我們要使用display:grid定義一個網格佈局容器,用grid-template-columnsgrid-template-rows設定列和行的尺寸,然後按grid-columngrid-row把子元素放進容器中。同flexbox類似,網格項的順序並不重要,可以按任意順序放置它們。這也使得使用媒體查詢調整網格非常簡單。想像一下,定義整個頁面的佈局,然後只需幾行CSS程式碼就能將其重排為適應另一個尺寸的螢幕。Grid真是有史以來引入的最強大的CSS模組。

截至2017年三月,Chrome(包括安卓端),Firefox、Safari(包括iOS端)和Opera在內的很多瀏覽器都支援原生的無字首的CSS網格佈局。IE10和11只部分支援,但使用的是過時的語法。Edge也已經宣告支援。

#桌面端
Chrome Opera Firefox IE Edge Safari
57 44 52 11* 16 10.1
#移動端、平板
iOS Safari Opera Mobile Opera Mini Android Android Chrome Android Firefox
10.3 No No 56 61 55

除了微軟,瀏覽器廠商都在嚴格規範Grid直到規範成熟。這是一件好事,因為意味著我們不必學習多種語法。

在生產環境中使用Grid只是時間問題。是時候學它了。

三、重要術語

在我們正式學習Grid之前先了解一下其術語。由於這裡的概念很類似,所以如果不先記住Grid規範定義的含義的話很容易弄混淆。但不用擔心,術語並不是很多。

Grid Container
定義了display: grid的元素就成了網格容器。它是網格項的直接父元素。在下面的例子中,container就是Grid Container。

<div class="container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
</div>

Grid Item

網格項是網格容器的子元素(如直接後代)。這裡item元素是grid items,但是sub-item不是。

<div class="container">
  <div class="item"></div> 
  <div class="item">
    <p class="sub-item"></p>
  </div>
  <div class="item"></div>
</div>

Grid Line

網格線是組成網格結構的分割線。它們要麼是垂直的(column grid lines),要麼是水平的(row grid lines),來分割行或列。下面是一個列網格線的例子。

這裡寫圖片描述

Grid Track

網格軌跡是兩個相鄰的網格線之間的空間。你可以把它想成網格的列或行。下面是一個在第二條和第三條行網格線的網格軌跡的例子。

這裡寫圖片描述

Grid Cell

網格單元是由兩個相鄰的行網格線或列網格線圍成的區域。它是網格的一個獨立單元。下面是一個處於行網格線1、2和列網格線2、3之間的網格單元的例子。

這裡寫圖片描述

Grid Area

網格區域是四條網格線圍成的區域。網格區域可能由任意數量的網格單元構成。下面是一個處於行網格線1、3和列網格線1、3之間的網格區域的例子。

這裡寫圖片描述

四、網格佈局屬性表

Grid Container的屬性

該屬性將元素定義為網格容器,建立一個網格格式上下文。

取值:

  • grid -生成塊級網格
  • inline-grid -生成行級網格
  • subgrid -如果網格盒子本身是一個網格項(如巢狀網格佈局),使用該值表示行列尺寸來源於其父元素而非自身

    
    .container {
      display: grid | inline-grid | subgrid;
    }

    注意:column、float、clear、vertical-align對網格盒子沒有影響。

用以空格分隔的列表值來定義網格的列和行。值表示軌跡大小,空格表示網格線。

取值:

  • <track-size> - 可以為長度、百分比或網格可用空間的一部分(單位是fr)
  • <line-name> - 可以取任意名稱
.container {
  grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
  grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}

例如:
當兩個軌跡值之間留有空格的話,網格線會被自動賦值為一個數字名字:

.container{
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

這裡寫圖片描述

不過也可以為網格線顯示宣告一個名字。注意下面宣告名稱的括號語法:

.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];
}

這裡寫圖片描述

注意:每一行可能有不止一個名字。如下所示,第二行有row-1end和row2-start兩個名字:

.container{
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

如果定義中包含重複的部分,可以使用repeat()來簡化書寫:

.container {
  grid-template-columns: repeat(3, 20px [col-start]) 5%;
}

這等同於:

.container {
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
}

fr單允許我們將軌道尺寸設定為網格容器的一部分。如下所示會將每個專案的尺寸設定為容器的三分之一:

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

可用空間的計算是要除去非彈性專案的。如下所示,fr單元可用空間的大小不包括50px:

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

通過引用由grid-area屬性指定的網格區域的名字來定義網格模板。重複網格區域的名稱會使其跨越那些單元格。一個句點表示一個空單元格。語法本身提供了對網格結構的視覺化。

取值:

  • <grid-area-name> - grid-area屬性指定的網格區域的名字
  • . - 句點表示一個空網格
  • none - 不定義任何網格區域
.container {
  grid-template-areas: 
    "<grid-area-name> | . | none | ..."
    "...";
}

舉個例子:

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  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";
}

這會建立一個三行四列的網格。頂部單元格組成了header區域,中間一行由兩個main區域、一個空區域、一個sidebar區域構成,最後一行是footer。

這裡寫圖片描述

宣告的每一行都要有相同數量的單元格。

您可以使用任意數量的相鄰句點表示一個單獨的空單元格。只要句點之間沒有間隔它們就表示一個單獨的單元。

要注意,該語法命名的是區域,而非行。不過使用該語法定義區域後,該區域兩端都會自動獲得命名。如,定義某個網格區域為foo,則該區域起始行和起始列的網格線將叫做foo-start,終止行和列將叫做foo-end。這也意味著一些網格線或有好幾個名字。比如上例中最左邊的網格線有三個名字:header-start、main-start和footer-start。

同時設定grid-template-rowsgrid-template-columnsgrid-template-areas的簡寫。

取值:

  • none - 設定這三個屬性為最初的值
  • subgrid - 設定grid-template-rowsgrid-template-columnssubgridgrid-template-areas為起始值
  • <grid-template-rows>/<grid-template-columns> - 設定這兩個屬性為指定值,設定grid-template-areas為none
.container {
  grid-template: none | subgrid | <grid-template-rows> / <grid-template-columns>;
}

該屬性也接受複雜的同時設定三個值的語法。如下所示:

.container {
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end] / auto 50px auto;
}

它等同於下面的程式碼:

.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas: 
    "header header header" 
    "footer footer footer";
}

因為該屬性並不會重置一些隱式屬性(如grid-auto-columnsgrid-auto-rowsgrid-auto-flow),而在很多時候我們需要重置,所以推薦用grid屬性代替grid-template

這兩個屬性指定網格線的尺寸。可以把它們想成行、列之間的槽寬。

取值:

  • <line-size> - 長度值
.container {
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}

如下所示:

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}

這裡寫圖片描述

槽只存在於行列之間,不會在外邊緣建立。

grid-row-gapgrid-column-gap的簡寫。

取值:

  • <grid-row-gap> <grid-column-gap> - 長度值
.container {
  grid-gap: <grid-row-gap> <grid-column-gap>;
}

舉個例子:

.container{
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-gap: 10px 15px;
}

<grid-row-gap>未指定會設定為同<grid-column-gap>相同的值。

沿著行軸對齊網格項的內容(不同於align-items是沿列軸)。該屬性的值會應用到網格容器的所有網格項上。

取值:

  • start - 內容沿網格區域左端點對齊
  • end - 內容沿網格區域右端點對齊
  • center - 內容沿網格區域水平對齊
  • stretch - 內容填滿整個網格區域的寬度(預設值)
.container {
  justify-items: start | end | center | stretch;
}

如下所示:

.container {
  justify-items: start;
}

這裡寫圖片描述

.container{
  justify-items: end;
}

這裡寫圖片描述

.container{
  justify-items: center;
}

這裡寫圖片描述

.container{
  justify-items: stretch;
}

這裡寫圖片描述

網格項可以用justify-self屬性單獨設定。

沿列軸對齊網格項的內容(同沿行軸設定的justify-item相反)。該值應用到網格容器的所有網格項。

取值:

  • start - 內容沿網格區域頂部對齊
  • end - 內容沿網格區域底部對齊
  • center - 內容沿網格區域垂直對齊
  • stretch - 內容填滿整個網格區域的高度(預設值)
.container {
  align-items: start | end | center | stretch;
}

舉例如下:

.container {
  align-items: start;
}

這裡寫圖片描述

.container {
  align-items: end;
}

這裡寫圖片描述

.container {
  align-items: center;
}

這裡寫圖片描述

.container {
  align-items: stretch;
}

這裡寫圖片描述

網格項可以用align-self屬性單獨設定。

有時候網格的總尺寸比網格容器要小,比如當網格專案用諸如px這樣的非可伸縮單位時。在這種情況下,我們就要設定網格相對於網格容器的對齊方式了。該屬性將使網格沿行軸對齊(與align-content是沿列軸對齊正相反)。

取值:

  • start -網格沿網格容器的左端對齊
  • end -網格沿網格容器的右端對齊
  • center -網格沿網格容器水平居中對齊
  • stretch -調整網格專案的尺寸使網格填滿網格容器的寬度
  • space-around -網格項均勻分佈,兩端的空間是兩個網格項之間空間的一半
  • space-between -網格項均勻分佈,兩端不留空間
  • space-evenly -網格項均勻分佈,包括兩端
.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;    
}

如下所示:

.container {
  justify-content: start;
}

這裡寫圖片描述

.container {
  justify-content: end; 
}

這裡寫圖片描述

.container {
  justify-content: center;  
}

這裡寫圖片描述

.container {
  justify-content: stretch; 
}

這裡寫圖片描述

.container {
  justify-content: space-around;    
}

這裡寫圖片描述

.container {
  justify-content: space-between;   
}

這裡寫圖片描述

.container {
  justify-content: space-evenly;    
}

這裡寫圖片描述

有時候網格的總尺寸比網格容器要小,比如當網格專案用諸如px這樣的非可伸縮單位時。在這種情況下,我們就要設定網格相對於網格容器的對齊方式了。該屬性將使網格沿列軸對齊(與justify-content是沿橫軸對齊正相反)。

取值:

  • start -網格沿網格容器的頂部對齊
  • end -網格沿網格容器的底部對齊
  • center -網格沿網格容器垂直居中對齊
  • stretch -調整網格專案的尺寸使網格填滿網格容器的高度
  • space-around -網格項均勻分佈,兩端的空間是兩個網格項之間空間的一半
  • space-between -網格項均勻分佈,兩端不留空間
  • space-evenly -網格項均勻分佈,包括兩端
.container {
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

如下所示:

.container {
  align-content: start;
}

這裡寫圖片描述

.container {
  align-content: end;   
}

這裡寫圖片描述

.container {
  align-content: center;    
}

這裡寫圖片描述

.container {
  align-content: stretch;   
}

這裡寫圖片描述

.container {
  align-content: space-around;  
}

這裡寫圖片描述

.container {
  align-content: space-between; 
}

這裡寫圖片描述

.container {
  align-content: space-evenly;  
}

這裡寫圖片描述

指定任何自動生成的網格軌跡(也稱隱式網格軌跡)的大小。 當您明確定位超出定義網格範圍的行或列(通過grid-template-rows / grid-template-columns)時,將建立隱式網格軌跡。

取值:

  • <track-size> -可以是一個長度、百分比或網格可用空間的一部分(單位是fr)
.container {
  grid-auto-columns: <track-size> ...;
  grid-auto-rows: <track-size> ...;
}

下面將說明如何隱式建立網格軌跡,考慮如下程式碼:

.container {
  grid-template-columns: 60px 60px;
  grid-template-rows: 90px 90px
}

這裡寫圖片描述

這會建立2×2的網格。

如果像下面那樣使用grid-column和grid-row放置網格項的話:

.item-a {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item-b {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}

這裡寫圖片描述

.item-b起始於列線5,終止於列線6,但我們定義的網格並沒有列線5和6。因為我們參考的線並不存在,所以寬度為0的隱式的軌跡會被建立來填充缺口。我們可以使用grid-auto-columns和grid-auto-rows來指定這些隱式軌跡的寬度:

.container {
  grid-auto-columns: 60px;
}

這裡寫圖片描述

如果您沒有明確將網格項放置在網格里,則自動佈局演算法會自動放置該專案。該屬性控制自動佈局演算法的工作方式。

取值:

  • row - 告訴自動佈局演算法依次填充每一行,必要時新增新行
  • column - 告訴自動佈局演算法依次填充每一行列,必要時新增新列
  • dense - 告訴自動佈局演算法如果小專案出現的晚的話,就先嚐試在網格中填充孔
.container {
  grid-auto-flow: row | column | row dense | column dense
}

注意dense可能會使您的專案無序,

舉例如下:

考慮如下html結構:

<section class="container">
  <div class="item-a">item-a</div>
  <div class="item-b">item-b</div>
  <div class="item-c">item-c</div>
  <div class="item-d">item-d</div>
  <div class="item-e">item-e</div>
</section>

定義一個2行5列的網格,並設定grid-auto-flowrow(這也是預設值)。

.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: row;
}

當把這些專案放到網格里時,您可能只指定了兩個:

.item-a {
  grid-column: 1;
  grid-row: 1 / 3;
}
.item-e {
  grid-column: 5;
  grid-row: 1 / 3;
}

因為我們設定了grid-auto-flowrow,我們的網格看起來如下圖所示。注意到有3個專案(item-b、item-c和item-d)雖然並沒有顯示放置,但也流動到了可用行的位置。

這裡寫圖片描述

要是設定grid-auto-flowcolumn,item-b、item-c和item-d會按列流動。

.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: column;
}

這裡寫圖片描述

#grid

同時宣告grid-template-rowsgrid-template-columnsgrid-template-areasgrid-auto-rowsgrid-auto-columnsgrid-auto-flow等屬性的簡寫。grid-column-gapgrid-row-gap`會被設定為初始值,儘管在該屬性中沒有顯示設定。

取值:

  • none - 設定所有子屬性為起始值
  • <grid-template-rows>/<grid-template-columns> - 分別設定這兩個值為指定值,而其他子屬性值為起始值。
  • <grid-auto-flow>[<grid-auto-rows>[/<grid-auto-columns>]] - 分別接收與這三個屬性完全相同的值。如果省略grid-auto-columns,則將其設定其為grid-auto-rows指定的值。 如果兩者都被省略,則將它們設定為其初始值。
.container {
    grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]];
}

例子:

接下來的兩個程式碼是等價的:

.container {
  grid: 200px auto / 1fr auto 1fr;
}
.container {
  grid-template-rows: 200px auto;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: none;
}

接下來的兩個程式碼塊是等價的:

.container {
  grid: column 1fr / auto;
}
.container {
  grid-auto-flow: column;
  grid-auto-rows: 1fr;
  grid-auto-columns: auto;
}

它同樣接收一個更復雜但相當方便的語法來同時設定所有屬性。指定grid-template-areasgrid-template-rowsgrid-template-columns,所有其他子屬性都設定為其初始值。 您正在做的是指定與其各自的網格區域一致的行名和軌道大小。 這很容易用一個例子來描述:

.container {
  grid: [row1-start] "header header header" 1fr [row1-end]
        [row2-start] "footer footer footer" 25px [row2-end]
        / auto 50px auto;
}

這等價於:

.container {
  grid-template-areas: 
    "header header header"
    "footer footer footer";
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;    
}

Grid Items屬性及取值

這幾個屬性決定網格專案應處於指定的網格線的什麼位置。grid-column-start/grid-row-start是專案的起始線,grid-column-end/grid-row-end是專案的終止線。

取值:

  • <line> - 可以是一個數字來引用一個有編號的網格線,或者一個名字來引用有名子的網格線
  • span <number> - 專案會橫跨提供數量的網格軌跡
  • span <name> - 專案會橫跨提供的指定名字的行直到下一行
  • auto - 表示自動佈局,自動跨度或預設跨度為1
.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto
  grid-column-end: <number> | <name> | span <number> | span <name> | auto
  grid-row-start: <number> | <name> | span <number> | span <name> | auto
  grid-row-end: <number> | <name> | span <number> | span <name> | auto
}

如下例:

.item-a {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start
  grid-row-end: 3
}

這裡寫圖片描述

.item-b {
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2
  grid-row-end: span 2
}

這裡寫圖片描述

若沒有宣告grid-column-end/grid-row-end,則跨度預設為1。

專案可以彼此覆蓋。可以用z-index來控制它們的堆疊順序。

分別是grid-column-start+grid-column-endgrid-row-start/grid-row-end的縮寫。

取值:

  • <start-line> / <end-line> - 每個都接收與其普通寫法同樣的值,包括跨度。
.item {
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

舉例如下:

.item-c {
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}

這裡寫圖片描述

如沒有宣告終止行的值,則預設跨度為1。

該屬性可以引用grid-template-areas建立的模板名字。另外,它也可以作為grid-row-start+grid-column-start+grid-row-end+grid-column-end的簡寫。

取值:

  • <name> - 選擇的名字
  • <row-start> / <column-start> / <row-end> / <column-end> - 可以是帶編號或命名的網格線
.item {
  grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

舉例如下:

作為給專案宣告名稱的一種方式:

.item-d {
  grid-area: header
}

作為grid-row-start + grid-column-start + grid-row-end + grid-column-end四個屬性的簡寫:

.item-d {
  grid-area: 1 / col4-start / last-line / 6
}

這裡寫圖片描述

沿橫軸對齊網格項的內容(與沿縱軸對齊內容的align-self正相反)。其值會在單個網格項內生效。

取值:

  • start - 沿網格區域的左端對齊
  • end - 沿網格區域的右端對齊
  • center - 沿網格區域水平居中對齊
  • stretch - 填充網格區域的整個寬度(預設值)
.item {
  justify-self: start | end | center | stretch;
}

如下所示:

.item-a {
  justify-self: start;
}

這裡寫圖片描述

.item-a {
  justify-self: end;
}

這裡寫圖片描述

.item-a {
  justify-self: center;
}

這裡寫圖片描述

相關推薦

CSS網格佈局Grid完全教程

本文譯自《A Complete Guide to Grid》。由於譯者水平有限,如有錯誤,請不吝指正。文中所有圖的版權歸原作者所有。 導語:CSS網格佈局是目前CSS中可用的最強大的佈局系統。它是二維繫統,即可以處理行和列,不像flexbox只是一維繫統。我們

CSS+DIV佈局

佈局的三種方式 一.常規流 以前沒有學佈局的時候,屬於常規流 元素按照常規顯示方式顯示,塊級元素垂直排列、行內元素就是水平排列   二.浮動 float:left; float:right: float:none; 典型應用兩個div水平排列 ******************

CSS+DIV佈局

*************************使用CSS+DIV佈局*******************************   ********************************盒模型******************************* html中每一個元素

java網格佈局GridLayout應用

我們先分析一下: 用BorderLayout顯然是不合適的,賬號和密碼佔據的位置差不多。我們觀察一下,發現這三行寬度基本一致。 由此我們可以考慮用網格佈局(GridLayout),分為3行1列,每行裝一個JPanel。JPanel預設為FlowLayout 佈局,由

如何用CSS快速佈局—— 佈局元素詳細

要快速進行網頁排版佈局,則必須對佈局的元素有清晰的瞭解,才不會總是在細節處出錯。這一篇先詳解有關佈局的因素作為佈局基礎:塊級元素and內聯元素、盒模型、準確定位、元素對齊、樣式繼承。下一篇則重點描述快速佈局思路。 一、什麼是塊級元素和內聯元素 1,塊級元素: display

Flex 佈局教程:語法篇 作者: 阮一峰 日期: 2015年7月10日 網頁佈局layoutCSS 的一個重點應用。 佈局的傳統解決方案,基於盒狀模型,依賴 display 屬性 + po

網頁佈局(layout)是 CSS 的一個重點應用。 佈局的傳統解決方案,基於盒狀模型,依賴 display 屬性 + position屬性 + float屬性。它對於那些特殊佈局非常不方便,比如,垂直居中就不容易實現。 2009年,W3C 提出了一種新的方案----Flex 佈局,可以簡

CSS佈局補充

主站:     <div vlass='pg-header'>         <div style='width:980px;margin: 0 auto;'> 內容自動

css佈局之浮動佈局float

CSS佈局模型 流動佈局 流動佈局,為網頁自帶佈局方式也就是說網頁預設情況下就是採用流動佈局方式來完成對HTML元素的佈置。   流動佈局主要有2大特徵: - 從塊級元素上來說,塊級元素在網頁上預設採用從上到下的順序來完成分佈,每個塊級元素獨自一行,不能與其它的任何

Bootstrap 網格系統Grid System

<div class="container"> <div class="row" > <div class="col-xs-6 col-sm-3" style="background-color:

CSS 小結筆記之伸縮佈局flex

之前塊級元素佈局在同一行,可以通過display或position或float來實現,而本篇介紹一個新的方法——flex(彈性佈局)。 flex 為和模型佈局提供了極大地靈活性,所謂彈性佈局即可根據大小判定自動伸縮。 flex相關的各個屬性如下: 1、display:flex;在父盒子定義flex,子盒子才能

css網格佈局Grid

  記錄一下grid佈局的應用,因為在日常工作中,運用element-ui的關係,導致grid佈局並不是運用特別多,本身這類ui就已經在實現上運用到了,但是還是需要知道如何使用。 <div class="par-grid"> <div class="

HTML CSS + DIV實現整體佈局 推薦

HTML CSS + DIV實現整體佈局 1、技術目標: 開發符合W3C標準的Web頁面 理解盒子模型 實現DIV+CSS整體佈局 2、什麼是W3C標準? W3C:World Wide Web Consortium,全球資訊網聯盟 W3C的職能:負責制定和維護W

交叉驗證Cross Validation網格搜尋Grid Search的原理及實證分析

1.交叉驗證背景在機器學習演算法中,當資料量不充分時,需要對資料進行重複使用,就出現了交叉驗證方法(Cross Validation),簡稱CV。交叉驗證顧名思義就是重複使用資料,把資料分為訓練集(Trading Set)、驗證集(Validation Set)、測試集(Te

精通CSS.DIV網頁樣式與佈局——頁面和瀏覽器元素

在頁面和瀏覽器中,除了文字、圖片、表格、表單等,還有很多各種各樣的元素,我們這回對這些元素進行一一的介紹;這次我們將介紹到豐富的超連結特效、滑鼠特效、頁面滾動條。 豐富的超連結特效中,我們首先來介紹動態超連結,我們看一下效果圖: 程式碼如下: <html&

CSS-float浮動與流體佈局2

2 float特性 2.1 包裹性 未浮動: <div style="width:300px;height:200px;background-color:#ddd;"> <div style="background-color:#ccc;">h

網格佈局計算器介面設計

最終得到如圖所示計算器介面 步驟為: 1、 在佈局管理器中定義一個GridLayout,並在該GridLayout中依次定義文字框、按鈕,該文字框、按鈕各橫跨4列。 2、 在Java程式碼中迴圈16次,依次新增16個按鈕。 Layout檔案定義如下: <GridL

CSS | 走進position與float定位浮動和重疊,重新定義你的佈局

css的一個小關卡position與float,它究竟有什麼用?初學者在給頁面進行佈局時經常會利用div瘋狂堆積,如果沒有成功就使用margin擴張領地,現在需要告別這種方式了,使用定位和浮動使頁面佈局更簡單。這張主要講的是position定位中的絕對定位和相對定位一、絕對定

Python時間序列缺失值處理日期缺失填充完全教程-附Python完整例程

前言 因近期進行時間序列分析時遇到了資料預處理中的缺失值處理問題,其中日期缺失和填充在網上沒有找到較好較全資料,耗費了我一晚上工作時間,所以下面我對這次時間序列缺失值處理學習做了以下小結以供之後同行們參考指正。 時間序列缺失值處理 一、程式設計前準備        

精通CSS.DIV網頁樣式與佈局——濾鏡的使用

我們這次來說說濾鏡的使用,我們首先看看濾鏡的概述: CSS濾鏡並不是瀏覽器的外掛,也不符合CSS標準,二而是微軟公司為增強瀏覽器功能而特意開發的並整合在IE瀏覽器中的又累功能的集合。由於瀏覽器IE有著很廣的使用範圍,因此CSS濾鏡也被廣大設計者所喜愛。 CSS濾鏡的識

【WEB基礎】HTML & CSS 基礎入門10佈局與定位

塊級元素和行內元素 HTML裡的元素可以分為塊級元素和行內元素兩大類: