九宮格簡介

1. 前言

有些同學(xué)乍一聽九宮格可能不知道是什么，但其實(shí)它在我們的日常生活中很常見：

顧名思義，九宮格通常為如圖這種三行三列的布局。

微信客戶端就用到了這種布局方式：

大家最熟悉的朋友圈也采用了九宮格：

還有微博：

2. 邊框九宮格

九宮格和其他布局有個(gè)明顯的區(qū)別，那就是加入邊框后的九宮格有個(gè)bug：

大家以為加個(gè)邊框就變成了上面這樣對吧？
實(shí)際上卻是這樣的：

有沒有感覺九宮格里面的框框好像更粗一點(diǎn)？

接下來的課程我們就先來講微博或朋友圈的那種有一定空隙的九宮格，接下來就來好好講解一下帶邊框的九宮格以及帶邊框以后為什么中間會(huì)變粗的原理，順便延伸出一道關(guān)于九宮格布局的經(jīng)典面試題。

3. 實(shí)現(xiàn)手段

一方面我們可以利用現(xiàn)有的CSS中文庫：chinese-layout 來快速實(shí)現(xiàn)九宮格布局：

• 中文布局 CSS 庫

這種方式不僅利于我們的學(xué)習(xí)，更加有助于我們的記憶。

然后也會(huì)帶領(lǐng)大家如何在不依賴于任何外界條件的情況下純手工實(shí)現(xiàn)九宮格布局：

• 網(wǎng)格布局
• 表格布局
• 絕對定位
• 彈性布局
• 左浮動(dòng)法

但除了上面的那些類似于朋友圈或微博的九宮格以外，我們還有另一種九宮格的形式：

• 加入邊框
• 邊框九宮格

接下來我們還會(huì)對其進(jìn)行改進(jìn)：

• 改進(jìn)版

作為擴(kuò)展閱讀，我們還提供了一道用九宮格來實(shí)現(xiàn)的經(jīng)典面試題：

• 經(jīng)典面試題

不過由于經(jīng)典面試題考察的范圍很廣、不止考察了面試者的 CSS 功底，同樣也考察了一些 JS 功底。
所以最后這一小節(jié)只作為擴(kuò)展閱讀，防止沒有 JS 基礎(chǔ)的小伙伴看了懵圈。

4. 小結(jié)

九宮格并不像單列布局、上下欄布局那樣的主要布局。

它是一種小型布局，通常集成在主要布局之內(nèi)。

比如大家前面看到的那些圖，九宮格通常都是在單列布局的內(nèi)部存在的。