優(yōu)惠活動(dòng) - 12周年慶本月新客福利
優(yōu)惠活動(dòng) - 12周年慶本月新客福利
優(yōu)惠活動(dòng) - 12周年慶本月新客福利

企業(yè)網(wǎng)站設(shè)計(jì)網(wǎng)格布局

日期 : 2020-12-12 20:45:31
        網(wǎng)格布局。彈性盒子布局適用于一維布局,即橫向布局或者豎向布局。無法解決二維布局的復(fù)雜需求(葉文全,基于CSS網(wǎng)格布局的新一代網(wǎng)頁布局方法研究:西安文理學(xué)院學(xué)報(bào)(自然科學(xué)版),2018)。為此W3C組織又推出了CSS網(wǎng)格布局,它將網(wǎng)頁分成具有簡單屬性的行和列,注意它不同于最原始的表格table布局或display:table布局,它充分體現(xiàn)了結(jié)構(gòu)和表現(xiàn)高度分離。

        網(wǎng)格布局涉及到父元素和子元素兩個(gè)部分,設(shè)置父元素的display屬性設(shè)置為grid(或者inline-grid)時(shí),那么這個(gè)元素就是一個(gè)網(wǎng)格容器,它的所有直接子元素就成了網(wǎng)格項(xiàng)。如圖2所示,通過示意圖,可以看到網(wǎng)格布局所用到的常用元素。它看上去類似于表格,由行和列組成。

        其中每一行或者每一列叫做網(wǎng)格軌道,注意當(dāng)我們把局部元素定義網(wǎng)格時(shí),我們定義的就是網(wǎng)格軌道。每一個(gè)單元格叫做網(wǎng)格單元,它是網(wǎng)格布局中的最小單位。由若干單元格構(gòu)成的區(qū)域叫做網(wǎng)格區(qū)域,它呈矩形形狀。每一條線叫做網(wǎng)絡(luò)線,網(wǎng)格線從左到右或者從上到下依次順序編號。

相關(guān)文章