首页 > 其他分享 >CSS-显示与隐藏[display、visibility、overflow]

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

时间:2022-09-20 16:12:50浏览次数:66  
标签:显示 元素 visibility 隐藏 overflow display

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:

标签:显示,元素,visibility,隐藏,overflow,display
From: https://www.cnblogs.com/chichi0002/p/16711394.html

相关文章