|
在講樣式表開發(fā)管理之前,我想插播一個小知識。前幾天看web標(biāo)準(zhǔn)設(shè)計組里,看到龍佑康同學(xué)問到關(guān)于 block 和 inline的區(qū)別。記得以前也經(jīng)常會有人問這樣的問題,國內(nèi)的論壇也好,國外的論壇也好,似乎大家都會比較疑惑這兩者究竟是用來干什么的。想想其實(shí)好多人都會在這里犯一些比較常見錯誤,所以干脆就開一篇文章專門講講 block 和 inline 吧。
- 講表現(xiàn)之前先要講概念
這里我要強(qiáng)調(diào)一下,概念在前端開發(fā)中是很重要的啦~
可能很多人都覺得,隨便搞個樣式,左擺擺右弄弄,能用就行了,但是實(shí)際上,很多情況都會有一些非常棘手的狀況。對于這些狀況,你需要有應(yīng)對。應(yīng)對的方法取決于很多因素,其中一個是靈感,還有一個就是對概念深入的理解了。
這里,我們要明確的概念是——什么是 block, 而什么又是 inline 呢?
其實(shí),金光閃閃bling bling的規(guī)范里,在三個完全不同的地方提到了block和inline的概念?;蛟S這個就是為什么這么多人都會感到confused 的原因吧=v=
- Block-level Elements VS Inline Elements
第一處講到block和inline概念的地方是在 HTML 的規(guī)范中。確切的說應(yīng)該是 block-level elements (塊級元素) 和 inline elements (內(nèi)聯(lián)元素):
所有允許被 BODY 元素包含的元素,要么是塊級的;要么是內(nèi)聯(lián)的;要么既可以算作塊級的,也可以算作內(nèi)聯(lián)的。但是絕對不存在一個能被BODY包含,但即非塊級,又非內(nèi)聯(lián)的元素。
常見的塊級元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等等。
常見的內(nèi)聯(lián)元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等等。
另外,SCRIPT, OBJECT, MAP, BUTTON, DEL, INS 這些元素,既可以作為塊級元素,也可以作為內(nèi)聯(lián)元素。
- 那么塊級元素和內(nèi)聯(lián)元素具體有什么區(qū)別呢?具體表現(xiàn)在以下幾個方面:
-
一般來說塊級元素可以包含塊級元素和內(nèi)聯(lián)元素;但內(nèi)聯(lián)元素只能包含內(nèi)聯(lián)元素。要注意的是,每個特定的元素,能包含的元素也是特定的,所以具體到個別元素上,這條規(guī)律是不適用的。
比如 P 元素,只能包含內(nèi)聯(lián)元素,而不能包含塊級元素。
1: <!-- 這樣做是錯誤的 -->
2: <p><div>一段文字</div></p>
3:
4: <!-- 這樣才是王道 b=v= -->
5: <p><span>一段文字</span></p>
it知識庫:block 和 inline 的區(qū)別是什么,轉(zhuǎn)載需保留來源!
鄭重聲明:本文版權(quán)歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標(biāo)記有誤,請第一時間聯(lián)系我們修改或刪除,多謝。
-