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

html-css010

关于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大小设置为零,里面的文本却还是显示。*/}

首先我们写一个div,div里就是一段文字。

然后写一些css样式,关键部分是指定div的宽度,如图的样式代码

刷新页面,可以看到我们的文字在超长的时候,显示在div的外面了。

这时就要用到我们的overflow:hidden样式了。该样式就是为了避免超长时,显示内容溢出的,在样式里添加上这个。

再次刷新页面,可以看到现在超出的文字已经被隐藏掉了。

使用display:none;来隐藏所有信息(无空白位占据)推荐,CSSdisplay手册查看

使用overflow:hidden;来隐藏溢出的文字或图片适用推荐,CSSoverflow手册查看

使用overflow-y:hidden;和overflow-x:hidden控制滚动条的隐藏与否,CSSoverflow-y手册查看,CSS手册查看overflow-x

CSS:

CSS(层叠样式表)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。有三种方法可以在站点网页上使用样式表:外部样式表、内部样式表和内联样式。

CSS具有精简代码,降低重构难度、提升网页访问速度、利于SEO优化等优势,能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。