css隐藏元素的方法

来源：互联网 2023-03-16 19:10:33 193

网页开发，经常会用到css样式，通过css我们可以让html显示规范，美观，也可以隐藏一些元素。怎么隐藏？下面我们来看下。

方法/步骤

我们先写上html代码，主要是二个div，样式名分别为div1, div2

css隐藏元素的方法

然后定义这二个样式，目前的样式完全一样。

css隐藏元素的方法

页面运行后，如图，现在二个div都显示出来了。

css隐藏元素的方法

如果要隐藏div1，怎么用css来隐藏？

其实可以有二种写法，二者有一些区别，先写第一种，我们在div1的样式定义里加上一行样式： display: none;

主要就是用这行样式代码来隐藏div1。

css隐藏元素的方法

刷新页面，可以看到，现在第一个div已经隐藏起来了。

css隐藏元素的方法

另一种写法是怎样的？

也是一行代码就可以了，把display: none;的样式，修改成visibility: hidden;

css隐藏元素的方法

6该信息未经授权抓取自百度经验

再刷新页面，我们可以看到，第一个div也是看不到了。

但大家有看到和前面一种写法有什么不一样的地方吗？

没错，就是div1虽然是看不到了，但还是占用原来的空间。至于要使用哪个写法，就按自己的需求来用了，就看是否保留原来的空间。

css隐藏元素的方法

无论是哪种方法，我们用css来隐藏元素，在原代码里，原来的html元素，（div1）还是存在的，只不过是界面上看不到了而已。

css隐藏元素的方法

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： CSS HTML

上一篇：jquery跳转页面的方法下一篇：怎样在HTML网页中使用bootstrap框架