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: