在讲样式表开发管理之前，我想插播一个小知识。前几天看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>

  it知识库：block 和 inline 的区别是什么，转载需保留来源！

  郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。