<!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>
</style>
</head>
<!-- 一、是否占据空间
display:none,隐藏之后不占位置
visibility:hidden、opacity:0 隐藏之后仍然占据位置
原因是在DOM Tree阶段和CSS tree阶段 带有display:none解析的节点并不会合并成盒子 渲染出来 所以只能js访问
二、继承性
display：none没有继承性，visibility：hidden有继承性。
给父元素设置visibility：hidden，其子元素也会继承该属性，如果给子元素设置
visibility：visible，则子元素会显示出来。
三、回流（reflow）
display的改变会触发重绘回流
-->
<body>
<main>
<input style="visibility:hidden;" type="text" name="" id="">《=左边占位置的是input
<a style="display: none;" href="http://baidu.com"></a>《=左边不占位置的是a标签
<span style="color: orange;">display:none,隐藏之后不占位置
visibility:hidden、opacity:0 隐藏之后仍然占据位置
</span>
</main>
</body>
</html>
上一篇
异步组件的使用
2021-02-27
下一篇
break和continue
2021-02-21