總結我自己一共總結了4種方法來實現這個效果，前三種方法是大同小異，只有第四種**布局比較特殊。下面我直接給出每一種布局方式相關的樣式和dom結構的原始碼。
1. float布局
float布局實現這個9宮格沒什麼好講的，關鍵點在於對li子項設定margin-left:-4px;margin-top:-4px;這樣就可以使相鄰子塊間的邊框發生重疊，你可以不設定這個負的margin來看看效果，你會體會更深。整個css中我認為最精髓的地方在於hover的樣式，給li子項設定了position:relative;。這個地方的精髓在於，對元素設定了relative後，其將脫離文件流，同時其層疊等級會比普通文件流高，就會使其內容覆蓋在普通文件流之上，那麼它被覆蓋的border就會顯示出來，同時遮擋住相鄰元素的border。這個設定真的很精髓，後面兩種方法和該方法差不多，我就不做過多講解了。
2. flex布局
li子項設定寬度和高度。該grid布局中，也可以在hover時新增z-index:2;來提高疊加等級。
4. table布局
123
1table
3 123
table布局時，有以下幾點需要注意：
line-height的設定值需要與height的值保持一致。因為對於**中的一行來說，它的高度取決於該行最大的單元格的高度或者行高，line-height與height不一致會導致該列中的邊框溢位單元格。
要想使某個單元格的邊框覆蓋其他單元格的邊框，必須給單元格設定position:absolute;而不是relative。
Flex實現九宮格
關鍵點 利用了padding top和flex wrap wrap，當設定background color時，是包括盒子模型中的content和padding的，但是為什麼不設定height呢？因為父元素沒有高度，所以定義height 30 是沒有用的，且若想每個block都為正方形，最好的方式就是...
如何實現九宮格
九宮格容器是寬高相等的正方形，實現九宮格有幾種方法，這裡列舉一二 對於網格布局來說，grid 比 flex 更為方便，量更少，可以處理更為複雜的結構。如以下 square square inner grid 1234567 89效果 square 效果 除了浮動，這裡 li 也可以使用display...
九宮格布局
2009 08 25 15 15 27 九宮格是一種比較古老的設計，它最基本的表現其實就像是乙個三行三列的 其實它最初是在window的c s結構中用得比較多，比如我們經常看 到軟體中的乙個窗體，其實就是乙個九宮格的典型應用，因為窗體需要在八個方向拉伸，所以在c s軟體中大量採用這種技術來布局設計。...