发表于： 2019-06-28 23:21:45
1 695
今天完成的事：
因为明天要讲小课堂，准备了一下，任务只做了一点，完成了小课堂的准备，完成了任务8第二页面80%
明天计划的事：
把小课堂讲好，完成任务8
遇到的问题：
暂无
收获：
讲下小课堂要讲的知识吧
1.RGBA与OPACITY的区别
opacity会继承父元素的opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。简单来说就是opacity作用于元素和元素所有内容的透明，子孙后代都会继承初代元素的值，子孙元素设为别的值都是无效的。
而RGBA可以单独的为某个被设置的元素设置透明度，而它的子孙元素不会被它的设置所影响。
2. DISPLAY：NONE和VISIBILITY：HIDDEN的区别?
1.主要在于visibility:hidden占据空间，无法点击，另一个display:none;不占据空间，无法点击。有一句话是这么说的，display：none会真的把你弄没，而visibility：hidden则仅仅是为你披上一件隐身衣而已，你还在原来的地方呆着。设置透明值(opcity)，占据空间，可以点击。 该方法并非真正意义上的隐藏，只是将元素设为透明，但是只适用于文字类的元素，不适用于input，因为即使看不到，可以点击相应input。
2.就是displayed回流与渲染visibility没有这个影响前端性能的问题。回流则是重新使该页面渲染一次，从而影响性能。
3.株连性,所谓“株连性”，就是如果祖先元素遭遇某祸害，则其子子孙孙无一例外也要遭殃。display:none就是“株连性”明显的声明：一旦父节点元素应用了display:none，父节点及其子孙节点元素全部不可见，而且无论其子孙元素如何不屈地挣扎都无济于事.我们给一个父元素应用visibility:hidden，则其子孙后代也都会全部不可见。如果子孙元素应用了visibility:visible，那么这个子孙元素又会刘谦般地显现出来。
对比总结： display:none是个相当惨无人道的声明，子孙后代全部搞死（株连性），而且连块安葬的地方都不留（不留空间），导致全体民众哗然（渲染与回流）。 visibility:hidden则具有人道主义关怀，虽然不得已搞死子孙，但是子孙可以通过一定手段避免（伪株连性），而且死后全尸，墓地俱全（占据空间），国内民众比较淡然（无渲染与回流）。
返回列表
评论