聊聊利用CSS實現九宮格佈局的幾種方法!
這篇文章跟大家分享利用CSS實現九宮格佈局的幾種方法,並介紹一下nth-of-type 與 nth-child 的區別,希望對大家有所幫助!
最近幾天刷面常看見一題,「九宮格佈局」。自己嘗試用幾種辦法實現了九宮格佈局,發現這裡面涉及了挺多的 css
知識,記錄一下。
我覺得這篇文章講得很好,大家可以去參考一下大佬如何寫邊框九宮格! # 千萬別小瞧九宮格 一道題目就能讓候選人原形畢露!
九宮格實作
以下幾種實作方法都可自適應
基本版面和樣式
<div class="box"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div>
.box { background: #e4f7fd61; border: 2px solid #0786ada1; border-radius: 8px; } ul { padding: 0; margin: 0; } .box li { list-style: none; text-align: center; line-height: 200px; background: skyblue; border-radius: 8px; font-size: 20px; color: black; }
實作一:flex
#使用flex
佈局實作需要注意一個點,就是需要用flex-wrap
屬性來使其換行。
.box { width: 100%; overflow: hidden; } ul { width: 100%; height: 100%; display: flex; flex-wrap: wrap; } .box li { width: 30%; height: 30%; margin-right: 5%; margin-bottom: 5%; } .box li:nth-of-type(3n) { margin-right: 0; } .box li:nth-of-type(n+7) { margin-bottom: 0; }
實作二:float
#使用float
來實作需要注意一個點,浮動會造成浮動崩塌,因此可以設定overflow: hidden;
把box
設為BFC 來解決浮動崩塌。
.box { width: 100%; overflow: hidden; } ul { width: 100%; height: 100%; } .box li { width: 30%; height: 30%; margin-right: 5%; margin-bottom: 5%; float: left; } .box li:nth-of-type(3n) { margin-right: 0; } .box li:nth-of-type(n+7) { margin-bottom: 0; }
實作三:grid
<div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div>
box { background: #e4f7fd61; border: 2px solid #0786ada1; border-radius: 8px; } .grid { display: grid; width: 100%; grid-template-rows: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr); grid-gap: 5%; grid-auto-flow: row; } .grid>div { list-style: none; text-align: center; line-height: 200px; background: skyblue; border-radius: 8px; font-size: 20px; color: black; }
實作四:table
使用表格來實作會存在一些缺陷,table
儲存格之間的間隔是使用border-spacing
屬性來實現的,且不支援百分比的形式,而且單元格四周都有類似margin
的外邊距的效果。
<div class="box"> <ul> <li> <div>1</div> <div>2</div> <div>3</div> </li> <li> <div>4</div> <div>5</div> <div>6</div> </li> <li> <div>7</div> <div>8</div> <div>9</div> </li> </ul> </div>
.box { width: 100%; overflow: hidden; } ul { width: 100%; height: 100%; display: table; border-spacing: 10px; } .box li { display: table-row; } .box li div { display: table-cell; text-align: center; border-radius: 10px; }
nth-of-type 與nth-child 的差異
上面實作九宮格佈局我用到了nth-of-type
這個屬性來實作最後一列的margin-right: 0
和最後一行的margin-bottom: 0
。然後我記得 css
還有一個 nth-child
屬性,這裡順便記錄一下這兩者的差異。
nth-of-type
#MDN::nth-of-type(n)
這個偽類別是針對具有一組兄弟節點的標籤, 用n 來篩選出在一組兄弟節點的位置。
從上圖可以看出,因為nth-of-type 他是目前元素的兄弟元素的第n個,所以p:nth-of-type(4)
是第四個p
元素,也就是無論往中間加入什麼元素,都只能是目前標籤元素的第n個元素被選擇。
nth-child
MDN::nth-child(an b)
這個偽類先找到所有目前元素的兄弟元素,然後按照位置先後順序從1開始排序,選擇的結果為CSS偽類:nth-child括號中表達式(an b)匹配到的元素集合(n=0, 1,2,3...)
nth-child
是目前元素的兄弟元素的第n個目前元素,即所有兄弟元素排序後的第n個目前標籤元素。
從上圖可以看出,nth-child 是目前元素的所有兄弟元素排序後的第n個目前標籤元素,所以p:nth-child(4)
取得是處於排在第4
位元的 p
元素。若處於第4位的是其他標籤元素,則獲取不到,如下圖所示:
#最後
#歡迎大家在評論區一起交流,一起進步!
(學習影片分享:css影片教學)
以上是聊聊利用CSS實現九宮格佈局的幾種方法!的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

在 Vue.js 中使用 Bootstrap 分為五個步驟:安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選:自定義樣式。可選:使用插件。

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

要設置 Bootstrap 框架,需要按照以下步驟:1. 通過 CDN 引用 Bootstrap 文件;2. 下載文件並將其託管在自己的服務器上;3. 在 HTML 中包含 Bootstrap 文件;4. 根據需要編譯 Sass/Less;5. 導入定製文件(可選)。設置完成後,即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

創建 Bootstrap 分割線有兩種方法:使用 標籤,可創建水平分割線。使用 CSS border 屬性,可創建自定義樣式的分割線。

在 Bootstrap 中插入圖片有以下幾種方法:直接插入圖片,使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件,可以提供響應式圖片和更多樣式。設置圖片大小,使用 img-fluid 類可以使圖片自適應。設置邊框,使用 img-bordered 類。設置圓角,使用 img-rounded 類。設置陰影,使用 shadow 類。調整圖片大小和位置,使用 CSS 樣式。使用背景圖片,使用 background-image CSS 屬性。

如何使用 Bootstrap 按鈕?引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本

要調整 Bootstrap 中元素大小,可以使用尺寸類,具體包括:調整寬度:.col-、.w-、.mw-調整高度:.h-、.min-h-、.max-h-
