CSS-显示与隐藏[display、visibility、overflow]

CSS-显示与隐藏[display、visibility、overflow]

本质：让一个元素在页面中隐藏或者显示出来。

1.display显示隐藏

display属性用于设置一个元素应如何显示。

• display:none ; 隐藏对象

• display : block ; 除了转换为块级元素之外,同时还有显示元素的意

display 隐藏元素后,不再占有原来的位置。

2.visibility显示隐藏

vibility属性用于指定一个元素应可见还是隐藏。

• visibility : visible; 元素可视

• visibility : hidden; 元素隐藏

visibility隐藏元素后,继续占有原来的位置。

如果隐藏元素想要原来位置,就用 visibility : hidden

如果隐藏元素不想要原来位置。就用display : none

3.overflow显示隐藏

overflow 属性指定了如果内容移除一个元素的框（超过其指定高度以及宽度）时，会发生什么

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。

但是如果有定位的盒子，请慎用overflow：hidden ，因为它会隐藏多余的部分。

// scroll 溢出的部分显示滚动条，不溢出也显示滚动条
overflow: scroll;

// auto 溢出的的时候才显示滚动条，不溢出不显示滚动条
overflow: auto;

scroll：

auto：