HTML CSS

1、通过style属性中的 display : none

这种是最常用方式之一 

  1. display : none

这两种方式的区别是: display 设置为 none之后, 该元素不占用文档流，visibility 设置为 hidden之后, 该元素仍然占用文档流, 只不过是看不见了而已

2、通过style属性中的 visibility : hidden

这种也是最常用的方式之一

  1. visibility : hidden

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

  1. div{
  2.      position: relative;
  3.      left: -100%
  4. }

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

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

  1. .div{
  2.     text-indent: 100%;
  3.     white-space: nowrap;
  4.     overflow: hidden;
  5. }

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

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

  1. .div{
  2.     width: 0px;
  3.     height: 0px;
  4. }

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

6、设置元素透明度为 0

  1. div{
  2.     opacity: 0;
  3. }

这个经常用来做动画变换

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

  1. div{
  2.     transform: rotateX(90deg);
  3. }

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

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

  1. div{
  2.     transform: scale(0);
  3. }

注意点: 同上

9、其它 transform 使其假不可见

  1. translateX()
  2. translateY()
  3. skew()