ui-faq

Global FAQ Collection

File overview
html-form html-form#faq
tailwind-basic tailwind-basic#faq
page-layout page-layout#faq
flex flex#faq
dom-drag-event dom-drag-event#faq
input input#faq
mobile-basic mobile-basic#faq
transition & animation transition & animation#faq
css-2.1 css-2.1#faq

基本原则

能用一个 div 不用两个 div，能用 css 不用 js

CSS 灵感

css-tricks CSS Tricks (qishaoxuan.github.io)

各种加载效果：SpinKit | Simple CSS Spinners (tobiasahlin.com)

Animista - CSS Animations on Demand

Animate.css | A cross-browser library of CSS animations.

https://github.com/EmilyYoung71415/iCSS/tree/master/4-形状

you-need-to-known-css 常见CSS效果的实现)

css-inspration

Box Modal

元素 Attribute 的宽高

Img

Attribute Width Height

Canvas

Canvas 宽高

宽高由内容决定

display:inline-block：本身高度就是由内容决定的

父级浮动：宽度由子元素撑开，子元素 display 为 inline-level，font-size 设置为 0，不允许换行

posa

width:fit-content

JS 动态设置：子元素宽度固定，父元素等于子元素个数*100%，子元素等于 1/子元素个数*100%

边框、背景、阴影

只在一边或两边显示盒子阴影

如果你要一个盒阴影，试试这个技巧，能为任一边添加阴影。为了实现这个，首先定义一个有具体宽高的盒子，然后正确定位 :after 伪类。实现底边阴影的代码如下

.box-shadow {
    background-color: #FF8020;
    width: 160px;
    height: 90px;
    margin-top: -45px;
    margin-left: -80px;
    position: absolute;
    top: 50%;
    left: 50%;
}
.box-shadow:after {
    content: "";
    width: 150px;
    height: 1px;
    margin-top: 88px;
    margin-left: -75px;
    display: block;
    position: absolute;
    left: 50%;
    z-index: -1;
    -webkit-box-shadow: 0px 0px 8px 2px #000000;
       -moz-box-shadow: 0px 0px 8px 2px #000000;
            box-shadow: 0px 0px 8px 2px #000000;
}

CSS3：全屏背景

html { 
    background: url('images/bg.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

多边框

outline&border

#multiple_border {
  margin-top:20px;
  margin-left:20px;
  width:200px;
  height: 200px;
  border: solid 10px red;
  outline: solid 10px #888;  
}

只能实现双重边框

边框样式灵活，可以实现虚线等样式的边框

描边在盒模型之外，会与外部元素发生重叠

能兼容除 IE6,7 以外的浏览器。

但是需要注意的是，outline 属性设定的边框不会随着内部元素边界样式的变化而变化。也就是说，如果元素边框带了圆角，那么 outline 绘制出的最外层边框仍然是矩形的。这是 outline 绘制边框的一个缺憾。

多 DIV

#multiple_border {
  margin-top:20px;
  margin-left:20px;
  width:200px;
  height: 200px;
  border: solid 10px red;
  outline: solid 10px #888;  
}
#multiple_border>.inner{
  box-sizing: border-box;
  width:200px;
  height: 200px;
  border: solid 10px pink;
}

这也是唯一不存在兼容性问题的方案。

可以实现多重边框，虚线边框等样式

需要额外的 DIV 元素，增加了代码复杂性、

可能无法修改结构或修改 html 结构成本高；多个 div 都设置圆角时，边框之间不能完全贴合。圆角多边框效果图：

伪元素

#multiple_border {
  position:relative;
  margin-top:20px;
  margin-left:20px;
  width:200px;
  height: 200px;
  border: solid 10px red;
  outline: solid 10px #888;  
}
#multiple_border::before{
  content: "";
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  border: solid 10px green;
}
.inner{
  box-sizing: border-box;
  width:200px;
  height: 200px;
  border: solid 10px pink;
}

实现代码略复杂，属于 hack 的实现方式，不推荐。

IE6,7,8 不兼容

用 :after 也可以

同时应用 :before 和 :after 可以实现三重边框

利用 Border-image 属性

利用 CSS3 的 border-image 属性实现多重边框。实现方法简单，但需要制做一个额外的边框图片，兼容性较差。

取决于图片，可以实现任意多个

利用 Box-shadow 属性

利用了阴影（box-shadow）实现边框多少有一些 hack 的味道。

  #multiple_border {
    position:relative;
    margin-top:50px;
    margin-left:50px;
    width:200px;
    height: 200px;
    border: solid 10px red;
    outline: solid 10px #888;  
    box-shadow: 0 0 0 20px #fff, 0 0 0 30px #888;
  }
  #multiple_border::before{
    content: "";
    position: absolute;
    top: -30px;
    left: -30px;
    right: -30px;
    bottom: -30px;
    border: solid 10px green;
  }
  .inner{
    box-sizing: border-box;
    width:200px;
    height: 200px;
    border: solid 10px pink;
  }

可以实现任意多个，圆角也可以契合

box-shadow 也不影响布局的，如果这个元素和其它元素的相对位置关系很重要，需要以外边距等方式来为这些多出来的 “边框” 腾出位置，以防被其它元素覆盖。

注意：使用内嵌投影（即 box-shadow 添加参数为 inset，默认不设置时为外阴影）似乎是更好的选择。因为内嵌投影让投影出现在元素内部，设置内边距在元素的内部给多个边框腾位置，处理起来更容易一些。

注意

方案三的目前代码，不论是伪元素还是额外的 DIV

在 outline 外的边框在放大缩小的过程中会出现 1px 的空隙

Picker-view 镂空 双向渐变

linear-gradient

文本样式

Chrome 支持小于 12px 的文字

p {
  font-size: 10px;
  -webkit-transform: scale(0.8);  // 0.8 是缩放比例
}

浮雕文字

text-shadow:2px 2px 9px black;

文字描边

-webkit-text-stroke:4px pink;

文字内容溢出省略号

https://juejin.cn/post/6966516290957606942

https://juejin.cn/post/6844903589672910855

https://www.jianshu.com/p/50bbd21c0c0f

https://www.zoo.team/article/text-overflow

为什么大多数移动端浏览器都适用？其实 pc 主要的毒瘤就是 ie，移动端没有 ie。火狐也不支持这个

div{
    display: block; 
    /*关键是宽度是否设死，如果宽度由内容撑开则无法显示省略号，如果宽度设死了，inline-block也可以显示省略号*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

多行文本省略号

文本有多行所以 nowrap 就不可用了，因为使用了 nowrap 就只有一行了

多行文本头部省略号

function strLen(str) {  
  var len = 0;  
  for (var i=0; i<str.length; i++) {  
    if (str.charCodeAt(i)>127 || str.charCodeAt(i)==94) {  
       len += 2;  
     } else {  
       len ++;  
     }  
   }  
  return len;  
}


function strlen(str){
    var len = 0;
    for (var i=0; i<str.length; i++) { 
        var c = str.charCodeAt(i); 
        if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) { 
           len++; 
        } else { 
           len+=2; 
        } 
    } 
    return len;
}


function strLen(str){
    var l = str.length; 
    var blen = 0; 
    for(i=0; i<l; i++) { 
        if ((str.charCodeAt(i) & 0xff00) != 0) { 
            blen ++; 
        } 
        blen ++; 
    }
}


function strLen(str) {
  if (str == null) return 0;
  if (typeof str != "string"){
    str += "";
  }
  return str.replace(/[^\x00-\xff]/g,"01").length;
}

等宽字体

等宽字体：https://www.zhangxinxu.com/wordpress/2016/07/monospaced-font-css3-ch-unit/

文字渲染：https://eyhn.github.io/text-rendering-talk/1

排版空白符问题

dbg_naview

<view
      s-if="col.bubble_title"
      class="c-channel-entry-new-tip">
    <view class="c-channel-entry-new-tip-wrap">
        <view class="c-channel-entry-new-tip-border">
            <text class="c-channel-entry-new-tip-text">
                {{col.bubble_title}}
            </text>
        </view>
        <image src="../../assets/img/icon/radius.png" class="c-channel-entry-new-tip-anchor"/>
    </view>
</view>

文字渐变 和 文字渐变动画

如何用 CSS 实现文字渐变色动画 - 链滴 (ld246.com)

定位

绝对定位模拟固定定位

固定定位参考的是 视窗

绝对定位和固定定位，在没有出现滚动条的时候是一模一样的

拖动系统滚动条的时候，初始包含块是不会跟着动的（绝对定位的元素一直跟着初始包含块，就会消失在视窗），如果让初始包含块一直跟着视窗，不受滚动条的影响，绝对定位就是固定定位了

因为滚动条都是 body 或者 html 的滚动条传递过去的，先禁用了 html 的滚动条，那么 html 和初始包含块就都不会出现滚动条，body 在给自己一个滚动条，那么拖动滚动条只会拖动 body 内部的元素，初始包含块的位置始终跟着视窗没有变化

动画

Css 动画 Vs Js 动画 性能

https://developer.mozilla.org/zh-CN/docs/Web/Performance/CSS_JavaScript_animation_performance

关键是只要动画涉及的属性不引起 reflow（重新布局）（参考 CSS triggers 获得更多信息），我们可以把采用操作移出主线程。最常见的属性是 CSS transform。如果一个元素被提升为一个 layer，transform 属性动画就可以在 GPU 中进行。这意味着更好地性能，特别实在移动设备上。在 OffMainThreadCompositing 上寻找更多细节。

浏览器可以优化渲染流程。总之，我们总是可以尽可能通过 CSS 过渡/动画创建动画。如果你的动画真的很复杂，你可能不得不依赖于 JavaScript 动画。

动画过渡

背景渐变动画

CSS 中最具诱惑的一个功能是能添加动画效果，除了渐变，你可以给背景色、透明度、元素大小添加动画。目前，你不能为渐变添加动画，但下面的代码可能有帮助。它通过改变背景位置，让它看起来有动画效果。

button {
    background-image: linear-gradient(#5187c4, #1c2f45);
    background-size: auto 200%;
    background-position: 0 100%;
    transition: background-position 0.5s;
}    
button:hover {
    background-position: 0 0;
}

用 CSS 动画实现省略号动画

这个片段将帮助你制造一个 ellipsis 的动画，对于简单的加载状态是很有用的，而不用去使用 gif 图像。

.loading:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    animation: ellipsis 2s infinite;
    content: "\2026"; /* ascii code for the ellipsis character */
}
@keyframes ellipsis {
    from {
        width: 2px;
    }
    to {
        width: 15px;
    }
}

曲线运动

勾股定理

三角函数

正弦 : sin

余弦 : cos

正切 : tan

余切 : cot

正弦定理

余弦定理

什么是弧度

一个角度到底代表多少弧度：这个角度所包含的外接圆的弧长/外接圆的半径

单位换算

三角函数图像

曲线运动

完成曲线运动

与 canvas 结合

人眼能接收的最好频率为一秒钟 60 次,这样的体验是比较好的

// x轴对应的弧度
testNode.style.left = startX + (deg*Math.PI/180)*step/10 +'px';
// y轴弧度对相应的值
testNode.style.top = startY + Math.cos( deg*Math.PI/180 )*step*2+"px";

Demo 阳光下的泡沫

Afx 视频 / Lottie 动画

SVG 动画

Canvas 帧动画

图片串成视频

功能效果

拖拽

橡皮筋效果

快速滑屏

斜杠型滑屏

任意滑屏

视觉效果设计

视觉效果

全屏滚动的原理是什么 ？用到了 CSS 的哪些属性 ？

原理

视差滚动效果

视差滚动（Parallax Scrolling）通过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢 来创建出令人惊叹的 3D 效果。

滚动到底部

组件

按钮常用样式

.btn{
  display: inline-block;
  width:110px;
  padding:10px 0;
  font-size:14px;
  line-height:normal;
  text-align:center;
  cursor: pointer;
  user-select:none;
}

部件、挂件

常见形状

利用边框画三角形

https://www.cnblogs.com/v-weiwang/p/5057588.html>

1548677281175|500

#box1{
  width: 100px;
  height: 100px;
  border-style: solid;
  border-width: 100px 100px 100px 100px;
  border-color: red forestgreen blue cyan;
}

边框在相交的部分的处理，平常只注意到了红色正方形内部的部分

注意到了边框的细节之后，只要把宽高都变成 0

1548677320784 1548677323159

#box1{
  width: 0; //宽度默认值为auto，所以必须定死为0
  height: 0;
  border-style: solid;
  border-width: 100px 100px 100px 100px;
  border-color: red forestgreen blue cyan;
}

去掉某一边的颜色，就可以得到一个三角形

1548677374984 1548677377869

#box1{
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100px 100px 100px 100px;
  border-color: transparent transparent blue transparent;
}

进一步完善，只维持必要的高度

1548677420813 1548677444590

border-width: 0 100px 100px 100px;

border-width: 0 0 100px 100px;

兼容 ie6：border-style: dashed; 虚线的时候 边框的相交处选择不显示

#wrap .sjx {
  width: 0px;
  height: 0px;
  overflow: hidden;
  border-width: 40px;
  border-style: dashed  dashed dashed solid;
  border-color: transparent transparent transparent #ffff00;
}

浮标小三角

&:before{
  position: absolute;
  left:-15px;
  top:5px;
  content:'';
  border:4px solid #8996a6;
  border-width:5px 8px;
  border-color:transparent #8996a6 transparent transarent
}

扇形

Button

一般不使用 button 元素，因为默认样式的表现比较奇怪，需要进行许多初始化操作

非表单按钮使用 a 标签

层级联动

通过 options 对象的 children 属性确定层级

import React,{useState}from 'react';

const MenuList = (props) => {
  const {selected,setSelected,listIndex} = props
  // 这一次要渲染的MenuList
  const options = selected[listIndex]
  
  const handleSelect = (ev) => {
    const index = ev.currentTarget.dataset.index

    if(options[index].children===undefined){
      // 已经是最后一级了，将value渲染到input中

    }else{
      // 展开下一级，options[index].children 就是下一个要渲染的MenuList
      // 确认listIndex，提取出前面的
      setSelected([...selected.slice(0,listIndex+1),options[index].children])
    }
  }
  // 渲染对应index
  return (
    <ul className='design_cascader_menu_list'>
      {options.map((option,index) => {
        let arrowRight = null
        if(option.children) arrowRight =  <i className='iconfont icon-arrow_right'></i>
        return (
          <li 
            key={option.value} 
            onClick={handleSelect}
            data-index={index}
            >
            <span>{option.value}</span>
            {arrowRight}
          </li>
        )
      })}
    </ul>
  )
}

const Menu = (props) => {
  const {options} = props
  const [selected,setSelected] = useState([options])
  console.log(selected);
  /**
   * [
   *  [{value,children},{value,children}]
   *  [{value,children},{value,children}]
   *  [{value},{value}]
   * ]
   * 
   */
  // 行内盒，通过定位在input底下，多个ul行内排列
  // 全局只有一个Menu
  return (
    <div className='design_cascader_menu_container slide-down-enter'>
      {selected.map((option,index) => {
        // 上一个options[index].children
        return (
          <MenuList
            selected={selected} 
            setSelected={setSelected}
            listIndex={index}
            key={index}
          />
        )
      })}
    </div>
  );
};

export default Menu;

Tooltip

在目标上 hover 的时候，显示 tooltip，事件 onmouseover

使用 getBoundingClientRect 获取目标位置，绝对定位，在目标位置出现

动画

https://www.jianshu.com/p/561e6e930e0d

如果是在 tranform 元素的内部 fixed 定位会受到影响，所以需要通过 protol 插入到 body

拖拽类型组件：进度条拖拽、moveable-view

基本思路

  1. inner.onmousedown 记录 inner 的初始位置
    1. container.onmousemove 计算鼠标移动的距离，然后把距离插值赋值给 inner。
      1. 移动的记录需要做边界判断
        1. 进度条、音量控制等场景都是从左到右，从上到下，且默认情况下 inner 和 container 都是左对齐、下对齐的可以直接使用 offsetWidth 相减，得出最大移动距离
        2. 真正的区间应该通过 getBoundingRect 获取 x y 轴坐标之后相减得出
      2. 只有 inner.onmousedown 触发过了才能触发 container.onmousemove，flag 为 true
    2. document.onmouseup 更改触发标识，flag 为 false，保证无论鼠标在何处都能取消相关逻辑

选择器

hover 状态下弹出候选，要保证候选的 ul 结构在 a 的下面，否则无法在 hover 状态下控制 ul

<a className='language_btn'>
<span>JavaScript</span>
&nbsp;&nbsp;<i className='iconfont icon-arrow_down'></i>
<ul className='candidate_list'>
<li>C++</li>
<li>Java</li>
<li>JavaScript</li>
<li>Python</li>
</ul>
</a>

.language_btn{
  display: inline-block;
  position: relative;
  padding: 0 10px;
  line-height:40px;
  background-color: #516169;
  color: white;
  .candidate_list{
    display: none;
    position: absolute;
    left:0px;
    z-index: 4;
    width: 120px;
    padding:0 10px;
    background-color: #516169;
  }
  &:hover{
    background-color: #46535a;
    .candidate_list{
      display: block;
    }
  }

或者用 JS 实现，这样的话 ul 的结构可以在任意地方

useRanger 源码记录

疑问

为什么会有 tempvalues 和 values 两个

tempValues 感觉没啥用嗄

基本思路

通过百分比移动 handle ，而不是像素的绝对值？

通过 values 数组的长度，控制 handle 的数量

除了拖拽，还支持通过箭头控制、键盘箭头控制

明确元素

track：位移轨道

handle：手柄、把柄、把手，仅能在轨道中做位移

游戏手柄一般叫 controller、gamepad

value：因为是 ranger，通过 min 和 max 设置了范围之后，value 值

导航栏

横向导航

日期选择器

设计理念：http://www.woshipm.com/pd/2370479.html

具体实现：https://zhuanlan.zhihu.com/p/57043693 https://juejin.im/post/5d71be89e51d4561fc620aba

基本原理

获取每个月第一天和最后一天，根据星期几推算出上一个月和下一个月有多少天需要预览

最后生成 7*7 的数组，用于展示即可

追加需求：

接受一个日期数组，实现红点，点亮

要怎么实现好呢？感觉还是生成的时候通过属性标识比较好，等生成后再通过 DOM 去添加类名，不太合适

范围选择

需要两个日期选择器，一个选择开头，一个选择结尾即可

通过标识区分两种选择器，开头选择器后面的日期染色

结尾选择器，前面的日期染色

轮播图

基础

方案一

方案二

方案三

原理

实现

滑屏逻辑

超出控制

index 的抽象

自动轮播

无缝划屏基本布局

无缝划屏功能逻辑

2d

瀑布流

参考：http://www.woshipm.com/pd/1379.html

概念

方案一：绝对定位

方案二：多列浮动

方案二变种：flex

方案三：多栏布局

方案三变种：grid

对比

方案一：绝对定位

方案二：多列浮动

方案三：多栏布局

优化

选项卡

计算器

用户体验

常见措施

未分类

纯 CSS 实现滚动条

https://juejin.im/post/5c35953ce51d45523f04b6d2

视口滚动条属于哪

chrome 滚动条是加给 document 的（初始包含块），html height 100% ,大小是视窗大小

继承是一层层继承下来的，不可以隔代继承

body 的滚动条可以通过 html 传递给 document，如果 body 是 overflow:scroll 或者 overflow:auto,且 html 没有自己的滚动条（即不是 overflow:scroll 或者 overflow:auto），那么 body 的滚动条就会传递给 document

如果 html 和 body 都写了 overflow:scroll 或者 overflow:auto，html 的 scroll 永远给到文档，而 body 自己也会有一个滚动条

html, body {
  height: 100%;
  overflow: hidden;
 }

html 开启 hidden 就可以禁止默认滚动条，因为默认滚动条都是 body 可能是 body 传递过去的，此时中断了传递

会出现滚动条是因为溢出了容器，所以容器肯定是小于超高的元素的，当我们滑动滚动条的时候容器是没有动的，只是滚动条加在了容器身上

一般会给一个全局的 wrap，让滚动条出现在 wrap 身上，无论怎么滑动都不会影响初始包含块，可以用来模拟固定定位（相对于有滚动条的 wrap 绝对定位，就是固定定位的效果了）

移动端的固定定位一般都是用绝对定位来模拟的

滚动条不占位置 / 不影响布局

有时候滚动条是 hover 的时候才出现的. 或者是随着内容变多然后出现的. 想要这个时候的滚动条不占位置, 这样就不会因为滚动条的宽度影响布局

Overflow: Overlay

已废弃

Scrollbar-width: Auto

较新的一个属性, 相当于滚动条一直在占位.

还有个类似的 stable 的属性. 反正没啥用

提前声明好宽度, 预留滚动条的位置

内容去实际占用的宽度先预留好就行

如何实现暗黑模式?

如何实现暗黑模式;;

实现暗黑模式（Dark Mode）可以让您的网站或应用在夜间或低光环境下提供更舒适的用户体验。下面是一些常见的方法来实现暗黑模式：

  1. CSS 变量和媒体查询： 使用 CSS 变量（Custom Properties）结合媒体查询可以实现简单的暗黑模式。您可以定义暗色和亮色主题的颜色变量，然后在媒体查询中根据用户的偏好（如系统的暗色模式设置）切换主题。prefers-color-scheme 是一个 CSS 媒体查询，用于检测用户操作系统或设备的主题偏好设置，以便在网页中应用相应的颜色方案。主题偏好设置通常包括明亮（light）和暗黑（dark）两种选项。 当用户在操作系统或设备中更改主题偏好设置时，浏览器会自动应用相应的样式。示例代码如下：

:root {

--background-color: white;

--text-color: black;

}

@media (prefers-color-scheme: dark) {

:root {

--background-color: black;

--text-color: white;

}

}

body {

background-color: var(--background-color);

color: var(--text-color);

}


```js
// 获取包含CSS变量的元素，例如一个具有变量的元素的根元素
const root = document.documentElement;

// 修改CSS变量的值
root.style.setProperty('--main-color', '#ff5733');
  1. JavaScript 和状态管理： 使用 JavaScript 和状态管理库（如 React 的 Context 或 Redux）可以更灵活地切换暗黑模式。您可以在用户点击切换按钮或根据系统设置时触发状态更新。这种方法可以让您在应用中灵活地控制不同主题的样式和状态。
  2. CSS 框架和库： 许多 CSS 框架和库（如 Tailwind CSS 和 Bootstrap）已经提供了内置的暗黑模式支持。您可以根据文档中的指导来设置和切换不同的主题。
  3. LocalStorage 或 Cookie：您可以使用浏览器的 localStorage 或 cookie 来存储用户的主题偏好设置。在页面加载时，根据存储的偏好加载相应的主题样式。
  4. 第三方工具和插件： 一些第三方工具和插件可以帮助您更轻松地实现暗黑模式。例如，许多前端框架和 UI 库都提供了暗黑模式的支持，您可以根据它们的文档进行设置。
  5. CSS-in-JS 库： 如果您使用 CSS-in-JS 库（如 Emotion、Styled Components 等），您可以根据不同的主题切换样式的定义。

不管您选择哪种方法，实现暗黑模式的关键在于根据用户的偏好或设置切换不同的样式，以提供更好的用户体验。请确保您的实现方式在不同的浏览器和设备上都能正常工作，并充分测试各种情况。

隐藏页面中的某个元素

隐藏类型

屏幕并不是唯一的输出机制，比如说屏幕上看不见的元素（隐藏的元素），其中一些依然能够被读屏软件阅读出来（因为读屏软件依赖于可访问性树来阐述）。为了消除它们之间的歧义，我们将其归为三大类：

完全隐藏

display 属性 (不占据空间)

display: none;

hidden 属性 (不占据空间)

<div hidden></div>

视觉上的隐藏

利用 position 和 盒模型 将元素移出可视区范围

设置 posoition 为 absolute 或 fixed，通过设置 top、left 等值，将其移出可视区域。(可视区域不占位)

设置 position 为 relative，通过设置 top、left 等值，将其移出可视区域。（可视区域占位）

设置 margin 值，将其移出可视区域范围（可视区域占位）。

如果希望其在可视区域不占位，需同时设置 height: 0;

Z-index

层级覆盖，z-index 属性 (占据空间)

position: relative;
z-index: -999;

再设置一个层级较高的元素覆盖在此元素上。

利用 Transfrom

缩放 (占据空间)

transform: scale(0);

移动 translateX, translateY(占据空间)

旋转 rotate (占据空间)

transform: rotateY(90deg);

设置其大小为 0

height: 0;

width: 0;

overflow: hidden;


### 透明度

设置透明度 opacity 为 0 (占据空间)

visibility 属性 (占据空间)


clip-path 裁剪 (占据空间)

```css
clip-path: polygon(0 0, 0 0, 0 0, 0 0);

语义上的隐藏

aria-hidden 属性 (占据空间)

读屏软件不可读，占据空间，可见。

<div aria-hidden="true">
</div>