CSS：display和visibility隐藏的区别

区别：使用display：none隐藏元素后，位置不保留。使用visibility: hidden隐藏元素后，原位置保留。

visibility: hidden

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{height: 200px;width: 200px;margin: 10px auto;}#box1{background-color: red;}#box2{background-color: yellow;visibility: hidden;}#box3{background-color: green;}</style>
</head>
<body><div id="box1">1</div><div id="box2">2</div><div id="box3">3</div>
</body>
</html>

运行结果：

display：none

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{height: 200px;width: 200px;margin: 10px auto;}#box1{background-color: red;}#box2{background-color: yellow;display: none;}#box3{background-color: green;}</style>
</head>
<body><div id="box1">1</div><div id="box2">2</div><div id="box3">3</div>
</body>
</html>

运行结果：

CSS：display和visibility隐藏的区别相关推荐

CSS Display与Visibility区别和用法
CSS Display与Visibility区别和用法 CSS属性display和visibility容易混淆,visibility和display两个属性都有隐藏元素的功能.visibility属性 ...
css = display: none, visibility: hidden, opacity: 0 的区别
一. 页面结构 display: "none" 的元素其实并不会渲染,不会出现在页面中,不会占据位置,切换"显隐"时会触发渲染,所以会影响性能. visibil ...
CSS隐藏元素的几种方式以及display、visibility、opacity的区别
CSS隐藏元素的方式首先最通用且最易想到的方法肯定是display.visibility和opacity这三种了 display:none 设置元素不可见并且连盒模型也不生成,一般用于不占空间的隐藏 ...
[css] 说说display:none和visibility:hidden的区别
[css] 说说display:none和visibility:hidden的区别 display:none dom对象不渲染. visibility:hidden 隐藏但是dom对象渲染. 个人简介 ...
css3新增选择器、伪元素、隐藏元素的方法、visibility: hidden与display：none；的区别、遮罩层效果、三级菜单制作、选项卡制作——css3知识点总结
目录 css3新增选择器兄弟选择器属性选择器伪类选择器其他伪类选择器类元素选择器直接选择器否定选择器伪元素 :after清除浮动 :before和:after 用来写小三角形首字母 ...
CSS display(显示)详解与 visibility（可见性）详解[第七天]
文章目录 display list-item[无效果,懵逼] run-in[都不支持,忽略] initial content table visibility 隐藏元素(display:none/vi ...
display:none和visibility:hidden的区别
在使用CSS隐藏一些元素时,我们经常用到 display:none 和 visibility:hidden.两者差别如下: 1. 是否占据空间 display:none,该元素不占据任何空间,在文档渲 ...
display和visibility的用法和区别
大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的.visibility和display两个属性都有隐藏元素的功能.visibility ...
html隐藏visibility,通过display或visibility来隐藏html元素
有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏,可以通过display或visibility来实现.通过下面的例子了解display和visibility的区别,简单的例子代 ...
CSS中的display与visibility
文章目录一.display: none 二.visibility: hidden 三.opacity: 0 四.`display: none`与`visibility: hidden`的区别五.元 ...

CSS：display和visibility隐藏的区别

区别：使用display：none隐藏元素后，位置不保留。使用visibility: hidden隐藏元素后，原位置保留。

visibility: hidden

display：none

CSS：display和visibility隐藏的区别相关推荐

最新文章

热门文章