CSS元素的显示和隐藏

最新推荐文章于 2021-08-03 20:57:59 发布

溯琳

最新推荐文章于 2021-08-03 20:57:59 发布

阅读量134

点赞数 2

分类专栏： web 文章标签： css html css3

本文链接：https://blog.csdn.net/m0_56787796/article/details/115646219

版权

web 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

CSS元素的显示和隐藏

display
visibility
overflow

display

<!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>display</title>
    <style>
      .div1 {
        display: none;
        /* display: none;隐藏对象 */
        /* display : block ;除了转换为块级元素之外，
        同时还有显示元素的意思 */
        /* display隐藏元素后，不再占有原来的位置。 */
        width: 200px;
        height: 200px;
        background-color: pink;
      }
      .div2 {
        width: 200px;
        height: 200px;
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <div class="div1"></div>
    <div class="div2"></div>
  </body>
</html>

display

visibility

<!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>visibility</title>
    <style>
      .div1 {
        visibility: hidden;
        /* visibility : visible;元素可视 */
        /* visibility : hidden;元素隐藏 */
        /* visibility隐藏元素后，继续占有原来的位置。 */
        /* 如果隐藏元素想要原来位置，就用visibility : hidden */
        /* 如果隐藏元素不想要原来位置，就用display : none(用处更多) */
        width: 200px;
        height: 200px;
        background-color: pink;
      }
      .div2 {
        width: 200px;
        height: 200px;
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <div class="div1"></div>
    <div class="div2"></div>
  </body>
</html>

visibility

overflow

<!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>overflow</title>
    <style>
      .div1 {
        /* 溢出部分隐藏 */
        overflow: hidden;
        /* 如果有定位的盒子，请慎用overflow:hidden因为它会隐藏多余的部分。 */
        /* overflow: scroll;溢出显示滚动条 */
        /* overflow: auto; 溢出显示滚动条，不溢出不显示滚动条 */
        width: 200px;
        height: 100px;
        border: 3px solid aqua;
      }
    </style>
  </head>
  <body>
    <div class="div1">
      CSDN博客为中国软件开发者、IT从业人员、IT初学者打造交流的专业IT技术发表平台,
      全心致力于帮助开发者通过互联网分享知识,让更多开发者从中受益,一同和IT开发者用代码改变未来.
    </div>
  </body>
</html>