九宮格有哪幾種方法可以實(shí)現(xiàn)采蚀，他們各自的優(yōu)缺點(diǎn)是什么疲牵？
it修真院小課堂
目錄
1.背景介紹
2.知識(shí)剖析
3.常見問題
4.解決方案
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
7.參考文獻(xiàn)
8.更多討論
1.背景介紹
盒子模型與元素水平
九宮格對(duì)于一個(gè)初學(xué)者來說，只需要了解標(biāo)準(zhǔn)盒模型榆鼠，盒模型由內(nèi)至外分別是content纲爸、padding、border妆够、margin识啦，
? ? ? ? ? ? ? ? ? ? 其中可以使用百分比的有content,padding,margin负蚊，邊框border則不可以用%單位。
元素水平分為3種：block水平颓哮，inline-block水平家妆，inline水平，3種元素各有不同的表現(xiàn)冕茅。
? ? ? ? ? ? ? ? ? ? block水平默認(rèn)情況下伤极，繼承父級(jí)寬度，鋪滿整行姨伤。多個(gè)元素豎直方向排列哨坪，可以設(shè)置寬高，豎直方向上的padding,margin有效乍楚。
? ? ? ? ? ? ? ? ? ? inline元素水平排列齿税，多個(gè)inline水平的元素，會(huì)在一行里排列炊豪，不可以設(shè)置寬高凌箕，豎直方向上的padding,margin無效。
? ? ? ? ? ? ? ? ? ? inline-block水平元素词渤，用時(shí)具有block水平和inline水平的特點(diǎn)牵舱，多個(gè)元素水平排列成一行∪迸埃可以設(shè)置寬高芜壁，豎直方向上的padding,margin有效。
2.知識(shí)剖析
既然這樣高氮，實(shí)現(xiàn)九宮格效果慧妄，必然不能是9個(gè)block水平的元素或者是9個(gè)inline水平的元素，只能是inline-block的元素剪芍。
? ? ? ? ? ? ? ? 所以引出第一種九宮格布局塞淹。inline-block布局。固定尺寸的九宮格布局罪裹。
關(guān)于九宮格的自適應(yīng)饱普，什么叫自適應(yīng)，九宮格的自適應(yīng)指的又是什么状共，認(rèn)識(shí)css單位px套耕、%與vw。
px與%和vw峡继，簡述css單位
px,%,vw的不同之處
px：絕對(duì)單位冯袍，頁面按精確像素展示
vw：viewpoint-width，視窗寬度碾牌，1vw等于視窗寬度的1%康愤。
vh：viewpoint-height关划，視窗高度，1vh等于視窗高度的1%翘瓮。
%:百分比，以父級(jí)元素的尺寸為基準(zhǔn)裤翩，乘以%后得到相應(yīng)的尺寸资盅。
-->
既然這樣就可以輕松的寫出第一個(gè)九宮格展示圖
2、float布局
關(guān)于浮動(dòng)
float 屬性定義元素在哪個(gè)方向浮動(dòng)踊赠。以往這個(gè)屬性總應(yīng)用于圖像呵扛，使文本圍繞在圖像周圍，不過在 CSS 中筐带，任何元素都可以浮動(dòng)今穿。浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，而不論它本身是何種元素伦籍。
3蓝晒、vw布局
4、flex布局
5帖鸦、grid布局
6芝薇、position布局
7、line-height布局
3.常見問題
display:inline-block后的九宮格會(huì)折行作儿？
4 解決方案
分析原因
解決辦法
1洛二、父級(jí)設(shè)置font-size為0
2、標(biāo)簽閉合
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
9宮格必須使用9個(gè)div嗎攻锰？
不一定
直接看demo晾嘶。
3個(gè)div實(shí)現(xiàn)9宮格
1個(gè)div實(shí)現(xiàn)9宮格
7.參考文獻(xiàn)
參考1：張鑫旭大神的博客
8 更多討論
討論點(diǎn)1：以上提到的九宮格布局實(shí)現(xiàn)方案，還有別的實(shí)現(xiàn)方案嗎娶吞？
討論點(diǎn)2：選擇哪種方案好垒迂？
討論點(diǎn)3：初學(xué)者實(shí)現(xiàn)九宮格要注意的問題
1：table布局方案，純position定位方案
2：考慮兼容性的話float布局與inline-block布局最好妒蛇，其他的布局方案或多或少不兼容低版本瀏覽器
3：inline-block的問題娇斑，有必要清楚浮動(dòng)嗎？
鳴謝
感謝大家觀看
今天的分享就到這里啦材部，歡迎大家點(diǎn)贊毫缆、轉(zhuǎn)發(fā)、留言乐导、拍磚~
技能樹.IT修真院???
? “我們相信人人都可以成為一個(gè)工程師苦丁，現(xiàn)在開始，找個(gè)師兄物臂，帶你入門旺拉，掌控自己學(xué)習(xí)的節(jié)奏产上，學(xué)習(xí)的路上不再迷茫”蛾狗。
? ?這里是技能樹.IT修真院晋涣，成千上萬的師兄在這里找到了自己的學(xué)習(xí)路線，學(xué)習(xí)透明化沉桌，成長可見化谢鹊，師兄1對(duì)1免費(fèi)指導(dǎo)。
? ?快來與我一起學(xué)習(xí)吧~http://www.jnshu.com/login/1/21109035
