display：block和display：inline有什么区别

解决方案

块元素通常将垂直堆叠，而内联元素将水平排列。

两个Divs会相互堆叠，但是如果将它们设置为display：inline，它们将在水平方向上彼此相邻。反之亦然，带有Span标签。

显示：块
将导致该对象将容器中的其他对象强制移到新行上。

显示：内联
尝试将对象与其他对象显示在同一行上。

显示：块

Item 1 
Item 2 
Item 3

显示：内联

Item 1 Item 2 Item 3

display：block表示该元素显示为一个块，因为段落和标题一直都是。一个块在其上下都有一定的空格，并且不允许在其旁边的HTML元素，除非另有规定(例如，通过向另一个元素添加一个float声明)。 display：inline表示元素在同一行的当前块内以内联方式显示。仅当元素在两个块之间时，该元素才会形成"匿名块"，但是宽度最小。

块使用可用的全宽，前后都有新行。内联仅使用所需的宽度，而不会强制使用新行。

是的，

display：block使元素的行为像一个块，例如：<p>

display：inline make和元素布局内联。

这些可以应用于默认为相反显示类型的元素。

可能的值

* none - no display at all.
* inline - An inline box.
* block - A block box.
* inline-block - effectively a block box inside an inline box. Not supported by Mozilla at time of writing. IE will only apply inline-block to elements that are traditionally inline such as span or a but not p or div. Loopy.
* run-in - Either an inline or block box depending on the context. If a block box follows the run-in box, the run-in box becomes the first inline box of that block box, otherwise it becomes a block box itself. Crazy. Not supported by IE/Win or Mozilla at the time of writing.
* list-item - the equivalent of the default styling of the HTML li element.
* table - a block-level table - the equivalent of the default styling of the HTML table element. Not supported by IE.
* inline-table - an inline-level table. Not supported by IE.
* table-row-group - the equivalent of the default styling of the HTML tbody element. Not supported by IE.
* table-header-group - the equivalent of the default styling of the HTML thead element. Not supported by IE.
* table-footer-group - the equivalent of the default styling of the HTML tfoot element. Not supported by IE.
* table-row - the equivalent of the default styling of the HTML tr element. Not supported by IE.
* table-column-group - the equivalent of the default styling of the HTML colgroup element. Not supported by IE.
* table-column - the equivalent of the default styling of the HTML col element. Not supported by IE.
* table-cell - the equivalent of the default styling of the HTML td or th elements. Not supported by IE.
* table-caption - the equivalent of the default styling of the HTML caption element. Not supported by IE.

*来源

CSS中有两种主要的绘图上下文类型可以分配给元素。一种是" display：block"，创建可定位的框。另一个" display：inline"将内容作为一个框内的一系列行流动。

默认情况下，一个图块占据所有水平空间，因此一系列图块将一个显示在另一个图的下面，并垂直堆叠。当内联元素流入线中时，它们被水平渲染，一个单词接一个单词。

通常，我们使用block来布局页面，而内联保留用于在文本块(例如链接)中找到的文本内容。

还有其他类型的绘图上下文，例如" display：table"，但是由于它们的特殊性质和/或者缺乏浏览器支持，因此很少使用。

CSS 2.1规范中提供了更多详细信息。

重要的是要注意，不能为内联元素分配自己的宽度，高度或者垂直空格(边距/填充顶部/底部)。

如果我们试图使块元素的行为像内联元素(它们在彼此之间堆叠在一起)，则应该使用" float"。浮标将在同一方向上与其他浮标相邻堆叠。同样，任何被赋予" float"的内联元素将自动被赋予一个块。

一个HTML文档被认为是一个流程，想一想堆在顶部的HTML元素。

流中将一个块定义为一个框(默认情况下与页面一样大)，并在不与另一个块重叠的情况下将其尽可能多地推到顶部。例如：div，p，表。

内联元素未定义框(这就是为什么我们无法设置其宽度和高度的原因)，它将被添加到当前块中的其他内联元素中。示例：范围，代码