在講樣式表開(kāi)發(fā)管理之前，我想插播一個(gè)小知識(shí)。前幾天看web標(biāo)準(zhǔn)設(shè)計(jì)組里，看到龍佑康同學(xué)問(wèn)到關(guān)于 block 和 inline的區(qū)別。記得以前也經(jīng)常會(huì)有人問(wèn)這樣的問(wèn)題，國(guó)內(nèi)的論壇也好，國(guó)外的論壇也好，似乎大家都會(huì)比較疑惑這兩者究竟是用來(lái)干什么的。想想其實(shí)好多人都會(huì)在這里犯一些比較常見(jiàn)錯(cuò)誤，所以干脆就開(kāi)一篇文章專(zhuān)門(mén)講講 block 和 inline 吧。

- 講表現(xiàn)之前先要講概念

這里我要強(qiáng)調(diào)一下，概念在前端開(kāi)發(fā)中是很重要的啦~

可能很多人都覺(jué)得，隨便搞個(gè)樣式，左擺擺右弄弄，能用就行了，但是實(shí)際上，很多情況都會(huì)有一些非常棘手的狀況。對(duì)于這些狀況，你需要有應(yīng)對(duì)。應(yīng)對(duì)的方法取決于很多因素，其中一個(gè)是靈感，還有一個(gè)就是對(duì)概念深入的理解了。

這里，我們要明確的概念是——什么是 block, 而什么又是 inline 呢？

其實(shí)，金光閃閃bling bling的規(guī)范里，在三個(gè)完全不同的地方提到了block和inline的概念。或許這個(gè)就是為什么這么多人都會(huì)感到confused 的原因吧=v=

- Block-level Elements VS Inline Elements

第一處講到block和inline概念的地方是在 HTML 的規(guī)范中。確切的說(shuō)應(yīng)該是 block-level elements (塊級(jí)元素) 和 inline elements (內(nèi)聯(lián)元素):

所有允許被 BODY 元素包含的元素，要么是塊級(jí)的；要么是內(nèi)聯(lián)的；要么既可以算作塊級(jí)的，也可以算作內(nèi)聯(lián)的。但是絕對(duì)不存在一個(gè)能被BODY包含，但即非塊級(jí)，又非內(nèi)聯(lián)的元素。

常見(jiàn)的塊級(jí)元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等等。

常見(jiàn)的內(nèi)聯(lián)元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等等。

另外，SCRIPT, OBJECT, MAP, BUTTON, DEL, INS 這些元素，既可以作為塊級(jí)元素，也可以作為內(nèi)聯(lián)元素。

那么塊級(jí)元素和內(nèi)聯(lián)元素具體有什么區(qū)別呢？具體表現(xiàn)在以下幾個(gè)方面：

• 一般來(lái)說(shuō)塊級(jí)元素可以包含塊級(jí)元素和內(nèi)聯(lián)元素；但內(nèi)聯(lián)元素只能包含內(nèi)聯(lián)元素。要注意的是，每個(gè)特定的元素，能包含的元素也是特定的，所以具體到個(gè)別元素上，這條規(guī)律是不適用的。

  比如 P 元素，只能包含內(nèi)聯(lián)元素，而不能包含塊級(jí)元素。

     1: <!-- 這樣做是錯(cuò)誤的 -->

     2: <p><div>一段文字</div></p>

     3:  

     4: <!-- 這樣才是王道 b=v= -->

     5: <p><span>一段文字</span></p>

  it知識(shí)庫(kù)：block 和 inline 的區(qū)別是什么，轉(zhuǎn)載需保留來(lái)源！

  鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。