CSS實(shí)現(xiàn)九宮格的方法有哪些
這篇文章主要介紹CSS實(shí)現(xiàn)九宮格的方法有哪些，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
創(chuàng)新互聯(lián)公司主要從事成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)武侯,十載網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220
實(shí)現(xiàn)效果
效果如下，就是一個(gè)九宮格，點(diǎn)擊九宮格中的任意一個(gè)小方塊，其邊框變成紅色。
實(shí)現(xiàn)方法
我自己一共總結(jié)了4種方法來實(shí)現(xiàn)這個(gè)效果，前三種方法是大同小異，只有第四種表格布局比較特殊。下面我直接給出每一種布局方式相關(guān)的樣式和DOM結(jié)構(gòu)的源碼。
1. float布局
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
float布局實(shí)現(xiàn)這個(gè)9宮格沒什么好講的，關(guān)鍵點(diǎn)在于對(duì)li子項(xiàng)設(shè)置margin-left:-4px;margin-top:-4px;這樣就可以使相鄰子塊間的邊框發(fā)生重疊，你可以不設(shè)置這個(gè)負(fù)的margin來看看效果，你會(huì)體會(huì)更深。整個(gè)CSS中我認(rèn)為最精髓的地方在于hover的樣式，給li子項(xiàng)設(shè)置了position:relative;。這個(gè)地方的精髓在于，對(duì)元素設(shè)置了relative后，其將脫離文檔流，同時(shí)其層疊等級(jí)會(huì)比普通文檔流高，就會(huì)使其內(nèi)容覆蓋在普通文檔流之上，那么它被覆蓋的border就會(huì)顯示出來，同時(shí)遮擋住相鄰元素的border。這個(gè)設(shè)置真的很精髓，后面兩種方法和該方法差不多，我就不做過多講解了。
2. flex布局
- 1
- 2
- 3
- 4
- flex
- 6
- 7
- 8
- 9
使用flex布局時(shí)，有一點(diǎn)需要注意，那就是不要給父容器ul.flex設(shè)置高度，如果你設(shè)置了高度，那么在垂直方向上子項(xiàng)的margin負(fù)值設(shè)置將會(huì)失效，具體原因我也不知道。如果你設(shè)置了高度后，還希望垂直方向的margin值生效，那么你就給ul.flex添加一個(gè)algin-content:flex-start;屬性即可。這個(gè)具體為啥會(huì)這樣，我也不是很明白，希望有理解的兄弟在評(píng)論區(qū)指導(dǎo)一下。該flex布局中，也可以在hover時(shí)添加z-index:2;來提高疊加等級(jí)。
3. grid布局
- 1
- 2
- 3
- 4
- grid
- 6
- 7
- 8
- 9
這里有一個(gè)地方需要注意，就是不要再給li子項(xiàng)設(shè)置寬度和高度。該grid布局中，也可以在hover時(shí)添加z-index:2;來提高疊加等級(jí)。
4. table布局
| 1 | 2 | 3 |
| 1 | table | 3 |
| 1 | 2 | 3 |
使用table布局時(shí)，有以下幾點(diǎn)需要注意：
1、line-height的設(shè)置值需要與height的值保持一致。因?yàn)閷?duì)于表格中的一行來說，它的高度取決于該行最大的單元格的高度或者行高，line-height與height不一致會(huì)導(dǎo)致該列中的邊框溢出單元格。
2、要想使某個(gè)單元格的邊框覆蓋其他單元格的邊框，必須給單元格設(shè)置position:absolute;而不是relative。
3、margin-left的設(shè)置值是border-width的1.5倍，這個(gè)是我在chrome下的測試結(jié)果，具體原因我也不清楚，希望有老鐵評(píng)論區(qū)解答一下。
以上是CSS實(shí)現(xiàn)九宮格的方法有哪些的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
當(dāng)前名稱：CSS實(shí)現(xiàn)九宮格的方法有哪些
文章分享：http://m.jiaotiyi.com/article/jocspd.html