display none和display block的区别

Question

将控件样式设置为display: none和display: block有什么区别？

- iJade

Answer 1

显示属性定义了某个 HTML 元素应如何显示。 block 和 none 用于显示或隐藏 HTML 元素。您可以在此处了解更多关于显示属性和可用选项的信息。

• none: 元素将完全不显示。

• block: 元素作为块级元素显示（如段落和标题）。

- Adil

---

新手可能会将“block”解释为显示被封锁，你看不到它 :) - Thyag

@Thyag 但是你可以看到一个具有display:block属性的元素，所以你说的话毫无意义。 - FireFuro99

Answer 2

显示:none; - 该元素在DOM中存在，但是不可见且不占用任何空间，与visibility:hidden不同。

显示:block; - 块状元素占用可用的全部宽度，不允许其他元素放置在它们旁边。例如： div

- Shiridish

Answer 3

这两个样式属性有着不同的作用。

display: none 将元素完全从文档中移除。它不占据任何空间，即使其HTML仍然存在于源代码中。（该元素将完全不生成任何盒子）

display: block 元素将横跨可用的整个宽度。（元素前后会有一个换行符）

- Srinivasula Reddy

Answer 4

您在询问CSS属性。这可用于显示/隐藏DOM元素。

CSS属性为"display"，其值为'none'，'block'等等。

参考：CSS Display，建议来自http://w3fools.com/。

block

以块级元素的形式呈现对象。

none

该元素未呈现。该元素对布局没有影响；所有子元素的显示也被关闭。文档呈现时好像该元素不存在。

inline

默认。对象按内容的尺寸作为内联元素呈现。

list-item

Internet Explorer 6及更高版本。对象呈现为块级元素，并添加列表项标记。

table-header-group

对象呈现为tHead。表头始终显示在所有其他行和行组之前，并在任何顶部标题之后显示。该标头在表格跨越的每个文档上显示。

table-footer-group

对象呈现为tFoot。表尾始终在所有其他行和行组之后显示，并在任何底部标题之前显示。该页脚在表格跨越的每个文档上显示。

inline-block

对象呈现为内联，但对象的内容呈块元素呈现。相邻的内联元素在同一行上呈现，如果有空间的话。

- Murali Murugesan

Answer 5

Display:none; 表示该元素不会被显示，而 Display:block; 表示该元素将作为块级元素显示（例如段落和标题）。

- coder

Answer 6

如果你动态插入一个 div 作为父 div 的子元素，并且你明确地将子元素的 visibility 属性设置为 "visible"，那么父元素的 visibility 属性只会使父元素可见/不可见；无论父元素的可见性设置如何，子元素都将保持可见。在这种情况下（父/子元素的可见性由不同的样式规则设置），父元素上的 display:none 设置将隐藏所有子元素--即使父/子元素是独立样式。

- Derwood Kirkwood

---

这在我的上一个项目中发生了。使用了.css（display none）然后合并到表头的.css（display block），然后使用.css（visibility hidden）然后.css（visibility visible）。 - saber tabatabaee yazdi

Answer 7

display: none表示该元素完全不显示（因此在示例中也看不到它）。

display: block表示该元素显示为块，就像段落和标题一样。块上方和下方有一些空白，并且除非另有规定，否则不允许在其旁边放置任何HTML元素。

- ravi gupta

Answer 8

显示为无：它隐藏了控件。通过设置元素样式属性为“display:none”，该元素将不会在网页中呈现并且不占用位置。

显示为块：以块级别在网页上显示元素

- Sohail Hameed

Answer 9

display:none会隐藏内容，如果你将其应用于div，则div的宽度和高度也会被隐藏。display:block会显示内容。

- Sky5005e