总结几个前端开发过程中超容易遗忘的小问题

1.ipone手机底部tab 的问题

page{
    padding-bottom: calc(16px + constant(safe-area-inset-bottom));
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
/* not 表示不支持括号内的属性 */
@supports not(constant(safe-area-inset-bottom)){
  page{
    padding-bottom: 15px;
  }
}

2.css选择器 除第一个元素之外的clss名为aaaa的元素

    .aaaa:not(:first-child) {
        margin-top: 16px;
      }

3.填写渐变色的公式

linear-gradient
(180deg, #00A25C 53%, #4093ff00 92%);

/* 从上到下，蓝色渐变到红色 */
linear-gradient(blue, red);
 
/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
 
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
 
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

4.css变量 var函数

语法var(custom-property-name, value)值描述
custom-property-name必需。自定义属性的名称，必需以 --  开头。
value可选。备用值，在属性不存在的时候使用。

html>:root {
--main-bg-color: coral;
--main-txt-color: blue;
--main-padding: 15px;
}
 .a{
   color: var(--main-bg-color);
 } 

5.css伪类元素

::before 伪元素
    可用于在元素内容之前插入一些内容。

例： 在每个 <h1> 元素的内容之前插入一幅图像：
h1::before {content: url(smiley.gif);}

6.多行文本溢出显示省略号

 overflow: hidden;     
 display: -webkit-box;  //作为弹性伸缩盒子模型显示    
 -webkit-box-orient: vertical;               
     //设置或检索伸缩盒对象的子元素的排列方式    -
 webkit-line-clamp: 4;   // 设置显示行数界限    
 word-wrap : break-word;  //兼容单词 url在文本内换行

单行文本溢出显示省略号

width：value；（px、%，都可以）  
white-space：nowrap; //强制文本在一行内显示  
overflow：hidden；//溢出内容为隐藏  
text-overflow：ellipsis; //溢出文本显示省略号

7.中英文自动换行问题

设置英文字符：
word-break:break-all;   以字母换行
word-wrap:break-word;   以单词换行

设置中文：
white-space:pre-wrap;     中文强制换行

通用：
white-space:nowrap;  强制不换行，一行展示

8.时间函数问题

 moment(text).format('yyyy-MM-DD HH:mm:ss')   
 		 上面这种写法在text为毫秒时间戳时，无法精确转换 时分秒    应该改为
 moment(text).format('YYYY-MM-DD HH:mm:ss')

9.react项目中监听滚动条的写法

import { useCallback, useEffect, useRef } from "react";
import { Button, Popover } from "antd";
import "./index.css";
import { smoothScroll } from "../utils/smoothScroll";

export default () => {
  const contentRef = useRef(null);

  const handleScroll = () => {the 
    console.log("111111111");
    const btnBox = document.querySelector(".ant-popover-open");
    if (btnBox) {
      btnBox?.click();
    }
  };
  const handleBoxRef = useCallback((node) => {
    if (node) {
      contentRef.current = node;
      contentRef?.current.addEventListener("scroll", handleScroll, false);
    }
  }, []);
  useEffect(() => {
    return () => {
      //卸载监听器
      if (contentRef?.current) {
        contentRef?.current.removeEventListener("scroll", handleScroll, false);
      }
    };
  }, []);

  const content = (
    <div>
      <p>Content</p>
      <p>Content</p>
    </div>
  );
  return (
    <>
      <div className="box" ref={handleBoxRef}>
        <div className="content_box">
          <div>21312321331231321</div>
          <div>21312321331231321</div>
          <div>21312321331231321</div>
          <div>21312321331231321</div>
          <div>21312321331231321</div>
          <div>21312321331231321</div>
          <div>21312321331231321</div>
          <div>21312321331231321</div>
          <Popover content={content} title="Title" trigger="click">
            <div id="scrollToBox" style={{color:'red'}}>21312321331231321</div>
            {/* <Button type="primary">Hover me</Button> */}
          </Popover>
        </div>
      </div>

      <Button
        onClick={() => {
          setTimeout(()=>{
            smoothScroll('#scrollToBox');
            setTimeout(()=>{
              const scrollToBox = document.querySelector('#scrollToBox');
              scrollToBox?.click();
            },1000)
          },500)
        }}
      >
        点击自动滚动
      </Button>
    </>
  );
};


.box{
    width: 200px;
    height: 200px;
    border: 1px solid red;
    overflow: auto;
}
.content_box{
    height: 1000px;
    width: 200px;
    border: 1px solid;
}