Html display none 和 display block 的区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14039079/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Difference between display none and display block
提问by iJade
What is the difference between setting a control's style display: noneand display: block?
设置控件的样式display: none和display: block?
回答by Adil
The display property defines how a certain HTML element should be displayed. Display blockand noneare used to show or hide html elements. You can read more about display property and available options here.
display 属性定义了某个 HTML 元素应该如何显示。Displayblock和none用于显示或隐藏 html 元素。您可以在此处阅读有关显示属性和可用选项的更多信息。
none: The element will not be displayed at all.
block: The element displayed as a block-level element (like paragraphs and headers)
none：完全不显示元素。
块：显示为块级元素的元素（如段落和标题）
回答by Cdeez
Display:none;- The element is in the DOMbut is NOT visible and does not take up any spaceunlike visibility:hidden.
显示：无；- 元素在DOM但不可见并且不占用任何space不同visibility:hidden。
Display: block;- A block element takes up the full widthavailable and does not allow other elements to be placed beside them. Example: div
显示：块；- 块元素占用full width可用空间，并且不允许其他元素放置在它们旁边。例子：div
回答by Srinivasula Reddy
These two style properties do two different things.
这两个样式属性做两件不同的事情。
display: noneremoves the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code. (The element will generate no box at all)
display: none从文档中完全删除元素。它不占用任何空间，即使它的 HTML 仍在源代码中。（该元素根本不会生成框）
display: blockthe element will span the full width of the space available to it. (a line break before and after the element)
display: block元素将跨越可用空间的整个宽度。（元素前后换行）
回答by Derwood Kirkwood
There is another nuance to display:none; if you dynamically insert a div as a child to a parent div--and you explicitly set the visibility property of the childto "visible", the visibility property of the parent will only make the parent visible/invisible; the child will remain visible, regardless of the parent's visibility setting.
显示另一个细微差别：无；如果您将一个 div 作为子级动态插入到父 div 中——并且您明确地将子级的可见性属性设置为“可见”，则父级的可见性属性只会使父级可见/不可见；无论父级的可见性设置如何，子级都将保持可见。
In such a case (where parent/child visibility are set by different style rules), the display:none setting on the parent willhide all the children--even if parent/children are styled independently.emphasized text
在这种情况下（父/子可见性由不同的样式规则设置），父的 display:none 设置将隐藏所有子 - 即使父/子是独立样式的。强调文本
回答by ravi gupta
display: none means that the element is not displayed at all (so you won't see it in the example either).
display: none 表示根本不显示该元素（因此您也不会在示例中看到它）。
display: block means that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise
display: block 表示元素显示为一个块，就像段落和标题一样。一个块的上下都有一些空白，并且旁边没有 HTML 元素，除非另有规定
回答by Murali Murugesan
You are asking about a CSS property i think. This is used to show/hide DOM elements
您问的是我认为的 CSS 属性。这用于显示/隐藏 DOM 元素
CSS property is display and the value is 'none', 'block', etc
CSS 属性为 display，值为 'none'、'block' 等
Referring from : CSS Displayas suggested by http://w3fools.com/
引用自：http: //w3fools.com/建议的CSS 显示
block
堵塞
Object is rendered as a block element.
对象呈现为块元素。
none
没有任何
Element is not rendered. The element (it has no effect on layout); all child elements also have their display turned off. The document is rendered as though the element did not exist.
元素未呈现。元素（它对布局没有影响）；所有子元素的显示也被关闭。文档呈现为好像该元素不存在。
inline
排队
Default. Object is rendered as an inline element sized by the dimensions of the content.
默认。对象呈现为内联元素，其大小由内容的尺寸决定。
list-item
项目清单
Internet Explorer 6 and later. Object is rendered as a block element, and a list-item marker is added.
Internet Explorer 6 及更高版本。对象呈现为块元素，并添加了一个列表项标记。
table-header-group
表头组
Object is rendered as tHead. Table header is always displayed before all other rows and row groups, and after any top captions. The header is displayed on each document spanned by a table.
对象呈现为 tHead。表格标题始终显示在所有其他行和行组之前以及任何顶部标题之后。标题显示在由表格构成的每个文档上。
table-footer-group
桌脚组
Object is rendered as tFoot. Table footer is always displayed after all other rows and row groups, and before any bottom captions. The footer is displayed on each document spanned by a table.
对象呈现为 tFoot。表格页脚始终显示在所有其他行和行组之后以及任何底部标题之前。页脚显示在由表格构成的每个文档上。
inline-block
内联块
Object is rendered inline, but the contents of the object are rendered as a block element. Adjacent inline elements are rendered on the same line, space permitting.
对象内联呈现，但对象的内容呈现为块元素。在空间允许的情况下，相邻的内联元素呈现在同一行上。
回答by Sohail Hameed
Display None: it hides the control. by setting the property of element style="display:none" element will not rendered in webpage and not take place
Display None：隐藏控件。通过设置元素的属性 style="display:none" 元素不会在网页中呈现，也不会发生
Display Block: Show the element on web page in block level
显示块：以块级别显示网页上的元素
回答by Sky5005e
Display none will hide the contains, here if you apply it on div then width and height of div will also hide. Display block will show the contains.
Display none 将隐藏包含，如果您将其应用到 div 上，则 div 的宽度和高度也将隐藏。显示块将显示包含。
回答by coder
Display:none;means the element will not be displayed, and Display:block;means the element is displayed as a block-level element (like paragraphs and headers).
Display:none;表示该元素不会显示，Display:block;表示该元素显示为块级元素（如段落和标题）。
