display:none、visibility:hidden与opacity:0直间到底什么区别（笔试题）

最新推荐文章于 2024-08-10 09:59:41 发布

强壮的糙汉子

最新推荐文章于 2024-08-10 09:59:41 发布

阅读量285

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/m0_60622481/article/details/124249272

版权

本文详细对比了display:none、visibility:hidden和opacity:0在空间占据、继承、事件绑定及过渡动画四方面的不同。display:none不占据空间，影响布局，无法触发事件且不支持过渡动画；visibility:hidden保持空间，子元素可继承并能触发事件，但不支持过渡；opacity:0元素占用空间，子元素可继承，支持过渡动画，但无法通过改变自身opacity显示。

摘要由CSDN通过智能技术生成

1、空间占据方面

display:none隐藏后不会占据原有空间，会产生回流和重绘

visibility:hidden和opacity:0元素隐藏，但仍然占据着原有空间，它们俩只会引起页面重绘。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .div1 {
            width: 100px;
            height: 100px;
            background:red;
            margin-top: 10px;
            display: none;
        }

        .div2 {
            width: 100px;
            height: 100px;