深入理解inline元素，block-level元素和display属性

行内元素和块级元素有什么异同？

可能你觉得这是一个老掉牙的问题，但其实并没有那么简单。

对于初学者来说，当遇到面试官问到这个问题的时候，脑海里的第一印象是css的display属性，值为inline时为行内元素，值为block时为块级元素，那值为inline-block时呢，元素是块级行内元素吗？

其实我们看问题的角度从一开始就错了，错误地站在了css的角度，而真正正确的是站在html的角度。因为这里的元素，本质上是指html的DOM元素。

下面我们就3个原理展开深入：

• 深入理解inline元素
• 深入理解block-level元素
• 深入理解display属性

并且提出两个问题：

 

块级元素列表

下面的元素默认是inline的。

 

• 行内元素和块级元素有什么异同？
• css属性display如何影响元素？

• 深入理解inline 元素

  在HTML中，行内元素是那些仅仅占据定义元素边界的标签空间的元素，而不是去破坏内容流。在这篇文章中，我们将检查HTML行内元素并且与block做对比。

  一个行内元素不会在a new line开始，而且仅仅占据必要的元素宽度空间，不会多占空间。

  inline vs block-level 元素：示范

  用一个简单例子来示范就好。

  .highlight {
    font-weight:bold;
  }
  

  Inline
  首先，让我们看一下下面的inline元素的示范：

  The following span is an inline element;
  its background has been colored to display both the beginning and end of
  the inline element's influence.
  

  在这个例子中，

  (段落)块级元素包含一些文本。在text文本内部有一个行内元素。因为标签是行内的，所以段落正确地绘制出一个单个的，没有断开的文本流，就系那个下面这样。

  The following span is an inline element; its background has been colored to display both the beginning and end of the inline element's influence.

  block-level
  现在把替换成

  ：

  The following div is an 
  block-level element;
  its background has been colored to display both the beginning and end of
  the block-level element's influence.
  
  

  绘制完之后是这样的：

  The following div is an
  block-level element;
  its background has been colored to display both the beginning and end of the block-level element's influence.
  看到差异了吗？

  元素改变了text的layout，将文本切分成了3个片段：在之前的text，的text，在之后的text。

   

  改变元素的level

  你可以使用CSS的display属性改变元素的level。
  inline blocks 通过将display的值从inline改为block，你可以告诉浏览器将一个inline元素，渲染成block box而不是inline box。改了属性值以后，不一定会完全呈现，它可能还是表现成行内元素，所以一定要看看结果。

  概念上的区别

  简而言之，在概念上inline和block-level元素有以下区别：

• Content model
  总体来说，行内元素也许仅仅包含数据和其他的行内元素。你不能在inline elements内部添加block elements。
• Formatting
  默认情况下，行内元素不会在文档流的开始位置强制生成一个新行。Block元素的话，正好与之相反，会很显著地break一行(但是，这可以使用CSS去改变。)