CSS中Display（显示）和Visibility（可见）
邢新
CSS中常见的显示属性Display和可见属性Visibility
display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。
隐藏元素 - display:none或visibility:hidden
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注
意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，
该元素虽然被隐藏了，但仍然会影响布局。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
CSS Display - 块和内联元素
块元素是一个元素，占用了全部宽度，在前后都是换行符。
display 显示设置元素的显示类型:
- inline 行内
- block 块
- inline-block 行内块
- none 不显示
设置为none的元素及其后代都不会显示在页面上，也不占文档流
visibility 可见属性:
- visible 可见
- hidden 隐藏
特点：元素依然在原位置占位（相当于元素变为透明），无法选中，但是 子元素如果设置了visibility:visible，则该子元素依然可见
opacity 不透明度:
- 取值0到1之间
- 0为透明 1为不透明
- 当父元素设为透明时，子元素也会有相同的透明度，哪怕子元素有单独设置的透明度
- 设为透明依旧可以选中
颜色设置透明度
rgba(red,green,blue,alpha)
#RRGGBBAA
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* span{ display: block;} */
div{display: inline-block; width: 100px ;height: 50px;background-color: #CCAAAA80;}
/* .div2{visibility: hidden;} */
.div2{opacity: 0.5;}
img{ display: block;}
</style>
</head>
<body>
<!-- <span>行内标签</span> -->
<div class="div1">块标签1</div><div class="div2">块标签2<span style="opacity: .5">111</span></div><div class="div3">块标签3</div>
</body>
</html>赶紧点赞收藏起来运行一下吧！
类似资料：