css布局史 - grid一統(tǒng)天下

近幾年，前端經(jīng)歷了飛速發(fā)展，每隔幾個(gè)月，就有新的技術(shù)框架產(chǎn)生，如果你有1年多沒有接觸過它，那么再上手的時(shí)候，你一定會(huì)對它感到陌生，似乎一不留神，自己就已經(jīng)被無情拋棄了。

面對著js框架的飛速發(fā)展，得益于babel技術(shù)，瀏覽器可以很快地使用新的框架技術(shù)，vue，angular，react似乎也已經(jīng)統(tǒng)治了好久好久。

而作為前端三劍客的css呢?似乎css3已經(jīng)是很久很久的事情了，久到了我們不知道它是否還在更新，css是否還有新的技術(shù)產(chǎn)生。

雖然各種scss，stylus，less預(yù)處理器提高了我們代碼的開發(fā)和維護(hù)，但是css依然缺少一個(gè)一擊致命，一劍封喉的技術(shù)。

慶幸的是，我們等到了grid的到來，它的到來宣布了css布局從此進(jìn)入了grid時(shí)代。

table布局

早期的網(wǎng)頁布局是采用table的，也就是所有的內(nèi)容都會(huì)放到table里面，如果想要內(nèi)嵌布局，就會(huì)采用table嵌套table，那個(gè)時(shí)候可以說布局很簡單，因?yàn)榫褪鞘褂胻able，但是table過于繁瑣，因此也產(chǎn)生了大量無用的代碼。

div+css

css浮動(dòng)的出現(xiàn)，徹底解放了網(wǎng)頁布局，目前主流的網(wǎng)頁采用的都是div+css的布局，這種布局簡化了代碼結(jié)構(gòu)，通過使用css來定位元素位置，可以說這種布局極大程度上網(wǎng)站的開發(fā)效率，同時(shí)網(wǎng)頁的可維護(hù)性也得到大大提高。

grid王者到來

首先我們看下grid的支持情況，從下面的圖片可以看到，主流瀏覽器都是支持的，特別是在最新版的ie也采用和chrome一樣的內(nèi)核之后，可以說現(xiàn)在前端開發(fā)終于迎來了最幸福的時(shí)刻。

這是一個(gè)非常棒的布局解決方案。自從網(wǎng)絡(luò)誕生以來，我們就一直在努力設(shè)計(jì)我們的網(wǎng)站，強(qiáng)迫他們?nèi)ミm應(yīng)和使用那些不適合他們的方式。

不過網(wǎng)格布局的出現(xiàn)，直接從瀏覽器解決了我們布局的復(fù)雜性，我們不再需要復(fù)雜的css來生成網(wǎng)格布局，不需要使用bootstrap這樣的網(wǎng)格框架來布局，我們可以使用簡單的grid布局來完成。

使用grid的優(yōu)點(diǎn)

我們可以創(chuàng)建任意數(shù)量的網(wǎng)格。
fraction unit 使得控制布局比例非常方便。
repeat可以重復(fù)布局。
最簡原則，只需要定義需要使用的行和列。
網(wǎng)格支持命名

如何使用

聲明 display:grid;
定義列 grid-template-columns: 100px 100px 100px;
設(shè)置間距，grid-row-gap: 20px;

一篇文章說了HTML，現(xiàn)在再來說一說CSS，所謂CSS是指層疊樣式表 (Cascading Style Sheets)，通過引入樣式表，從而極大的提高了工作效率。
搭配視頻觀看效果更佳~~
Web前端開發(fā)零基礎(chǔ)入門HTML/CSS/JavaScript
https://www.ixigua.com/6907467670300393988

什么是CSS？

Cascading Style Sheet

層疊樣式表語言（不是編程語言，屬于樣式表語言，沒有變量、數(shù)據(jù)類型、控制語句...）

CSS其實(shí)是專門用來修飾HTML的，讓HTML更好看。

CSS是HTML的化妝品。

CSS是為HTML服務(wù)的，所以HTML還是主體，CSS是依附在HTML上的，

所以進(jìn)行CSS的開發(fā)，我們還是需要新建html/htm文件。

在HTML中怎么嵌入CSS樣式呢？

第一種方式：內(nèi)聯(lián)定義

第二種方式：定義內(nèi)部樣式塊對象

第三種方式：鏈入外部樣式表文件（這種方式最常用！）

關(guān)于選擇器的優(yōu)先級(jí)：

標(biāo)簽選擇器優(yōu)先級(jí)最低。
其次是類選擇器。
最高優(yōu)先級(jí)是id選擇器。

CSS設(shè)置背景(background)

背景顏色 background-color
背景圖片 background-image
背景重復(fù) background-repeat:repeat-x/repeat-y
背景位置 background-position:bottom/left/top/right/center
背景關(guān)聯(lián) background-attachment:fixed/scroll

綜合寫法：

.tagName{background:#ffffff url(“aa.jpg”) no-repeat right left;}

CSS設(shè)置文本格式

通過文本屬性，您可以改變文本的顏色、字符間距，對齊文本，裝飾文本，對文本進(jìn)行縮進(jìn)，等等。

文本縮進(jìn) ：Text-indent:2em

文本對齊方式：Text-align:left/right/center/ justify

文本修飾：Text-decoration:underline/line-through/overline/none

字符間距：Word-spacing:px/em 英文單詞之間的間隔；

Letter-spacing:px/em漢字和英文字母之間的間隔；

文本轉(zhuǎn)換：Text-transform:uppercase/lowercase/ capitalize

行與行間距：Line-height:px/%

垂直對齊圖像： vertical-align：text-top/text-bottom

文本陰影：text-shadow:水平偏移，垂直偏移顏色

字體

字體類型:font-family:”sans-serif”;

字體樣式:font-style:normal ;

字體大小:font-size:20px/3.75em/100%;默認(rèn)大小為16px,字體為宋體

字體加粗:font-weight:normal;

字體的轉(zhuǎn)變:font-variant:normal/smallcaps;

CSS鏈接

鏈接的四種狀態(tài)

a:link {color:#FF0000;}     /* 未被訪問的鏈接 */
a:visited {color:#00FF00;}  /* 已被訪問的鏈接 */
a:hover {color:#FF00FF;}    /* 鼠標(biāo)指針移動(dòng)到鏈接上 */
a:active {color:#0000FF;}   /* 正在被點(diǎn)擊的鏈接 */

【注意】當(dāng)為鏈接的不同狀態(tài)設(shè)置樣式時(shí)，請按照以下次序規(guī)則：

a:hover 必須位于 a:link 和 a:visited 之后

a:active 必須位于 a:hover 之后

去掉a鏈接默認(rèn)的下劃線

text-decoration:{none/underline}

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

創(chuàng)建鏈接塊

display:block;

列表樣式

在一個(gè)無序列表中，列表項(xiàng)的標(biāo)志 (marker) 是出現(xiàn)在各列表項(xiàng)旁邊的圓點(diǎn)。在有序列表中，標(biāo)志可能是字母、數(shù)字或另外某種計(jì)數(shù)體系中的一個(gè)符號(hào)。

要修改用于列表項(xiàng)的標(biāo)志類型，可以使用屬性 list-style-type：

ul {list-style-type : square;}

上面的聲明把無序列表中的列表項(xiàng)標(biāo)志設(shè)置為方塊。

列表項(xiàng)圖像

你可能想對各標(biāo)志使用一個(gè)圖像，這可以利用 list-style-image 屬性做到：

ul li {list-style-image : url(xxx.gif);}

列表標(biāo)志位置

ul{
  list-style-position:inside;
  }

CSS表格

表格邊框

table,th,td{border:1px solid red;}

折疊邊框

border-collapse:collapse;

表格的寬度和高度

width,height

表格的文字水平對齊

text-align:center/right/left;

表格的文字垂直對齊

vertical-align:bottom;

表格的內(nèi)邊距

padding

表格的背景顏色

background

盒子模型

margin: 包括margin-top, margin-right, margin-bottom, margin-left, 控制塊級(jí)元素之間的距離, 它們是透明不可見的。

根據(jù)上, 右, 下, 左的順時(shí)針規(guī)則, 簡寫為

margin: 40px 40px 40px 40px;

為便于記憶, 請參考下圖：

當(dāng)上下, 左右margin值分別一致, 可簡寫為:

margin: 40px 40px;

前一個(gè)40px代表上下margin值, 后一個(gè)40px代表左右margin值.

當(dāng)上下左右margin值均一致, 可簡寫為:

margin: 40px;

padding: 包括padding-top, padding-right, padding-bottom, padding-left, 控制塊級(jí)元素內(nèi)部, content與border之間的距離

【注意】當(dāng)你想讓兩個(gè)元素的content在垂直方向(vertically)分隔時(shí), 既可以選擇padding-top/bottom, 也可以選擇margin-top/bottom, 在此建議你盡量使用padding-top/bottom來達(dá)到你的目的, 這是因?yàn)閏ss中存在Collapsing margins(折疊的margins)的現(xiàn)象.

邊框

邊框樣式：border-style:none/dotted/dashed/solid/double/groove/ridge/inset/outset/hidden
邊框?qū)挾龋篵order-width
邊框顏色：border-color

綜合寫法：

border:1px solid red;

輪廓(outline)

可以按順序設(shè)置如下屬性：

outline-color
outline-style
outline-width

CSS所有尺寸

寬度

width/min-width/max-width

高度

height/min-height/max-height

行高

line-height

display顯示類型

隱藏元素—–display:none或者visibility:hiddden

display通常可以設(shè)置為none、inline、block

visibility通常可以設(shè)置為hidden、visible

二者的區(qū)別在于display會(huì)將元素隱藏掉，并且位置不再被占據(jù)，而visibility則是占據(jù)原來的位置。

CSS塊級(jí)元素和內(nèi)聯(lián)元素—-display:block/inline/inline-block;

CSS定位(position)

position 屬性值的含義：

static

元素框正常生成。塊級(jí)元素生成一個(gè)矩形框，作為文檔流的一部分，行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或多個(gè)行框，置于其父元素中。

relative

元素框偏移某個(gè)距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。

absolute

元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好像元素原來不存在一樣。元素定位后生成一個(gè)塊級(jí)框，而不論原來它在正常流中生成何種類型的框。

fixed

元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute，不過其包含塊是視窗本身。

CSS浮動(dòng)

設(shè)置浮動(dòng)：float:left/right;

清除浮動(dòng)：clear:both/left/right/null;

浮動(dòng)的兩個(gè)影響因素：1、文檔流 2、顯示類型

元素內(nèi)容溢出

溢出滾動(dòng)條

overflow:scroll（不管是否溢出都會(huì)有滾動(dòng)條）、auto（自動(dòng)添加）

溢出隱藏

overflow:hidden;

CSS的相關(guān)特性

1、繼承性

它不僅允許樣式應(yīng)用于某個(gè)特定的html標(biāo)簽元素，而且還可引用于其后代；

2、CSS層疊

當(dāng)有相同權(quán)重的樣式存在時(shí)，會(huì)根據(jù)這些CSS樣式的前后順序來決定，處于最后面的CSS樣式會(huì)被應(yīng)用，后面的CSS樣式會(huì)覆蓋前面的樣式。

總而言之：內(nèi)聯(lián)樣式表(標(biāo)簽內(nèi)部)>嵌入樣式表(當(dāng)前文件中)>外部樣式表(外部引入文件)

這里是云端源想IT，幫你輕松學(xué)IT”

嗨~ 今天的你過得還好嗎？

生命是不倒行的

也不與昨日一同停留

- 2024.04.08 -

隨著現(xiàn)代網(wǎng)頁設(shè)計(jì)的不斷演進(jìn)，傳統(tǒng)的布局方式已經(jīng)逐漸不能滿足設(shè)計(jì)師和開發(fā)者們對于高效、靈活且強(qiáng)大布局系統(tǒng)的追求。而CSS Grid網(wǎng)格布局，正是在這樣的背景下應(yīng)運(yùn)而生的。

今天，我們就來深入探討CSS Grid布局的魅力所在，帶你解鎖這項(xiàng)強(qiáng)大的設(shè)計(jì)工具，讓網(wǎng)頁布局變得更加簡單和高效。

一、什么是CSS Grid布局？

CSS Grid布局，簡稱為Grid，是CSS的一個(gè)二維布局系統(tǒng)，它能夠處理行和列，使得網(wǎng)頁布局變得更加直觀和強(qiáng)大。與傳統(tǒng)的布局方式相比，Grid能夠輕松實(shí)現(xiàn)復(fù)雜的頁面結(jié)構(gòu)，而無需繁瑣的浮動(dòng)、定位或是使用多個(gè)嵌套容器。

Grid網(wǎng)格布局是一種基于網(wǎng)格的布局系統(tǒng)，它允許我們通過定義行和列的大小、位置和排列方式來創(chuàng)建復(fù)雜的網(wǎng)頁布局。

這與之前講到的flex一維布局不相同。

設(shè)置display:grid/inline-grid的元素就是網(wǎng)格布局容器，這樣就能觸發(fā)瀏覽器渲染引擎的網(wǎng)格布局算法。

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

上述代碼實(shí)例中，.container元素就是網(wǎng)格布局容器，.item元素就是網(wǎng)格的項(xiàng)目，由于網(wǎng)格元素只能是容器的頂層子元素，所以p元素并不是網(wǎng)格元素。

二、Grid的基本概念

首先，我們來了解一下CSS Grid布局的核心概念：

容器（Container）：

設(shè)置了display: grid;的元素成為容器。它是由一組水平線和垂直線交叉構(gòu)成，就如同我們所在的地區(qū)是由小區(qū)和各個(gè)路構(gòu)成。

項(xiàng)目（Item）：

容器內(nèi)的直接子元素，稱為項(xiàng)目。

網(wǎng)格線（Grid Lines）：

劃分行和列的線條，可以想象成坐標(biāo)軸。正常情況下n行會(huì)有n+1根橫向網(wǎng)格線，m列有m+1根縱向網(wǎng)格線。比如田字就好像是一個(gè)三條水平線和三條垂直線構(gòu)成的網(wǎng)格元素。

上圖是一個(gè) 2 x 3 的網(wǎng)格，共有3根水平網(wǎng)格線和4根垂直網(wǎng)格線。

行：

即兩個(gè)水平網(wǎng)格線之間的空間，也就是水平軌道，就好比我們面朝北邊東西方向橫向排列的樓房稱為行。

列：

即兩個(gè)垂直網(wǎng)格線之間的空間，也就是垂直軌道，也就是南北方向排列的樓房。

單元格：

由水平線和垂直線交叉構(gòu)成的每個(gè)區(qū)域稱為單元格，網(wǎng)絡(luò)單元格是CSS網(wǎng)格中的最小單元。也就是說東西和南北方向的路交叉后劃分出來的土地區(qū)域。

網(wǎng)格軌道（Grid Tracks）：

兩條相鄰網(wǎng)格線之間的空間。

網(wǎng)格區(qū)域（Grid Area）：

四條網(wǎng)格線圍成的空間，可以是行或列。本質(zhì)上，網(wǎng)格區(qū)域一定是矩形的。例如，不可能創(chuàng)建T形或L形的網(wǎng)格區(qū)域。

三、Grid的主要屬性

CSS Grid網(wǎng)格布局的主要屬性包括：

display：設(shè)置元素為網(wǎng)格容器或網(wǎng)格項(xiàng)。例如，display: grid; 將元素設(shè)置為網(wǎng)格容器，而 display: grid-item; 將元素設(shè)置為網(wǎng)格項(xiàng)。

grid-template-columns 和 grid-template-rows：用于定義網(wǎng)格的列和行的大小。
grid-column-gap 和 grid-row-gap：用于定義網(wǎng)格的列和行的間距。
grid-template-areas：用于定義命名區(qū)域，以便在網(wǎng)格中引用。
grid-auto-flow：用于控制網(wǎng)格項(xiàng)的排列方式，可以是行（row）或列（column）。
grid-auto-columns 和 grid-auto-rows：用于定義自動(dòng)生成的列和行的大小。
grid-column-start、grid-column-end、grid-row-start 和 grid-row-end：用于定義網(wǎng)格項(xiàng)的位置。
justify-items、align-items 和 place-items：用于對齊網(wǎng)格項(xiàng)。
grid-template：一個(gè)復(fù)合屬性，用于一次性定義多個(gè)網(wǎng)格布局屬性。

下面將詳細(xì)介紹這些屬性的概念及作用：

3.1 display

通過給元素設(shè)置：display:grid | inline-grid，可以讓一個(gè)元素變成網(wǎng)格布局元素。

語法：

display: grid | inline-grid;

display: grid：表示把元素定義為塊級(jí)網(wǎng)格元素，單獨(dú)占一行;
display:inline-grid：表示把元素定義為行內(nèi)塊級(jí)網(wǎng)格元素，可以和其他塊級(jí)元素在同一行。

3.2 grid-template-columns和grid-template-rows

grid-template-columns和grid-template-rows：用于定義網(wǎng)格的列和行的大小。

grid-template-columns 屬性設(shè)置列寬
grid-template-rows 屬性設(shè)置行高

.wrapper {
display: grid;
/* 聲明了三列，寬度分別為 200px 200px 200px */
grid-template-columns: 200px 200px 200px;
grid-gap: 5px;
/* 聲明了兩行，行高分別為 50px 50px */
grid-template-rows: 50px 50px;
}

以上表示固定列寬為 200px 200px 200px，行高為 50px 50px。

上述代碼可以看到重復(fù)寫單元格寬高，我們也可以通過使用repeat()函數(shù)來簡寫重復(fù)的值。

第一個(gè)參數(shù)是重復(fù)的次數(shù)
第二個(gè)參數(shù)是重復(fù)的值

所以上述代碼可以簡寫成：

.wrapper {
display: grid;
grid-template-columns: repeat(3,200px);
grid-gap: 5px;
grid-template-rows:repeat(2,50px);
}

除了上述的repeact關(guān)鍵字，還有：

auto-fill：表示自動(dòng)填充，讓一行（或者一列）中盡可能的容納更多的單元格。

grid-template-columns: repeat(auto-fill, 200px)

表示列寬是 200 px，但列的數(shù)量是不固定的，只要瀏覽器能夠容納得下，就可以放置元素。

fr：片段，為了方便表示比例關(guān)系。

grid-template-columns: 200px 1fr 2fr

表示第一個(gè)列寬設(shè)置為 200px，后面剩余的寬度分為兩部分，寬度分別為剩余寬度的 1/3 和 2/3。

minmax：產(chǎn)生一個(gè)長度范圍，表示長度就在這個(gè)范圍之中都可以應(yīng)用到網(wǎng)格項(xiàng)目中。第一個(gè)參數(shù)就是最小值，第二個(gè)參數(shù)就是最大值。

minmax(100px, 1fr)

表示列寬不小于100px，不大于1fr。

auto：由瀏覽器自己決定長度。

grid-template-columns: 100px auto 100px

表示第一第三列為 100px，中間由瀏覽器決定長度。

3.3 grid-row-gap 屬性， grid-column-gap 屬性， grid-gap 屬性

grid-column-gap和grid-row-gap，用于定義網(wǎng)格的列間距和行間距。grid-gap 屬性是兩者的簡寫形式。

grid-row-gap: 10px 表示行間距是 10px
grid-column-gap: 20px 表示列間距是 20px
grid-gap: 10px 20px 等同上述兩個(gè)屬性

3.4 grid-auto-flow 屬性

grid-auto-flow，用于控制網(wǎng)格項(xiàng)的排列方式，可以是行（row）或列（column）。

劃分網(wǎng)格以后，容器的子元素會(huì)按照順序，自動(dòng)放置在每一個(gè)網(wǎng)格。
順序就是由grid-auto-flow決定，默認(rèn)為行，代表"先行后列"，即先填滿第一行，再開始放入第二行。

當(dāng)修改成column后，放置變?yōu)槿缦拢?/p>

3.5 justify-items 屬性， align-items 屬性， place-items 屬性

justify-items、align-items和place-items，用于定義網(wǎng)格項(xiàng)目的對齊方式。

justify-items 屬性設(shè)置單元格內(nèi)容的水平位置（左中右）
align-items 屬性設(shè)置單元格的垂直位置（上中下）

.container {
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
}

屬性對應(yīng)如下：

start：對齊單元格的起始邊緣
end：對齊單元格的結(jié)束邊緣
center：單元格內(nèi)部居中
stretch：拉伸，占滿單元格的整個(gè)寬度（默認(rèn)值）

place-items屬性是align-items屬性和justify-items屬性的合并簡寫形式。

3.6 justify-content 屬性， align-content 屬性， place-content 屬性

justify-content屬性是整個(gè)內(nèi)容區(qū)域在容器里面的水平位置（左中右）
align-content屬性是整個(gè)內(nèi)容區(qū)域的垂直位置（上中下）

.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

兩個(gè)屬性的寫法完全相同，都可以取下面這些值：

start - 對齊容器的起始邊框
end - 對齊容器的結(jié)束邊框
center - 容器內(nèi)部居中

space-around - 每個(gè)項(xiàng)目兩側(cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與容器邊框的間隔大一倍。
space-between - 項(xiàng)目與項(xiàng)目的間隔相等，項(xiàng)目與容器邊框之間沒有間隔。
space-evenly - 項(xiàng)目與項(xiàng)目的間隔相等，項(xiàng)目與容器邊框之間也是同樣長度的間隔。
stretch - 項(xiàng)目大小沒有指定時(shí)，拉伸占據(jù)整個(gè)網(wǎng)格容器。

3.7 grid-auto-columns 屬性和 grid-auto-rows 屬性

有時(shí)候，一些項(xiàng)目的指定位置，在現(xiàn)有網(wǎng)格的外部，就會(huì)產(chǎn)生顯示網(wǎng)格和隱式網(wǎng)格。

比如網(wǎng)格只有3列，但是某一個(gè)項(xiàng)目指定在第5行。這時(shí)，瀏覽器會(huì)自動(dòng)生成多余的網(wǎng)格，以便放置項(xiàng)目。超出的部分就是隱式網(wǎng)格。

而grid-auto-rows與grid-auto-columns就是專門用于指定隱式網(wǎng)格的寬高。

3.8 grid-column-start 屬性、grid-column-end 屬性、grid-row-start 屬性以及grid-row-end 屬性

指定網(wǎng)格項(xiàng)目所在的四個(gè)邊框，分別定位在哪根網(wǎng)格線，從而指定項(xiàng)目的位置。

grid-column-start 屬性：左邊框所在的垂直網(wǎng)格線
grid-column-end 屬性：右邊框所在的垂直網(wǎng)格線
grid-row-start 屬性：上邊框所在的水平網(wǎng)格線
grid-row-end 屬性：下邊框所在的水平網(wǎng)格線

<style>
#container{
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
.item-1 {
grid-column-start: 2;
grid-column-end: 4;
}
</style>

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

通過設(shè)置grid-column屬性，指定1號(hào)項(xiàng)目的左邊框是第二根垂直網(wǎng)格線，右邊框是第四根垂直網(wǎng)格線。

3.9 grid-area 屬性

grid-area 屬性指定項(xiàng)目放在哪一個(gè)區(qū)域。

.item-1 {
grid-area: e;
}

意思為將1號(hào)項(xiàng)目位于e區(qū)域

grid-area屬性一般與上述講到的grid-template-areas搭配使用。

想要快速入門前端開發(fā)嗎？推薦一個(gè)前端開發(fā)基礎(chǔ)課程，這個(gè)老師講的特別好，零基礎(chǔ)學(xué)習(xí)無壓力，知識(shí)點(diǎn)結(jié)合代碼，邊學(xué)邊練，可以免費(fèi)試看試學(xué)，還有各種輔助工具和資料，非常適合新手！點(diǎn)這里前往學(xué)習(xí)哦！云端源想

3.10 justify-self 屬性、align-self 屬性以及 place-self 屬性

justify-self屬性設(shè)置單元格內(nèi)容的水平位置（左中右），跟justify-items屬性的用法完全一致，但只作用于單個(gè)項(xiàng)目。

align-self屬性設(shè)置單元格內(nèi)容的垂直位置（上中下），跟align-items屬性的用法完全一致，也是只作用于單個(gè)項(xiàng)目。

.item {
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
}

這兩個(gè)屬性都可以取下面四個(gè)值。

start：對齊單元格的起始邊緣。
end：對齊單元格的結(jié)束邊緣。
center：單元格內(nèi)部居中。
stretch：拉伸，占滿單元格的整個(gè)寬度（默認(rèn)值）

四、Grid網(wǎng)格布局應(yīng)用場景

CSS Grid網(wǎng)格布局的應(yīng)用場景非常廣泛，包括但不限于：

1、創(chuàng)建復(fù)雜的網(wǎng)頁布局：

CSS Grid網(wǎng)格布局可以輕松創(chuàng)建出復(fù)雜的網(wǎng)頁布局，如多列布局、不規(guī)則布局等。

2、創(chuàng)建響應(yīng)式設(shè)計(jì)：

CSS Grid網(wǎng)格布局可以輕松實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)，通過調(diào)整網(wǎng)格的大小和間距，可以適應(yīng)不同的屏幕尺寸。

3、創(chuàng)建復(fù)雜的組件布局：

CSS Grid網(wǎng)格布局也可以用于創(chuàng)建復(fù)雜的組件布局，如卡片布局、輪播圖布局等。

總的來說，CSS Grid網(wǎng)格布局是一種強(qiáng)大的布局工具，可以幫助網(wǎng)頁設(shè)計(jì)者輕松創(chuàng)建出各種復(fù)雜的網(wǎng)頁布局。

CSS Grid布局為我們提供了一個(gè)全新的視角來思考頁面布局，它讓復(fù)雜布局的實(shí)現(xiàn)變得簡單明了。隨著瀏覽器支持度的提高，未來的網(wǎng)頁設(shè)計(jì)將更加靈活和富有創(chuàng)意。

掌握了CSS Grid布局，你就已經(jīng)邁出了成為前端設(shè)計(jì)高手的重要一步。不斷實(shí)踐，不斷探索，你會(huì)發(fā)現(xiàn)更多Grid的神奇之處。

今天就先講到這里了，

更多前端開發(fā)基礎(chǔ)知識(shí)點(diǎn)擊文末閱讀原文查看哦！

記得關(guān)注【云端源想IT】一起學(xué)編程！

我們下期再見！

END

文案編輯|云端學(xué)長

文案配圖|云端學(xué)長

內(nèi)容由：云端源想分享

在線咨詢

上一篇：從頭認(rèn)識(shí)JavaScript的事件循環(huán)模型
下一篇：毫不利己，專門利人：如何再造一個(gè)維基百科？

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商