css => display: "none", visibility: "hidden", opacity: 0 的区别

一、 页面结构

  • display: "none" 的元素其实并不会渲染,不会出现在页面中,不会占据位置,切换“显隐”时会触发渲染,所以会影响性能。
  • visibility: "hidden" 的元素是会渲染的,它会占据页面中的位置(就好像 position: "relative" 的感觉一样,即使把元素left: 1080px,它也会占据原来的位置),切换“显隐”时会触发重绘,基本不影响性能。
  • opacity: 0,"opacity"是不透明度的意思,顾名思义,它只是让元素变得不透明,1为完全不透明,0是完全透明,所以它也会在页面中占据位置(只是透明了,看不见),切换“显隐”时会触发重绘。

在这里就有一个小插曲了:什么是渲染?什么是重绘?

  • 渲染: 这里所说的渲染其实指的回流,那什么是回流呢,回流就是当元素发生了会影响布局上变化的时候,页面需要重新构建,就会触发回流,重新渲染页面。
  • 重绘: 通俗的说,就是元素发生了不影响布局结构的样式变化时,只是元素自身的外观发生了变化,就会触发重绘,比如改变color、background-color等等。

1、display: block

代码:

<body>
  <p >我是吃瓜群众</p>
  <p id="p1">我是主角</p>
  <p >我是吃瓜群众</p>
  <button onclick="document.getElementById('p1').style.display='block'">
    Block
  </button>
  <button onclick="document.getElementById('p1').style.display='none'">
    None
  </button>
</body>

不妨、动手一试?

<body> <div style="background-color: lightyellow; border: 5px;"> <p style="margin: 0; padding: 0;">我是吃瓜群众 </p><p id="p1" style="margin: 0; padding: 0;">我是主角 </p><p style="margin: 0; padding: 0;">我是吃瓜群众</p> <button onclick="document.getElementById('p1').style.display='block'">Block </button><button onclick="document.getElementById('p1').style.display='none'" style="margin-left: 10px;">None </button> <br> </div> </body>

2、visibility: hidden

代码:

<body>
  <p >我是吃瓜群众</p>
  <p id="p2">我是主角</p>
  <p >我是吃瓜群众</p>
  <button onclick="document.getElementById('p2').style.visibility='visible'">
    Visible
  </button>
  <button onclick="document.getElementById('p2').style.visibility='hidden'">
    Hidden
  </button>
</body>

不妨、动手一试?

<body> <div style="background-color: lightyellow; border: 5px;"> <p style="margin: 0; padding: 0;">我是吃瓜群众 </p><p id="p2" style="margin: 0; padding: 0;">我是主角 </p><p style="margin: 0; padding: 0;">我是吃瓜群众</p> <button onclick="document.getElementById('p2').style.visibility='visible'">Visible </button><button onclick="document.getElementById('p2').style.visibility='hidden'" style="margin-left: 10px;">Hidden </button> <br> </div> </body>

3、opacity: 0

代码:

<body>
  <p >我是吃瓜群众</p>
  <p id="p3">我是主角</p>
  <p >我是吃瓜群众</p>
  <button onclick="document.getElementById('p3').style.opacity=0">
    0
  </button>
  <button onclick="document.getElementById('p3').style.opacity=.5">
    0.5
  </button>
  <button onclick="document.getElementById('p3').style.opacity=1">
    1
  </button>
</body>

不妨、动手一试?

<body> <div style="background-color: lightyellow; border: 5px;"> <p style="margin: 0; padding: 0;">我是吃瓜群众 </p><p id="p3" style="margin: 0; padding: 0;">我是主角 </p><p style="margin: 0; padding: 0;">我是吃瓜群众</p> <button onclick="document.getElementById('p3').style.opacity=0">0 </button><button onclick="document.getElementById('p3').style.opacity=.5" style="margin-left: 10px;">0.5 </button><button onclick="document.getElementById('p3').style.opacity=1" style="margin-left: 10px;">1 </button> <br> </div> </body>
posted @ 2019-03-05 13:20  Nyya  阅读(566)  评论(0编辑  收藏  举报