发表于： 2019-06-17 23:01:27
1 934
今天完成的事：
对第二个页面，基本完成了还差小图片没插入
明天计划的事：
完成任务7，对完成深度思考
遇到的问题：
音乐插入时出现了播放器图标
我通过给元素添加opacity:0;让其透明来实现隐藏效果。
收获：
学会了五种隐藏元素的方法
Opacity属性意思是设置一个元素的透明度。
设为0只是从视觉上隐藏元素，元素本身依然占据他本来的位置并对网页的布局起作用，只是看不见而已，但它还在原来的位置。
该属性不能在读屏软件中隐藏元素，元素和它的内容会被软件阅读。
该属性可以实现一些效果很棒的动画，opacity小于1的元素会创建一个新的堆叠上下文（stacking context）.用户可以和它交互。
Visibility
将它的值设为hidden将隐藏元素，跟opacity一样，元素只是看不见，但还是存在原地，会对布局起作用。和opacity的不同是它不会响应任何用户交互，并且不会被读屏软件阅读会被隐藏。
这个属性也能够实现动画效果，只要它的初始和结束状态不一样。这确保了 visibility 状态切换之间的过渡动画可以是时间平滑的（可以用这一点来用 hidden 实现元素的延迟显示和隐藏）
如果一个元素的visibility被设置为hidden,想显示某个子孙元素，
只要给要显示的元素添加visibility: visible;即可。
Display
display属性依照词义真正隐藏元素。将display属性设为none，元素不可见连盒模型也不生成，元素不会占据空间。设置了none属性值，该元素对用户的交互操作都不可能生效，读屏软件也不能读到其内容，实现的效果就像元素不存在一样。
子孙元素也会继承。属性添加过度动画是无效的。
可以通过DOM来访问该元素和操作它。
只要祖先元素的值是none，不管自身的值是什么它都不可见。
Position
通过将元素的top和left设置成足够大的负数，使它在屏幕上不可见。用它隐藏的元素的内容可以被读屏软件读取，它只是把元素移到可视区域外面让用户看不见它。避免用它去隐藏可以获得焦点的元素，不然那个元素获得焦点时，会导致一个不可预料的焦点切换。
Clip-path
通过剪裁也可以实现隐藏，如果你把鼠标悬停在第一个元素上，它依然可以影响第二个元素，尽管第二个元素已经通过 clip-path 隐藏了。如果你点击它，它会移除用来隐藏的 class，让我们的元素从那个位置显现出来。被隐藏元素中的文字仍然能够通过读屏软件读取，许多 WordPress 站点使用 clip-path 或者之前的 clip 来实现专门为读屏软件提供的文字。
虽然我们的元素自身不再显示，它也依然占据本该占据的矩形大小，它周围的元素的行为就如同它可见时一样。记住用户交互例如鼠标悬停或者点击在剪裁区域之外也不可能生效。在我们的例子里，剪裁区大小为零，这意味着用户将不能与隐藏的元素直接交互。此外，这个属性能够使用各种过渡动画来实现不同的效果
返回列表
评论