【display:none失效】当display:none遇到了display:flex

最新推荐文章于 2024-07-17 18:23:49 发布

一只特仑苏

最新推荐文章于 2024-07-17 18:23:49 发布

阅读量5.3k

点赞数 3

分类专栏： HTML / CSS 文章标签： html5 css3

本文链接：https://blog.csdn.net/m0_61892085/article/details/123955786

版权

HTML / CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

当父元素设置为display:flex时，子元素的display:none或display:block可能失效。这是因为flex布局的优先级高于display属性。解决这个问题的方法是在子元素外再套一层div，然后应用display:none。通过这种方式，可以确保display:none正常工作。

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

当display:none遇到了display:flex

当我们在css布局的时候，会遇到这样一种情况：

父元素设置了display:flex时，子元素中的display:none或者display:block就会失效。这是因为display:flex的优先级高于display:none和display:block，使他们的作用失效了。

解决办法如下：

在子元素的外层，原来父元素的内层套一个盒子，比如div，display:none就能作用了。

在这种情况下，section盒子是不会被隐藏的

<body>
    <header>
    	<section>123</section>
	</header>
</body>
<style>
    header{
		display:flex;
    }
    section {
		display:none;
    }
</style>

修改后：

<body>
    <header>
    	<div>
            <section>123</section>
        </div>
	</header>
</body>
<style>
    header{
		display:flex;
    }
    section {
		display:none;
    }
</style>