css隐藏元素的方法和区别

最新推荐文章于 2022-09-20 09:28:38 发布

Cupid510

最新推荐文章于 2022-09-20 09:28:38 发布

阅读量132

点赞数

分类专栏： css 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44283432/article/details/123792947

版权

css 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

css隐藏元素的方法

display

不占据页面布局，子元素继承

Visibility

占据页面布局，子元素不继承（可通过visibility: visible，让子元素显示）

Opacity

占据页面布局，子元素不能显示

Position

通过定位移出可视区域，子元素可显示

 <style>
    .box{
      width: 300px;
      height: 300px;
      background-color: aqua;
      /* display: none; */
      /* visibility: hidden; */
      opacity: 0;
    }
    .content{
       width: 100px;
      height: 100px;
      background-color: darkorange;
      /* 不显示 */
      /* display: block; */
      /* 显示 */
      /* visibility: visible; */
      /* 不显示 */
      opacity: 1;  

    }
  </style>
  <body>
    <div class="box">
        <div class="content">
          4345
        </div>
    </div>
  </body>
  <script>

Cupid510

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css隐藏元素的方法和区别

css隐藏元素的方法display不占据页面布局，子元素继承Visibility占据页面布局，子元素不继承（可通过visibility: visible，让子元素显示）Opacity占据页面布局，子元素不能显示Position通过定位移出可视区域，子元素可显示 <style> .box{ width: 300px; height: 300px; background-color: aqua; /* display: non
复制链接

扫一扫