元素的隐藏与显示

最新推荐文章于 2022-04-10 20:13:37 发布

星汐飞花

最新推荐文章于 2022-04-10 20:13:37 发布

阅读量178

点赞数

分类专栏：笔记文章标签： css

本文链接：https://blog.csdn.net/weixin_46426843/article/details/105822659

版权

16 篇文章 0 订阅

订阅专栏

在网页中经常能看到我们把鼠标移到某个元素上时，出现了一个新的方块，或者在我们打开网页时，页面上有一些广告，当我们点击后就消失了。实际上这些元素都是在结构中存在的，只是被隐藏了。实现元素的隐藏有多个方法：

在前面我们都是使用这个对元素进行转换，这个也可以让元素进行隐藏。
当我们需要一个元素隐藏时只需要在样式中写上display: none;即可。无模式就是不显示，当我们需要他显示时只需要将需要的的模式写上就行。如：display: block;。

overflow (溢出的)
- visible (不剪切也不添加滚动条)
- hidden (切除超出的溢出部分)
- scroll (不管是否超出都显示滚动条)
- auto (超出时显示滚动条，不超出时不显示)

在实际使用中可以考虑哪个更加合适来选择使用。

在网页中鼠标样式会依旧所处位置的不同而发生改变，这可以提高用户使用的舒适度。

示例：cursor: pionter;

这个一般在表单中使用，在我们对一个文本输出框进行点击输入时，会发现，文本输入框出现了一个蓝色的边框，这就是轮廓线，这个并不美观。经常是被去除的，当我们想要去除时，在所需处样式中写上outline: none;即可。

文本域（textarea）是可以在网页中进行大小调节的，但是一般是禁止的，因为，随意调节文本域大小会让布局出现问题，我们写上resize: none;就可以防止文本域被随意拖拽改变大小。

关注