元素显示与隐藏

最新推荐文章于 2024-05-31 19:50:46 发布

昱晟168

最新推荐文章于 2024-05-31 19:50:46 发布

阅读量1.5k

点赞数

分类专栏： htmlcss中定位文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_47267628/article/details/122160268

版权

htmlcss中定位专栏收录该内容

6 篇文章 1 订阅

订阅专栏

元素显示与隐藏

类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现

本质：让一个元素在页面中隐藏或者显示出来

1.display：显示隐藏

2.visibility：显示隐藏

3.overflow：溢出显示隐藏

`display`属性

display属性用于设置一个元素应如何显示

display: none;隐藏
display: block;除了转换为块级元素之外，同时还有显示元素的意思

display隐藏元素后，不再占有原来的位置。（意思就是display隐藏元素后位置就没有了）

后面应用及其广泛，搭配JS可以做很多的页面特效

验证display属性隐藏元素不再占有位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .myDiv1 {
      display: none;/*隐藏该元素*/
      width: 200px;
      height: 200px;
      background-color: red;
    }
    .myDiv2 {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>
</head>
<body>
<div class="myDiv1">海康</div>
<div class="myDiv2">湛江</div>
</body>
</html>

没有添加display: none;前

在这里插入图片描述
添加display: none;后

`visibility`可见性

visibility属性用于指定一个元素应该可见还是隐藏

visibility:visible;元素可视（可见）
visibility: hidden;元素隐藏

如果隐藏元素想要原来位置继续占有，应用visibility: hidden;

如果隐藏元素不想要原来位置，就用display: none;（用处更多重点）

验证visibility: hidden;是还保留原来位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .myDiv1 {
      /*添加visibility: hidden;*/
      visibility: hidden;
      width: 100px;
      height: 100px;
      background-color: #ff7c2d;
    }
    .myDiv2 {
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
<div class="myDiv1">海康</div>
<div class="myDiv2">湛江</div>
</body>
</html>

没有添加visibility: hidden;
在这里插入图片描述
添加visibility: hidden;

overflow溢出

overflow属性指定了如果内容溢出一个元素的框（超过其指定高度或宽度）时，如果设置隐藏，则超出的部分隐藏，如果设置显示，则超出的内容显示

属性	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    * {
      margin: 0px;
      height: 0px;
    }
    .myDiv {
      /*overflow默认值是：visible*/
      /*overflow: visible;!*visible显示的意思*!*/
      /*overflow: hidden;!*hidden:如果超出的内容隐藏着*!*/
      /*overflow: scroll;*//*总是以滚动条显示内容*/
      overflow: auto;
      margin: 100px auto;
      height: 200px;
      width: 200px;
      border: 2px solid pink;
    }
  </style>
</head>
<body>
<div class="myDiv">
  所有 Thymeleaf 基础知识：从 Thymeleaf 简介及其使用方法，到其所有处理器/实用程序的参考。新手和老百里香叶用户的必读书。

  百里香 3.0：在线阅读， PDF， EPUB， MOBI
  百里香2.1：在线阅读
  日语翻译（非官方）：在线阅读， PDF， EPUB， MOBI |在线阅读 （v2.1）
  应用示例：好百里香虚拟杂货
</div>
</body>
</html>

验证：overflow: visible;默认值，超出的内容显示

在这里插入图片描述
验证：overflow: hidden;超出的内容不显示

在这里插入图片描述
验证：overflow: srcoll;总是有滚动条显示内容

验证：overflow: auto;如果内容没有超出则不显示滚动条，如果超出则显示滚动条

昱晟168

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
元素显示与隐藏

元素显示与隐藏类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现本质：让一个元素在页面中隐藏或者显示出来1.display：显示隐藏2.visibility：显示隐藏3.overflow：溢出显示隐藏display属性display属性用于设置一个元素应如何显示display: none;隐藏display: block;除了转换为块级元素之外，同时还有显示元素的意思display隐藏元素后，不再占有原来的位置。（意思就是display隐藏元素后位置就没有了）后
复制链接

扫一扫