HTML和CSS隐藏元素的四种方法

京拾

已于 2022-08-23 14:16:12 修改

阅读量1k

点赞数

文章标签： css html css3

于 2022-08-23 14:15:29 首次发布

本文链接：https://blog.csdn.net/qq_48109675/article/details/126480384

版权

本文介绍了四种在HTML和CSS中隐藏元素的方法：使用display:none移除元素空间；通过visibility:hidden保持空间但隐藏内容；利用opacity:0透明化元素；以及在父元素上应用overflow: hidden来隐藏超出部分。每种方法都有其特点和适用场景。

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

第一种：display：none

特点：不占据屏幕空间

显示：display：block

<!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>
    .one {
      width: 200px;
      height: 200px;
      background-color: lightblue;
    }

    .two {
      width: 80px;
      height: 80px;
      background-color: lightcoral;
      display: none;
    }

    .three {
      width: 80px;
      height: 80px;
      background-color: lemonchiffon;

    }
  </style>
</head>

<body>
  <div class="one">
    <div class="two"></div>
    <div class="three"