关于CSS属性display:none和visible:hidden的区别

html-css016

关于CSS属性display:none和visible:hidden的区别,第1张

实现div隐藏可以通过设置display、visible和div的大小等实现隐藏效果。cssdisplay属性

display属性规定元素应该生成的框的类型。值为none时,此元素不会被显示。/*示例*/div{display:none}cssvisibility属性

visibility属性规定元素是否可见。值为hidden时表示元素是不可见的。/*示例*/div{visible:hidden}提示:visible:hidden和display:none的区别是,即使不可见的元素也会占据页面上的空间。"display"属性可以用来创建不占据页面空间的不可见元素。(visible和display属性的其他可能值可在w3school查看)。设置div的大小实现隐藏

将div的宽度和高度设置为零,也可以达到隐藏的效果。/*示例*/div{width:0pxheight:0pxoverflow:hidden/*规定当内容溢出元素框时隐藏。防止div大小设置为零,里面的文本却还是显示。*/}

CSS visibility 属性规定元素是否可见。

visible 元素可见。

hidden 元素不可见。

collapse 在表格元素中使用时,此值可删除一行或一列,但它不影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。

inherit 从父元素继承 visibility 属性的值。

你在 html 里面写的东西默认情况下就是属于 visibility:visible 即元素可见。当某些情况下,你让元素不可见了:visibility:hidden 再通过一些事件触发后让元素变成可见,就要用到这个visibility:visible。

和display:none的区别,你理解是对的,display:none以后,元素是不占位的。