css = display: none, visibility: hidden, opacity: 0 的区别
生活随笔
收集整理的這篇文章主要介紹了
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>不妨、動手一試？
我是吃瓜群眾
我是主角
我是吃瓜群眾
Block
None
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>不妨、動手一試？
我是吃瓜群眾
我是主角
我是吃瓜群眾
Visible
Hidden
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>不妨、動手一試？
我是吃瓜群眾
我是主角
我是吃瓜群眾
0
0.5
1
轉載于:https://www.cnblogs.com/nyya/p/10475773.html
總結
以上是生活随笔為你收集整理的css = display: none, visibility: hidden, opacity: 0 的区别的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 八个人打车一辆车怎么打
- 下一篇： STM32L0开发——ADC多通道采集，