成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Grid網(wǎng)格布局學(xué)習(xí)（1）

Jaden / 2057人閱讀

摘要：阮一峰的網(wǎng)格布局教程于月號(hào)發(fā)布正好學(xué)習(xí)一波布局。布局是二維布局將容器劃分成行和列產(chǎn)生單元格然后指定項(xiàng)目所在的單元格。

阮一峰的網(wǎng)格布局（grid）教程于3月25號(hào)發(fā)布,正好學(xué)習(xí)一波grid布局。雖然grid布局還不能夠支持商用,擴(kuò)展一下知識(shí)面也是好的。

grid布局在主流瀏覽器的支持情況can i use查看

grid號(hào)稱是史上最強(qiáng)大的布局方案，它將網(wǎng)頁(yè)劃分成一個(gè)個(gè)小網(wǎng)格，可以任意組合不同的網(wǎng)格,做成各式各樣的布局。

grid布局和flex布局不同，flex布局是一維布局，只能改變項(xiàng)目的軸線位置。grid布局是二維布局,將容器劃分成行和列,產(chǎn)生單元格,然后指定項(xiàng)目所在的單元格。

容器屬性 display屬性

display:grid 指定一個(gè)容器采用網(wǎng)格布局。

div{
    display:grid
}

默認(rèn)情況下容器都是塊級(jí)元素,但也可以設(shè)置成行內(nèi)元素。

div{
    diplay:inline-grid;
}

注意:設(shè)置成網(wǎng)格布局之后，容器的float、display:inline-block、display:inline-cell、vertical-align和column-*等設(shè)置都失效。

grid-template-columns屬性和grid-template-rows屬性

容器指定為網(wǎng)格布局之后,就要設(shè)置列寬 grid-template-columns、行高 grid-template-rows

div{
    display:grid;
    grid-template-columns:100px 100px 100px;
    grid-template-rows:100px 100px 100px;
}
//指定了三行三列的網(wǎng)格,列寬和行高都是100px。

除了設(shè)置px還可以用百分比

div{
    display:grid;
    grid-template-columns:33.3% 33.3% 33.3%;
    grid-template-rows:33.3% 33.3% 33.3%;
}
repeat()

網(wǎng)格特別多的時(shí)候可以用repeat函數(shù)簡(jiǎn)化重復(fù)的值。

div{
    display:grid;
    grid-template-columns:repeat(3,33.3%);
    grid-template-rows:repeat(3,33.3%);
}

repeat()接受2個(gè)參數(shù),第一個(gè)參數(shù)是重復(fù)的次數(shù),第二個(gè)參數(shù)是所要重復(fù)的值。
repeat()重復(fù)某種模式也是可以的

grid-template-columns:repeat(2, 100px 20px 80px);
auto-fill關(guān)鍵字

有時(shí)候單元格大小是固定的，但是容器大小是不確定的,如果希望每一行或每一列容納盡可能多的單元格,這時(shí)可以用auto-fill關(guān)鍵字表示自動(dòng)填充。

.container{
    display:grid;
    grid-template-columns:repeat(auto-fill,100px)
}
//自動(dòng)填充，每列寬100px;
fr關(guān)鍵字

為了表示比例關(guān)系,網(wǎng)格布局提供了fr關(guān)鍵字。如果兩列的寬分別為1fr和2fr,就表示后者是前者的2倍。

.container{
    display:grid;
    grid-template-columns:1fr 1fr;
}
minmax()

minmax()函數(shù)產(chǎn)生一個(gè)長(zhǎng)度范圍,表示長(zhǎng)度就在這個(gè)范圍之內(nèi),接受兩個(gè)參數(shù),分別是最小值、最大值

grid-tempalte-columns:1fr 1fr minmax(100px,1fr);
auto關(guān)鍵字

auto關(guān)鍵字表示由瀏覽器自己決定長(zhǎng)度。

grid-template-columns:100px auto 100px;
未完待續(xù)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/117578.html

相關(guān)文章

  • (譯)原生CSS網(wǎng)格布局學(xué)習(xí)筆記

    摘要：你可以用網(wǎng)格這樣做這樣的顯示效果是沒(méi)什么錯(cuò)誤的，當(dāng)使用網(wǎng)格，重新定義列數(shù)非常簡(jiǎn)單。絕對(duì)定位當(dāng)我們絕對(duì)定位一個(gè)網(wǎng)格元素的時(shí)候，這個(gè)元素會(huì)跑到它的容器中，我們可以用和來(lái)定位它。最簡(jiǎn)單的命名約定使用網(wǎng)格自動(dòng)編號(hào)。 注：此文是我翻譯的第一篇技術(shù)文章。適合有一定CSS原生網(wǎng)格布局使用經(jīng)驗(yàn)的開(kāi)發(fā)者（讀前需要先去了解一下原生CSS網(wǎng)格的語(yǔ)法），原生CSS網(wǎng)格布局（Native CSS grid）截止...

    v1 評(píng)論0 收藏0

  • (譯)原生CSS網(wǎng)格布局學(xué)習(xí)筆記

    摘要：你可以用網(wǎng)格這樣做這樣的顯示效果是沒(méi)什么錯(cuò)誤的，當(dāng)使用網(wǎng)格，重新定義列數(shù)非常簡(jiǎn)單。絕對(duì)定位當(dāng)我們絕對(duì)定位一個(gè)網(wǎng)格元素的時(shí)候，這個(gè)元素會(huì)跑到它的容器中，我們可以用和來(lái)定位它。最簡(jiǎn)單的命名約定使用網(wǎng)格自動(dòng)編號(hào)。 注：此文是我翻譯的第一篇技術(shù)文章。適合有一定CSS原生網(wǎng)格布局使用經(jīng)驗(yàn)的開(kāi)發(fā)者（讀前需要先去了解一下原生CSS網(wǎng)格的語(yǔ)法），原生CSS網(wǎng)格布局（Native CSS grid）截止...

    Warren 評(píng)論0 收藏0

  • 翻譯 | CSS網(wǎng)格（CSS Grid）布局入門

    摘要：瀏覽器兼容性網(wǎng)格布局從開(kāi)始收到支持，微軟在會(huì)更新對(duì)網(wǎng)格布局的支持。微軟的瀏覽器和有一種比較舊的實(shí)現(xiàn)，所以有不少限制，我們會(huì)簡(jiǎn)單介紹新的實(shí)現(xiàn)方式和老的實(shí)現(xiàn)方式之間的區(qū)別，這樣你能知道如何規(guī)避他們。 原文地址：Getting to know CSS Grid Layout 原文作者：Chris Wright 譯者：華翔 校對(duì)者：珂珂、干干 翻譯 | CSS網(wǎng)格（CSS Grid）布局入...

    Ashin 評(píng)論0 收藏0

  • 學(xué)不動(dòng)了?可能方法不太對(duì)-Grid 網(wǎng)格布局

    摘要：前情提要本人是一個(gè)學(xué)渣非科班入行年了吧前端東西真的好多啊又不斷更新需要不斷的學(xué)學(xué)學(xué)在去年年底開(kāi)始我就開(kāi)始不斷的尋找學(xué)習(xí)的方法如何更加高效的學(xué)習(xí)如何才能學(xué)的又快又好在這半年來(lái)不斷的總結(jié)慢慢找到了一些方法和訣竅此文章不是網(wǎng)格布局的教學(xué)文章只前情提要 ??本人是一個(gè)學(xué)渣,非科班入行2年了吧,前端東西真的好多啊,又不斷更新.需要不斷的學(xué)學(xué)學(xué), showImg(https://user-gold-c...

    happyfish 評(píng)論0 收藏0

  • css grid布局入門

    摘要：簡(jiǎn)介網(wǎng)格布局又稱網(wǎng)格，是一種二維網(wǎng)格布局系統(tǒng)。在處理網(wǎng)頁(yè)布局方面一直做的不是很好。網(wǎng)格容器中的所有子元素就會(huì)自動(dòng)變成網(wǎng)格項(xiàng)目網(wǎng)格線組成網(wǎng)格線的分界線。 簡(jiǎn)介 CSS網(wǎng)格布局（又稱網(wǎng)格），是一種二維網(wǎng)格布局系統(tǒng)。CSS在處理網(wǎng)頁(yè)布局方面一直做的不是很好。一開(kāi)始我們用的是table（表格）布局，然后用float(浮動(dòng))，position（定位）和inline-block（行內(nèi)塊）布局，但是...

    wzyplus 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<