Overflow：hidden和display：none有什么区别？

解决方案

溢出：隐藏仅表示文本是否在此元素之外流动，滚动条不会显示。 display：none表示未显示该元素。

假设我们有一个尺寸为100 x 100像素的div

然后，我们将一大堆文本放入其中，例如div溢出。如果我们使用overflow：hidden;，则不会显示适合100x100的文本，也不会影响布局。

显示：没有完全不同。它呈现页面的其余部分，好像" div"仍然可见。即使有溢出，也将予以考虑。它只是为div留出空间，但不渲染它。如果两者都设置：`display：none;溢出：隐藏；然后将不会显示，文本也不会溢出，并且页面将呈现为好像不可见的div仍然存在。

为了使div完全不影响渲染，请同时使用两个display：none;应该设置"溢出：隐藏；"，并执行诸如"设置高度：0;"之类的操作。或者使用width，或者同时使用两者，则页面将呈现为好像div根本不存在。

display：none从页面中删除元素，页面的流程就像根本不存在一样。

溢出：隐藏：

The CSS  overflow: hidden property can be used to reveal more or less of an element based on the width of the browser window.

例子：

.oh
{
  height: 50px;
  width: 200px;
  overflow: hidden;
}

如果此类中的块中的文本大于(长于)此小框可以显示的文本，则多余的文本将被隐藏。我们只会看到文本的开头。

显示：无；将仅隐藏该块。

请注意，我们还具有" visibility：hidden;"，它隐藏了块的内容，但是该块仍将位于布局中，并在周围移动内容。

display：none表示该标签根本不会出现在页面上(尽管我们仍然可以通过dom与之交互)。其他标签之间将没有分配空间。隐藏的溢出表示标记以特定高度呈现，并且任何会导致标记扩展以呈现标记的文本等都不会显示。我认为我们要问的是可见性：隐藏。这意味着与不显示什么不同，标签是不可见的，但是在页面上为其分配了空间。例如

<span>test</span> | <span>Appropriate style in this tag</span> | <span>test</span>

显示：无：

测试|测试

可见性：隐藏为：

测试|测试

可见性：隐藏呈现标记，只是在页面上看不到。

溢出的简单示例：隐藏http://www.w3schools.com/Css/tryit.asp?filename=trycss_pos_overflow_hidden

如果在该页面上编辑CCS，则可以看到溢出属性之间的区别(可见|隐藏|滚动|自动)，并且如果添加显示：css中没有显示，则整个内容块都将消失。

基本上，如果允许用户输入(例如，从CMS字段输入)以固定大小的块进行渲染，则这是一种控制布局和元素"流"的方法，我们可以调整溢出属性以停止框的大小增加并因此中断页面的布局。 (相反，显示：none阻止元素显示，然后重新调整整个页面)

溢出：隐藏隐藏内容的溢出，与溢出：自动的是，后者在固定大小的div上显示滚动条，该滚动条的内部内容大于其大小

显示：none隐藏元素，并且它完全不参与内容布局

P.S.两者之间没有区别，它们是完全无关的

默认情况下，HTML元素的高度与包含其内容所需的高度一样。

如果给HTML元素固定高度，则它可能不足以容纳其内容。因此，例如，如果我们有一个具有固定高度和蓝色背景的段落：

<p>This is an example paragraph. It has some text in it to try and give it a reasonable height. In a separate style sheet, we’re going to give it a blue background and a fixed height. If we add overflow: hidden, we won’t see any text that extends beyond the fixed height of the paragraph. Until then, the text will “overflow” the paragraph, extending beyond the blue background.</p>

p {
    background-color: #ccf;
    height: 20px;
}

该段内的文字将超出该段的底部边缘。

" overflow"属性允许我们更改此默认行为。因此，如果我们添加了overflow：hidden：

p {
    background-color: #ccf;
    height: 20px;
    overflow: hidden;
}

然后，我们将看不到该段落底部以外的任何文本。它将被剪切到该段落的固定高度。

" display：none"将简单地使整个段落(在视觉上)消失，变成蓝色背景，并且全部消失，好像它根本没有出现在HTML中一样。