元素的显示与隐藏(display、visibility、overflow)

重要!

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

Display属性

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

  • display: none; 隐藏对象(隐藏元素后,不再占有原来的位置)
  • display: block; 除了可以转换为块级元素之外,同时还有显示元素的意思

Visibility可见性

Visibility属性用于指定一个元素显示或隐藏。

  • visibility: visible; 元素可视
  • visibility: hidden; 元素隐藏(隐藏元素后,继续占有原来的位置)

总结:

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

如果隐藏元素不想要原来位置,就用display: none; (用处多,重点记!)

overflow溢出

overflow属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度)时,会发生什么。

属性值描述
visible不剪切内容也不添加滚动条(默认)
hidden不显示超过对象尺寸的内容,超出的部分隐藏掉
scroll不管超出内容否,总是显示滚动条
auto超出自动显示滚动条,不超出不显示滚动条

如果有定位的盒子,慎用overflow:hidden 因为会隐藏多余的部分!

版权声明:本文为本站原创文章,由37.2℃发表,转载请注明出处,保留一切权利!

转载请注明:转载于37.2度云笔记

发表评论

邮箱地址不会被公开。

微信