九宮格佈局方式有哪些，有什麼優缺點？

這裏是修真院前端小課堂，每篇分享文從

【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】

八個方面深度解析前端知識/技能，本篇分享的是：

【九宮格佈局方式有哪些，有什麼優缺點？】

1.背景介紹

盒子模型與元素水平

九宮格對於一個初學者來講，只須要了解標準盒模型，盒模型由內至外分別是content、padding、border、margin， 其中可使用百分比的有content,padding,margin，邊框border則不能夠用%單位。

元素水平分爲3種：block水平，inline-block水平，inline水平，3種元素各有不一樣的表現。

            block水平默認狀況下，繼承父級寬度，鋪滿整行。多個元素豎直方向排列，能夠設置寬高，豎直方向上的padding,margin有效。

             inline元素水平排列，多個inline水平的元素，會在一行裏排列，不能夠設置寬高，豎直方向上的padding,margin無效。

             inline-block水平元素，用時具備block水平和inline水平的特色，多個元素水平排列成一行。能夠設置寬高，豎直方向上的padding,margin有效。

2.知識剖析

既然這樣，實現九宮格效果，必然不能是9個block水平的元素或者是9個inline水平的元素，只能是inline-block的元素。

 因此引出第一種九宮格佈局。inline-block佈局。固定尺寸的九宮格佈局。

關於九宮格的自適應，什麼叫自適應，九宮格的自適應指的又是什麼，認識css單位,px,%，與vw。

px,%,vw的不一樣之處

vw：viewpoint-width，視窗寬度，1vw等於視窗寬度的1%。

vh：viewpoint-height，視窗高度，1vh等於視窗高度的1%。

%:百分比，以父級元素的尺寸爲基準，乘以%後獲得相應的尺寸。

既然這樣就能夠輕鬆的寫出第一個九宮格展現圖。

b、float佈局

關於浮動

float 屬性定義元素在哪一個方向浮動。以往這個屬性總應用於圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素均可以浮動。浮動元素會生成一個塊級框，而不論它自己是何種元素。

c、vw佈局

d、flex佈局

e、grid佈局

f、position佈局

g、line-height佈局

3.常見問題

display:inline-block後的九宮格會折行？

4.解決方案

分析緣由：

解決辦法：

一、父級設置font-size爲0

二、標籤閉合

5.編碼實戰

6.擴展思考

9宮格必須使用9個div嗎？

不必定

直接看demo。

3個div實現宮格

1個div實現9宮格

7.參考文獻

參考一：w3c

參考二：知乎

8.更多討論

 

討論點1：以上提到的九宮格佈局實現方案，還有別的實現方案嗎？

       table佈局方案，純position定位方案 

討論點2：選擇哪一種方案好？

         考慮兼容性的話float佈局與inline-block佈局最好，其餘的佈局方案或多或少不兼容低版本瀏覽器

討論點3：初學者實現九宮格要注意的問題

inline-block佈局的問題，有必要清楚浮動嗎？

問題：

1.display:inline-block後的九宮格會折行？

答：

a、父級設置font-size爲0

b、標籤閉合

2.爲何絕對定位知識設置相對方向值，就能實現width或者height具備尺寸？

答：這是絕對定位的特性，假如咱們在一個相對定位的容器有一個子元素，咱們直接設置這個子元素是絕對定位，而後設置left：0;right:0;top:0;bottom:0;此時子元素的寬度就是父級的寬度，子級的高度就是父級的高度，這就是絕對定位的特性，拉伸特性。

3.爲何九宮格佈局不能使用height的百分比。

答：

Web瀏覽器在計算有效寬度時會考慮瀏覽器窗口的打開寬度。若是你不給寬度設定任何缺省值，那瀏覽器會自動將頁面內容平鋪填滿整個橫向寬度。

（即塊級元素的寬度）

可是高度的計算方式徹底不同。事實上，瀏覽器根本就不計算內容的高度，除非內容超出了視窗範圍(致使滾動條出現)。或者你給整個頁面設置一個絕對高度。不然，瀏覽器就會簡單的讓內容往下堆砌，頁面的高度根本就無需考慮。

由於頁面並無缺省的高度值，因此，當你讓一個元素的高度設定爲百分比高度時，沒法根據獲取父元素的高度，也就沒法計算本身的高度。換句話說，父元素的高度只是一個缺省值：height: auto。當你要求瀏覽器根據這樣一個缺省值來計算百分比高度時，只能獲得undefined的結果。也就是一個null值，瀏覽器不會對這個值有任何的反應。

由於父級元素的高度是由該元素裏面的內容撐起的，在不設置該圓素高度的前提下。

因而子元素的高度height: 50% 也不會起做用。解決辦法就是給html和body加上height: 100%。

 

 

「咱們相信人人均可以成爲一個工程師，如今開始，找個師兄，帶你入門，學習的路上再也不迷茫。

這裏是技能樹.IT修真院：http://www.jnshu.com，初學者轉行到互聯網行業的彙集地。"

歡迎加IT交流羣565734203與你們一塊兒討論交流