第10章.md

希望元素不可见，同时不占据空间，辅助设备无法访问，同时不渲染

<script type="text/html">
 <img src="1.jpg">
</script>

希望元素不可见，同时不占据空间，辅助设备无法访问，但资源有加载，DOM 可访问;display:none

元素不可见，同时不占据空间，辅助设备无法访问，但显隐的时候可以有 transition 淡入淡出效果

.hidden {
 position: absolute;
 visibility: hidden;
}

如果希望元素不可见，不能点击，辅助设备无法访问，但占据空间保留

.vh {
 visibility: hidden;
}

希望元素不可见，不能点击，不占据空间，但键盘可访问

.clip {
 position: absolute;
 clip: rect(0 0 0 0);
}
.out {
 position: relative;
 left: -999em;
}

望元素不可见，不能点击，但占据空间，且键盘可访问，则可以试试 relative 隐藏

.lower {
 position: relative;
z-index: -1;
}

希望元素不可见，但可以点击，而且不占据空间，则可以使用透明度

.opacity {
 position: absolute;
 opacity: 0;
 filter: Alpha(opacity=0);
}

单纯希望元素看不见，但位置保留，依然可以点可以选，则直接让透明度为 0

.opacity {
 opacity: 0;
 filter: Alpha(opacity=0);
}

隐藏动画的话可以使用如下的方式

 max-height: 0;
 overflow: hidden;

display 例外

<!-- 仍然可以点击 -->
<form>
 <input id="any" type="submit" style="display:none;">
 <label for="any">提交</label>
</form>

CSS 代码显示

<style style="display:block;">
.l { float: left; }
</style>

天坛支持显隐

HTML5 中新增了 hidden 这个布尔属性，可以让元素天生 display:none 隐藏。例如：

看不见我

visibility 子元素无法显示仅仅是因为继承性

visibility:hidden 不会影响计数器的计数

CSS3 transition 支持的 CSS 属性中有 visibility,不显示时不占体积，显示时占体积渐变

<!-- 无效 -->
.box > .target {
 display: none;
 position: absolute;
 opacity: 0;
 transition: opacity .25s;
}
.box:hover > .target {
 display: block;
 opacity: 1;
}
<!-- 有效 -->
.box > .target {
 position: absolute;
 opacity: 0;
 transition: opacity .25s;
 visibility: hidden;
}
.box:hover > .target {
 visibility: visible;
 opacity: 1;
}

从第一行经过，想查看第二行时却被第一行遮挡，需要延时显示时，用 visibility

<td>
 <a href>操作▾</a>
 <div class="list">
 <a href>编辑</a>
 <a href>删除</a>
 </div>
</td>
.list {
 position: absolute;
 visibility: hidden;
}
td:hover .list {
 visibility: visible;
 transition: visibility 0s .2s;
}