display：block和display：inline
之间有什么区别答案 0 :(得分：11)
display：block
将使对象强制容器内的其他对象进入新行。
display：inline
尝试在与其他对象相同的行上显示对象。
显示：块
Item 1 Item 2 Item 3
显示：内联
Item 1 Item 2 Item 3
答案 1 :(得分：5)
块元素通常垂直堆叠，而内联元素将水平排列。
两个Div将叠加在一起，但如果将它们设置为显示：inline，它们将水平相邻。使用Span标签反之亦然。
答案 2 :(得分：4)
display：block使元素的行为类似于块，例如：<p>
显示：内联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.
* source
答案 3 :(得分：3)
display：block表示元素显示为块，因为段落和标题始终如此。块在其上方和下方都有一些空格，并且不允许旁边没有HTML元素，除非另有命令（例如，通过向另一个元素添加浮动声明）。 display：inline表示元素在同一行的当前块内部显示为内联。只有当它在两个块之间时，该元素才会形成一个“匿名块”，但它具有尽可能小的宽度。
答案 4 :(得分：1)
CSS中有两种主要的绘图上下文类型可以分配给元素。一，display: block，创建可定位的框。另一个，display: inline将内容作为一系列行内容流动。
默认情况下，一个块占用所有水平空间，因此一系列块将一个在另一个下方显示，垂直堆叠。当内联元素流入线条时，它们会水平渲染，一个字一个接一个地显示。
通常，您使用块来布局页面，而内联是为在文本块中找到的文本内容保留的，例如链接。
还有其他类型的绘图上下文，例如display: table，但由于它们的专业性和/或缺乏浏览器支持，因此很少使用它们。
the CSS 2.1 specification中提供了更多详细信息。
答案 5 :(得分：1)
重要的是要注意，内联元素不能分配自己的宽度，高度或垂直空白（边距/填充顶部/底部）。
如果您尝试使块元素的行为类似于内联元素（它们彼此相邻堆叠），那么您应该使用float。浮子将在同一方向上堆叠在其他浮子旁边。此外，任何给定float的内联元素都将自动成为块。
答案 6 :(得分：0)
Block使用可用的全宽，前后使用新行。内联仅使用它所需的宽度而不强制换行。
答案 7 :(得分：0)
HTML文档被认为是一个流程，想到堆积在顶部的一堆HTML元素。
块在流中定义为一个框（默认情况下与页面一样大），并尽可能多地推到顶部而不与另一个块重叠。示例：div，p，table。
内联元素未定义框（这就是您无法设置其宽度和高度的原因），它将附加到当前块中的其他内联元素。示例：span，code，a。
答案 8 :(得分：0)
display: block
元素将占用其父元素的整个容器。通常以新的一行开始。
display: inline-block
这将创建一个内联元素，只占用所需的空间。可以从生产线的任何地方开始。
使用示例：在页面顶部创建菜单栏时（菜单项包装器通常分配为display: inline-block）
答案 9 :(得分：0)
考虑以下示例： 默认情况下是一个块级元素，将水平占据整个空间。并且默认是内联元素（下一个 span 元素将水平占据相同的行空间）
h1{
background-color:yellow;
}
span{
background-color:lightpink;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h1>This is heading 1</h1>
<h1> This is heading 2</h1>
<span>Span1</span>
<span>Span2</span>
</body>
</html>让我们通过将内置内联元素转换为块级元素（反之亦然）来更好地理解。
h1{
background-color:yellow;
display:inline;
}
span{
background-color:lightpink;
display:block;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h1>This is heading 1</h1>
<h1> This is heading 2</h1>
<span>Span1</span>
<span>Span2</span>
</body>
</html>