前端常見的布局方式 網格布局

2022-08-24 03:51:08 字數 3490 閱讀 6548

一、網格布局

1、常規情況

html**

<


div 


class


="container"


>


<


div 


class


="text"


>


1asdasdasdas


adasdasdasdasdasdasdasdasdasdqweqweqwewqe


qweqweqweqweqweqweqwdasdasdasdasd


div>


<


div 


class


="tet"


>2dasdas


div>


<


div 


class


="text"


>3dasda


div>


<


div 


class


="text"


>4adsdqw


div>


<


div 


class


="text"


>5qweqwe


div>


<


div 


class


="text"


>6啊發順豐


div>


<


div 


class


="text"


>7qasd安達市大所大e


div>


<


div 


class


="text"


>8阿斯頓撒大所大所we


div>


div>
設定主容器

.container
設定子容器

/*:nth-child(n) 選擇器匹配屬於其父元素的第 n 個子元素，不論元素的型別。>後面有無.text毫無影響*/


.container > :nth-child(even)


.text


.tet
產生的效果

2、巢狀

只需要在html頁面子容器內再巢狀相應的**

<


div 


class


="container"


>


<


div 


class


="text"


>


1asdasdasdas


adasdasdasdasdasdasdasdasdasdqweqweqwewqe


qweqweqweqweqweqweqwdasdasdasdasd


div>


<


div 


class


="tet"


>2dasdas


div>


<


div 


class


="text"


>3dasda


div>


<


div 


class


="text"


>4adsdqw


div>


<


div 


class


="text"


>5qweqwe


div>


<


div 


class


="text"


>6啊發順豐


div>


<


div 


class


="text"


>7qasd安達市大所大e


div>


<


div 


class


="text"


>8阿斯頓撒大所大所we


div>


<


div 


class


="ntc"


>


<


div 


class


="child"


>


css是cascading style sheets（層疊樣式表）的縮寫


css描述了如何在螢幕，紙張或其他**上顯示html元素


css節省了大量的工作。它可以同時控制多個網頁的布局 外部樣式表儲存在css檔案中 為什麼要使用css？


div>


<


div 


class


="child"


>sss


div>


<


div 


class


="child"


>ddd


div>


div>


div>
再為巢狀容器的父容器ntc 及其子容器  新增布局和樣式

.ntc


.ntc > div
產生效果

三、設定對齊方式

justify-items 設定行對齊方式，分別可以為行軸線左、右、居中、充滿 （預設）對齊 

align-items 同理，設定軸對齊方式，分別可以為行軸線上、下、居中、充滿 （預設）

可以設定的屬性有：start、end、center、stretch

下面以設定單個子元素為例子 注意：設定單個子元素 是justify-self 和 align-self

.container > :nth-child(3)
產生效果

四、跨行

在單個屬性上設定 grid-column、guid-row

.container > :nth-child(6)


.container > :nth-child(2)
設定 塊2 從第1根線到第4根線，主要這兩個都從1開始跨行，會產生重疊，z-index可以起作用

優先安排跨行的模組，其它的順勢排列

最後：練習一下

css 網格布局 CSS網格布局簡介

css 網格布局 css在不斷發展。目前正在談論的某些功能可能會在不久的將來成為主流，而其他功能可能會逐漸淡出人們的視線。無論哪種方式，了解將來考慮使用哪些css選擇器，布局模組和過濾器都將使您成為更強大的前端開發人員。網格布局是一種很快就會被廣泛接受的選擇。您可以想象，css的這一子集可以簡化內容...

Grid布局（網格布局）

網格布局 grid 是 css 中乙個布局方案。它將網頁劃分成乙個個網格，可以任意組合不同的網格，做出各種各樣的布局。以前，只能通過複雜的 css 框架達到的效果，現在瀏覽器內建了。下面這樣的布局，就是grid布局。grid 布局與 flex 布局有一定的相似性，都可以指定容器內部多個專案的位置。但...

網格布局（grid布局）

他可以將頁面分為多個網格，可以任意組合不同的網格 做出各種各樣的布局。網格布局為二維性質的。grid row gap 1rem 行間距 grid column gap 1rem 列間距 grid gap 1rem 設定行列間距 grid template columns 列寬和列數 grid tem...