CSSlayout入門(mén)-創(chuàng)新互聯(lián)

元素與盒

在HTML中常常使用的概念是元素，而在CSS中，布局的基本單位是盒，盒總是矩形的。

成都創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的循化網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

元素與盒并非一一對(duì)應(yīng)的關(guān)系，一個(gè)元素可能生成多個(gè)盒，CSS規(guī)則中的偽元素也可能生成盒，display屬性為none的元素則不生成盒。

除了元素之外，HTML中的文本節(jié)點(diǎn)也可能會(huì)生成盒。

盒模型

一個(gè)盒包括了內(nèi)容(content)、邊框(border)、內(nèi)邊距(padding)、外邊距(margin)。下圖展示了盒模型的直觀意義：

盒的尺寸（width與height）定義受到box-sizing屬性的影響。box-sizing可選擇content-box(默認(rèn)), padding-box和border-box三種模式。

正常流

正常流是頁(yè)面，大部分盒排布于正常流中。正常流中的盒必定位于某一格式化上下文中，正常流中有兩種格式化上下文：塊級(jí)格式化上下文（block formatting context，簡(jiǎn)稱BFC）和行內(nèi)格式化上下文（inline formatting context,IFC）。

在塊級(jí)格式化上下文中，盒呈縱向排布，在行內(nèi)格式化上下文中，盒則呈橫向排布。

正常流根容器中是塊級(jí)格式化上下文，不同的盒可能會(huì)在內(nèi)部產(chǎn)生行內(nèi)格式化上下文或者塊級(jí)格式化上下文。

塊級(jí)與行內(nèi)級(jí)

正常流中的盒分為塊級(jí)與行內(nèi)級(jí)兩種，任何一個(gè)行內(nèi)級(jí)盒都不能夠直接被放入塊級(jí)格式化上下文中。如果有一個(gè)HTML元素生成了一個(gè)行內(nèi)盒，而其所在的上下文是塊級(jí)的話，那么應(yīng)當(dāng)為它生成一個(gè)匿名塊級(jí)盒，匿名塊級(jí)盒會(huì)在內(nèi)部生成行內(nèi)格式化上下文。

元素的display屬性會(huì)決定盒是行內(nèi)級(jí)還是塊級(jí)：

• block, table, flex, grid, list-item 為塊級(jí)
• inline, inline-block, inline-table, inline-flex, inline-grid 為行內(nèi)級(jí)

格式化上下文

display同時(shí)還可能決定元素內(nèi)部如何顯示，一些容器型元素生成的盒會(huì)產(chǎn)生BFC和IFC以外的格式化上下文。

有一類盒被稱為塊容器，它們能夠包含塊級(jí)盒。塊容器要么創(chuàng)建塊級(jí)格式化上下文，這樣它內(nèi)部?jī)H僅包含塊級(jí)盒，要么創(chuàng)建一個(gè)行內(nèi)格式化上下文，這樣它內(nèi)部?jī)H僅包含行內(nèi)級(jí)元素。（也就是說(shuō)，塊容器中不可能既包含塊級(jí)盒，又包含行內(nèi)級(jí)盒，一旦他的子盒中有塊級(jí)盒，所有行內(nèi)級(jí)盒都會(huì)被自動(dòng)創(chuàng)建匿名盒包裹）。

在非塊級(jí)格式化上下文中的塊容器總是會(huì)創(chuàng)建新的塊級(jí)格式化上下文：如display為inline-blocks, table-cells, 和table-captions所生成的盒。而自身也在塊級(jí)格式化上下文中的塊容器，則只有overflow不為visible的情形下才會(huì)創(chuàng)建新的塊級(jí)格式化上下文。

絕對(duì)定位和浮動(dòng)的塊容器則總是會(huì)創(chuàng)建新的塊級(jí)格式化上下文。

display值為table或者inline-table的元素將會(huì)生成表格（table），表格內(nèi)部會(huì)使用特殊的格式化方式來(lái)排布其內(nèi)部元素。

display值為grid或者inline-grid的元素將會(huì)生成格元素（grid element），與table情形類似，它內(nèi)部也是使用特殊的格式化方式來(lái)牌不其內(nèi)部元素，

display值為flex或者inline-flex的元素將會(huì)生成自適應(yīng)容器（flex container），自適應(yīng)容器在其內(nèi)部產(chǎn)生自適應(yīng)格式化上下文（flex formatting context）。

名稱欄目：CSSlayout入門(mén)-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)網(wǎng)址：http://muchs.cn/article30/csghpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、動(dòng)態(tài)網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站收錄、服務(wù)器托管、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)