在css盒子模型中,我們提到了html元素中的塊元素(block element)和內(nèi)聯(lián)元素(inline element)。那么它們究竟是什么呢?
其實(shí),這兩種元素都是html規(guī)范中的概念。塊元素(block element)一般是其他元素的容器元素,能容納其他塊元素或內(nèi)聯(lián)元素。最常見的就是P和div這兩個(gè),說的簡單點(diǎn),塊元素就好比一個(gè)四方塊,可以放其他的四方塊,并可以呈現(xiàn)在頁面上任何地方。默認(rèn)情況下塊元素,是獨(dú)占一行的。常見的塊元素:div、h1-h6標(biāo)題、form(只能用來容納其他塊元素)、hr、p、table、ul、ol等。內(nèi)聯(lián)元素(inline element)也叫內(nèi)嵌元素或行內(nèi)元素,一般都是基于語義級(jí)(semantic)的基本元素。內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素,常見內(nèi)聯(lián)元素有a和span。
塊元素與內(nèi)聯(lián)元素的區(qū)別?
1.塊元素,總是在新行上開始;內(nèi)聯(lián)元素,和其他元素都在一行上。
2.塊元素,能容納其他塊元素或內(nèi)聯(lián)元素;內(nèi)聯(lián)元素,只能容納文本或者其他內(nèi)聯(lián)元素。
3.塊元素中高度,行高以及頂和底邊距都可控制;內(nèi)聯(lián)元素中高,行高及頂和底邊距不可改變。
(這上面的區(qū)別,指的是默認(rèn)情況下的,不包括CSS的刻意控制。也就是說當(dāng)使用css控制時(shí),塊元素和內(nèi)聯(lián)元素的屬性差異會(huì)越來越小。)
block(塊)元素的特點(diǎn):
①總是在新行上開始;
②高度,行高以及外邊距和內(nèi)邊距都可控制;
③寬度缺省是它的容器的100%,除非設(shè)定一個(gè)寬度。
④它可以容納內(nèi)聯(lián)元素和其他塊元素
inline元素的特點(diǎn):
①和其他元素都在一行上;
②高,行高及外邊距和內(nèi)邊距不可改變;
③寬度就是它的文字或圖片的寬度,不可改變
④內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素
CSS文檔流與塊級(jí)元素(block)、內(nèi)聯(lián)元素(inline),之前翻閱不少書籍,看過不少文章, 看到所多的是零碎的CSS布局基本知識(shí),比較表面。看過O'Reilly的《CSS權(quán)威指南》,發(fā)現(xiàn)里面提到的文檔流概念讓我很敏感。 可惡的是書中并沒有解釋文檔流是什么東西,或許作者覺得這個(gè)太簡單了以至于不值一提。但我覺得,這個(gè)概念實(shí)在太重要了。理解了它,一堆CSS布局的理論都變得易于理解,并且體會(huì)到CSS這套設(shè)計(jì)的合理性所在。
文檔流
將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素,即為文檔流。
每個(gè)非浮動(dòng)塊級(jí)元素都獨(dú)占一行, 浮動(dòng)元素則按規(guī)定浮在行的一端。 若當(dāng)前行容不下, 則另起新行再浮動(dòng)。
內(nèi)聯(lián)元素也不會(huì)獨(dú)占一行。 幾乎所有元素(包括塊級(jí),內(nèi)聯(lián)和列表元素)均可生成子行, 用于擺放子元素。
有三種情況將使得元素脫離文檔流而存在,分別是浮動(dòng),絕對(duì)定位, 固定定位。 但是在IE中浮動(dòng)元素也存在于文檔流中(還讓我覺得這樣很合理><)。
新聞熱點(diǎn)
疑難解答
圖片精選