block 和 inline 的區別是什么
在講樣式表開發管理之前，我想插播一個小知識。前幾天看web標準設計組里，看到龍佑康同 學問到關于 block 和 inline 的區別。記得以前也經常會有人問這樣的問題，國內的論壇也好，國外的論壇也好，似乎大家都會比較疑惑這兩者究竟是用來干什么的。想想其實好多人都會在這里 犯一些比較常見錯誤，所以干脆就開一篇文章專門講講 block 和 inline 吧。
- 講表現之前先要講概念
這里我要強調一下，概念在前端開發中是很重要的啦~ 
可能很多人都覺得，隨便搞個樣式，左擺擺右弄弄，能用就行了，但是實際上，很多情況都會有一些非常棘手的狀況。對于這些狀況，你需要有應對。應對的方法取決于很多因素，其中一個是靈感，還有一個就是對概念深入的理解了。
這里，我們要明確的概念是——什么是 block, 而什么又是 inline 呢？
其實，金光閃閃bling bling的規范里，在三個完全不同的地方提到了block和inline的概念。或許這個就是為什么這么多人都會感到confused 的原因吧=v=
- Block-level Elements VS Inline Elements
第一處講到block和inline概念的地方是在 HTML 的規范中。確切的說應該是 block-level elements (塊級元素) 和 inline elements (內聯元素):
所有允許被 BODY 元素包含的元素，要么是塊級的；要么是內聯的；要么既可以算作塊級的，也可以算作內聯的。但是絕對不存在一個能被BODY包含，但即非塊級，又非內聯的元素。
常見的塊級元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等等。
常見的內聯元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等等。
另外，SCRIPT, OBJECT, MAP, BUTTON, DEL, INS 這些元素，既可以作為塊級元素，也可以作為內聯元素。
- 那么塊級元素和內聯元素具體有什么區別呢？具體表現在以下幾個方面：
-
-
一般來說塊級元素可以包含塊級元素和內聯元素；但內聯元素只能包含內聯元素。要注意的是，每個特定的元素，能包含的元素也是特定的，所以具體到個別元素上，這條規律是不適用的。
比如 P 元素，只能包含內聯元素，而不能包含塊級元素。
1: <!-- 這樣做是錯誤的 -->
2: <p><div>一段文字</div></p>
3:4: <!-- 這樣才是王道 b=v= -->
5: <p><span>一段文字</span></p>
-
另一個區別是在顯示上。塊級元素通常被現實為獨立的一塊，前后都會和換一行；內聯元素則前后不會產生換行，一系列內聯元素都在一行內顯示。但是，最終決定頁面顯示的是樣式表，而非元素本身。這條規則的制定，估計多半是為了讓那些先于規范出現的瀏覽器能自圓其說而已
比如我們知道，TABLE 元素的默認顯示布局其實是用一套獨特的 display: table 規則；而 BR 元素，根本本身就是個換行；哪怕一個DIV，都能用樣式表直接指定它 display: inline，所以這條規則也根本等于沒用。
-
那么本質的區別呢？其實最本質的區別在于——在 Strict 的DTD下，BODY 元素只能包含塊級元素，而不能包含內聯元素。或許你要問，不是說BODY包含的元素不是塊級就是內聯么？怎么沒有內聯了？很簡單——因為在Transitional 的DTD里，BODY也是可以包含內聯元素的
大家來看具體例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Block-Level vs Inline Demo</title>
</head>
<body>
<!-- 這樣做是錯的 --><img src="/SomeImage.png" title="an image" alt="an image" />
<!-- 一定要這樣做才可以喲 --><p><img src="/SomeImage.png" title="an image" alt="an image" /></p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Block-Level vs Inline Demo</title>
</head>
<body>
<!-- 換了個DTD就都OK了 --><img src="/SomeImage.png" title="an image" alt="an image" />
<p><img src="/SomeImage.png" title="an image" alt="an image" /></p>
</body>
</html>
-
- Block Box VS Inline Box
大家應該對CSS的盒式模型有些了解了吧。網頁上內容的布局，都是靠controlling box來實現的。
在CSS2.1的規范里，Controlling box 分三類——block box, inline box, 和至今都沒怎么被廣泛支持的run-in box。這就是規范中第二處提到block 和inline 的地方。網頁上的內容，不論是不是有標簽包圍，或者設定了何種顯示方式，最終都會被計算成一個 controlling box，并應用布局規則。
好在這個過程對于前端開發來說是透明的，大家可以不用去考慮，而只要考慮這兩種盒的區別就行了 
- 在普通布局中，block box 是從上至下，一個隔一個的布局的；inline box 則是從左至右（也可能因為設置了direction而從右到左，或者從上到下）首尾相接，不間斷的布局的。
- inline box 不響應垂直margin, width, height, max/min width/height 等屬性聲明；block box 則可以響應這些屬性。
常用的基本上就這樣了。
- display: block VS display: inline
最后一個有提到block 和inline 的地方就是這里了。和其他兩個地方不同，block 和inline 并不是display 這個屬性的唯一取值。CSS2.1規范中，display 屬性的取值可以為以下的任何一個：inline, block, list-item, run-in, inline-block, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none, inherit。
在通常情況下，display: block 能讓元素生成一個block box, 而display: inline 會生成inline box。
留言列表
