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

超出之后隐藏，有一个div，高度和宽度都是100像素，当里面的内容很多，div里撑不下时，如果设置overflow:hidden，就会把超出的内容隐藏掉不显示。操作方法如下：

1、首先，html页面结构如图，有几个column，每个column里有几行方格，每个方格里有文字。文字可能过长，超出单元格大小。

2、首先禁止文字折行显示，并隐藏超出部分。对于文字元素使用white-space: nowrap样式。

3、接下来，要给宽度超出父元素的情况添加一些样式。使用js代码实现一个函数，获取所有这样的元素（如图是都含有state-text class的元素），并依次比较各自是否超过各自父节点宽度。如果超过，添加一个class用于增加样式。

4、然后，使用setInterval让这个函数每过一段时间执行一次，如图每3秒检查一下页面上所有class含有state-text的元素。

5、在js代码中，添加对应的更新css变量的逻辑。如图，获取父节点宽度，并在子节点上调用style.setProperty来设置css变量值。

6、最终实现了滚动效果，如图所示，即使各个单元格宽度不同，即使宽度是运行时变化的，它们都能实现合理的滚动显示。

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

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

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

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

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