您现在的位置是: 首页 » 网页代码 » css如何隐藏元素不占位?
网页代码

css如何隐藏元素不占位?

网站优化小编一月 2, 2020 31人已围观

用 CSS 隐藏页面元素有许多种方法。你可以将 opacity 设为 0、将 visibility 设为 hidden、将 display 设为 none 等方式隐藏元素。

网站运营中栏目排名优化技巧

css使用display属性隐藏元素不会占位置。

display 属性依照词义真正隐藏元素。将 display 属性设为 none 确保元素不可见并且连盒模型也不生成。使用这个属性,被隐藏的元素不占据任何空间。

不仅如此,一旦 display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外,读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在。

任何这个元素的子孙元素也会被同时隐藏。为这个属性添加过渡动画是无效的,它的任何不同状态值之间的切换总是会立即生效。

不过请注意,通过 DOM 依然可以访问到这个元素。因此你可以通过 DOM 来操作它,就像操作其他的元素。

.hide {
   display: none;
}

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>HTML中文网</title> 
<style>
h1.hidden {display:none;}
</style>
</head>
<body>
	
<h1>这是一个可见标题</h1>
<h1 class="hidden">这是一个隐藏标题</h1>
<p>注意, 实例中的隐藏标题不占用空间。</p>
	
</body>
</html>

效果图:

网站运营中栏目排名优化技巧

文章评论

    发表评论

    电子邮件地址不会被公开。

站点信息
  • 站点运行:271天
  • 网站程序:Wordpress
  • 主题模板:bvseo
  • 文章统计:4000 条
  • 文章评论:153 条
  • 微信公众号:扫描二维码,关注我们