9种HTML中通过CSS方式隐藏元素的方法

、通过style属性中的 display : none { 这种是最常用方式之一 }

display : none

这两种方式的区别是: display 设置为 none之后, 该元素不占用文档流

visibility 设置为 hidden之后, 该元素仍然占用文档流, 只不过是看不见了而已

2 、通过style属性中的 visibility : hidden { 这种也是最常用的方式之一 }

visibility : hidden

3 、通过相对定位移动当前元素到屏幕左侧

div{     
    position: relative;     
    left: -100%
}

但是要记住:

1 元素仍然占用标准文档流 2 百分比是相对父元素的宽度和高度的, 并不是相对可视区宽度偏移的

4 、通过元素内文本对齐将子元素移动到父元素右侧, 配合超出后不显示

.div{    
    text-indent: 100%;    
    white-space: nowrap;    
    overflow: hidden;
}

注意点: 此时子元素仍然占用文档流, 只是我们隐藏了超出部分

5 、设置元素的宽度和高度为0, 元素直接消失

.div{    
    width: 0px;    
    height: 0px;
}

注意点:

1 标准文档流是相对于一个容器来说的, 每一个容器有自己的文档流, 我们只关心当前元素所在的文档流 2 高度和宽度都设置为0后, 我们就可以认为此元素不再占用其父元素的标准文档流了, 但是这个容器仍然存在, 这个容器也存在一个标准文档流, 供其子元素使用; 其子元素不会消失, 仍然会正常显示, 但是不会占用其父元素所在的标准文档流( 即子元素显示不会受其影响, 此元素占用文档流的大小也不会受其子元素的影响 )

6 、设置元素透明度为 0

div{    
  opacity: 0;
}

这个感觉有点傻乎乎的, 掩耳盗铃, 不过这个经常用来做动画变换

7、旋转元素, 使与当前页面垂直

div{    
  transform: rotateX(90deg);
}

注意点: 这个只是显示上的变换, 仍然会占用原元素大小和位置的文档流, 其它各种变换也是如此。

8 、缩小元素尺寸到自身的0倍

div{    
  transform: scale(0);
}

注意点: 同上

9 、其它 transform 使其假不可见

为一个优秀的前端，我们经常遇到需要隐藏网页上的元素的情况。在本文中，我们将分享8 种在 CSS 中隐藏元素的方法，每种方法都有优点和注意事项。

Opacity and Filter:Opacity

隐藏元素最简单的方法之一是调整其不透明度。opacity 属性允许我们通过将其值设置为 0 来使元素完全透明。例如：

.element {
  opacity: 0;
}

或者，我们可以将过滤器属性与 opacity() 函数一起使用：

.element {
  filter: opacity(0);
}

opacity 和 filter: opacity() 都可以设置动画并提供良好的性能。但是，需要注意的是，即使完全透明，元素仍保留在页面上并且仍然可以触发事件。

Visibility

Visibility属性允许我们控制元素的可见性。通过将其设置为隐藏，我们可以隐藏元素，同时保留它在布局中占用的空间。例如：

.element {
  visibility: hidden;
}

默认情况下，辅助技术仍然可以访问隐藏元素的内容，因此考虑对可访问性的影响非常重要。要完全隐藏内容，可能需要其他 CSS 属性或 ARIA 属性，例如 aria-hidden="true"。

Display

display 属性是一种广泛使用的隐藏元素的方法。通过将其设置为 none，我们可以有效地从文档流中删除该元素，使其就像在 DOM 中从未存在过一样。例如：

.element {
 display: none;
}

虽然 display: none 是一个流行的选择，但它有一些局限性。它无法设置动画，并且应用时会触发布局更改，从而影响页面上其他元素的位置。为了缓解这种情况，我们可以使用其他技术，例如定位。

Hidden 属性

在 HTML 中，我们有隐藏属性，可以将其添加到任何元素以隐藏它。当存在hidden属性时，浏览器应用其默认样式，相当于设置display:none。例如：

<p hidden>Hidden content</p>

当标签的样式不允许被改变时，此属性非常有用。但是，它与使用 display ：none有相同的优点和限制。

使用 z-index

z-index 属性控制 z 轴上元素的堆叠顺序。给覆盖元素分配更高的z-index值，我们可以在视觉上隐藏其下方的元素。例如：

.element {
  position: relative;
  z-index: 1;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff; /* Same as the page background color */
  z-index: 2;
}

在此示例中，覆盖元素位于使用较高 z-index 值的元素之上。

Color AIpha Transparency

我们还可以单独隐藏特定的视觉属性，例如颜色、背景颜色或边框颜色，而不是使整个元素透明。这项技术使我们能够创建有趣的效果和动画。我们可以通过将 alpha 通道设置为 0 的 rgba() 值来实现这一点。例如：

.element {
  color: rgba(0, 0, 0, 0);
  background-color: rgba(0, 0, 0, 0);
  border-color: rgba(0, 0, 0, 0);
}

值得注意的是，这种技术可能不适用于具有图像背景的元素，除非它们是使用线性渐变或类似方法生成的。

CIip-Path

Clip-path 属性允许我们创建一个剪切区域来确定元素的哪些部分是可见的。通过设置一个值，例如circle(0)，我们可以完全隐藏该元素。例如：

.element {
  clip-path: circle(0);
}

使用剪辑路径为有趣的动画提供了范围。

clip-path 属性可以用于创建复杂的裁剪形状，从而实现各种有趣的效果。在这种情况下，使用 circle(0) 作为裁剪路径，是为了将元素完全裁剪掉，即不显示任何内容。

需要注意的是，clip-path 是一个比较新的 CSS 属性，不是所有浏览器都支持它。另外，即使浏览器支持 clip-path，也有可能出现一些兼容性问题，因此在使用 clip-path 时需要进行充分的测试和兼容性处理。

绝对定位

位置属性允许我们将元素从页面布局中的默认位置移动。通过使用position:absolute，我们可以将元素重新定位到屏幕外，从而有效地将其隐藏。例如：

.element {
  position: absolute;
  left: -9999px;
}

绝对定位提供了出色的浏览器支持，并且元素的原始尺寸保持不变。但是，需要注意的是，更改位置可能会影响页面的整体布局。此外，屏幕外的元素可能无法交互，因为它们不再位于视口内。

结论

总之，CSS 提供了多种技术来隐藏网页上的元素。通过了解每种方法的优点和局限性，我们可以为我们的特定用例选择最合适的方法。

着橙先生上一篇的常见样式属性，可以用在绝大多数的标签中，如div、sapn、p等标签中，这篇继续讲样式属性，不过是一些特殊标签的样式属性。

废话不多说，直接往下看

1、<img src="图片路径" alt="图片的描述说明文字">

Img标签也有橙先生上一篇文章中介绍的常见样式属性，另外如上所见它也有自己特殊的属性src和alt属性，img就是图片标签，那么src就是引入图片的属性，其中输入图片路径地址即可，而alt属性是对图片的描述文字，当图片不能正常显示时，将会显示alt里的文字

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

如下图所示

图片未正常显示的效果

<ul>

<li>这是ul标签中的一个小LI</li>

</ul>

<ol>

<li>这是ol标签中的一个小li</li>

</ol>

ul和ol的固定样式效果

2、无序列表和有序列表，它们有固定的样式如下图的圆点和序号，大多数情况我们是不需要的，这时我们就可以通过list-style: none;这个样式属性取消它们的固定样式

<li>这是ul标签中的一个小LI</li>

</ul>

<li>这是ol标签中的一个小li</li>

</ol>

ul和ol取消固定样式的效果

3、另外在常见的标签中的文章中提到的a标签，其中href属性就是填写链接目标的地方，而target属性定义被链接的文档（即网址）在何处显示，常用的就是“_blank”代表在新窗口中打开被链接文档。默认的是“_self”代表在此窗口中打开被链接文档，其他属性值不常用，就不过多介绍了

<a href="需要跳转到的网址或是文件，如" target="_blank">这个是文字的链接</a>

4、外边距（margin）、内边距（padding）,每个标签元素都可以设定外边距和内边距，外边距可以理解为是盒子以外的部分，而内边距是盒子以内的部分直到内容的地方，看图或是实际操作会比较好理解一些

所有HTML元素可以看作盒子，它包括：边距（margin），边框(border)，填充（padding），和实际内容(content)，如下图

HTML元素可以看作盒子

当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和边距。

下面的例子中设置div元素的宽度为300px，而实际宽度为450px

<div style="width: 300px;border: 25px solid orange;padding: 25px;margin: 25px;">这是一个div盒子</div>

实际宽度为450px的div

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

margin和padding（内边距和外边距）

margin或是padding只设置一个数值时代表上下左右都是这个数值，以下以margin为例的简写形式，代表的不同含义（padding也是一样的）

margin属性可以有一到四个值。

margin:25px 50px 75px 100px;

含义如下：

上外边距为25px (margin-top: 25px;)

右外边距为50px (margin-right: 50px;)

下外边距为75px(margin-bottom: 75px;)

左外边距为100px(margin-left: 100px;)

margin:25px 50px 75px;

含义如下：

上外边距为25px(margin-top: 25px;)

左和右外边距都为50px(margin-right: 50px;和margin-left: 50px)

下外边距为75px(margin-bottom: 75px;)

margin:25px 50px;

含义如下：

上和下外边距都为25px(margin-top: 25px和margin-bottom: 25px;)

左和右外边距都为50px(margin-right: 50px;和margin-left: 50px)

margin:25px;

含义如下：

上、下、左、右外边距都是25px（margin-top: 25px和margin-bottom: 25px;margin-right: 25px;margin-left: 25px）

这部分先讲到这里，后续将会不断的提到这些属性，记得要上手操作哦，动手写一下才能更好的理解！加油！争取后续出个视频，这样可以更形象的讲解。

在线咨询

上一篇：什么是HTM或HTML文件？如何打开HTM和HTML文件？
下一篇：使用 Python Flask 创建简易文件上传服务

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

9种HTML中通过CSS方式隐藏元素的方法

您的项目需求