这两天在回顾学习过的知识,春招在即,想找个好实习得好好看书才是。也学到自己以前不知道,不明白的知识点,感觉挺好的。
dispaly:none
会让元素从渲染树中消失,渲染的时候不占据任何空间,它是一个非继承属性,子孙节点消失是由于元素从渲染树中消失造成的,通过修改子孙节点的属性,无法显示,读屏器不会读取 dispaly:none 元素的内容
visibility:hidden
不会让元素从渲染树中消失,渲染的时候仍占据空间,只是内容不可见。它属于继承属性,其子孙节点会继承它的属性,但是可以通过设置 visibility:visible. 让子孙节点显示。读屏器会读取元素内容。
代码实例:
<div style='background:red;width:30px;height:30px'></div>
<div style='background:yellow;width:30px;height:30px;visibility:hidden'></div>
<div style='background:red;width:30px;height:30px'></div>
<div style='background:red;width:30px;height:30px;display:none'></div>
<div style='background:yellow;width:30px;height:30px'></div>
效果图: