将控件样式设置为display: none
和display: block
有什么区别?
显示属性定义了某个 HTML 元素应如何显示。 block
和 none
用于显示或隐藏 HTML 元素。您可以在此处了解更多关于显示属性和可用选项的信息。
none: 元素将完全不显示。
block: 元素作为块级元素显示(如段落和标题)。
显示:none; - 该元素在DOM
中存在,但是不可见且不占用任何空间
,与visibility:hidden
不同。
显示:block; - 块状元素占用可用的全部宽度
,不允许其他元素放置在它们旁边。例如: div
这两个样式属性有着不同的作用。
display: none 将元素完全从文档中移除。它不占据任何空间,即使其HTML仍然存在于源代码中。(该元素将完全不生成任何盒子)
display: block 元素将横跨可用的整个宽度。(元素前后会有一个换行符)
您在询问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
对象呈现为内联,但对象的内容呈块元素呈现。相邻的内联元素在同一行上呈现,如果有空间的话。
Display:none;
表示该元素不会被显示,而 Display:block;
表示该元素将作为块级元素显示(例如段落和标题)。
display: none表示该元素完全不显示(因此在示例中也看不到它)。
display: block表示该元素显示为块,就像段落和标题一样。块上方和下方有一些空白,并且除非另有规定,否则不允许在其旁边放置任何HTML元素。
显示为无:它隐藏了控件。通过设置元素样式属性为“display:none”,该元素将不会在网页中呈现并且不占用位置。
显示为块:以块级别在网页上显示元素
display:none会隐藏内容,如果你将其应用于div,则div的宽度和高度也会被隐藏。display:block会显示内容。