[现代 JavaScript 教程](https://zh.javascript.info/)


![image.png](https://seek.wiki/static/img/1a38c5553e190618eb825f790c8ab078.image.png)

![image.png](https://seek.wiki/static/img/73bdbedf622c25b9ae46b574c739cb61.image.png)


![image.png](https://seek.wiki/static/img/3cbe5be6c2fbd9beec63c4ee03b6683b.image.png)


![image.png](https://seek.wiki/static/img/3dd57ebcb1319700b8f32b86f767c3bc.image.png)

强推高级web相关电子书

在linux系统下 执行的定时任务或者脚本可能存在大量log日志，导致文件塞满磁盘，导致出现服务跌停的情况



1. 检查分析磁盘占用率
    ```
    df -h
    ```
    > 查看文件系统的磁盘使用情况,包括总容量、已用空间、可用空间和使用百分比。
2. 具体分析文件目录的磁盘占用率
    ```
    du -h --max-depth=1
    ```
    > 执行后可获取当前目录下的子目录详细数据展示
3. 有效识别文件性质
    > 识别查看文件后缀 是否为日志常用标识
4. 删除无效文件
    > rm -rf 文件名
5. 磁盘利用率定时任务的监控添加

关于linux下磁盘检查过程

前端无门槛初学机械臂

此篇文章不考虑css使用兼容的前提记录，自行适配兼容性

## 基础设置

### 行内style变量入参&css变量计算
```html
// 演示为react写法
// widthStyleCss 为变量声明的值
<div style={{"--widthStyle": widthStyleCss}}></div>
```

```css
div {
    width: calc(var(--widthStyleCss) + 40px);
}
```

### 响应式系统深色模式

```css
// 使用css媒体查询可以设置用户系统偏好自动将您网站的主题设置为自定义样式。
@media (prefers-color-scheme: dark) {
  body {
    background-color: #333;
    color: #fff;
  }
}
```

### 响应式屏幕方向

```css
@media (orientation: landscape) {
  body {
    background-color: #333
  }
}
```

### 模糊背景
```css
.blur { filter: blur(20px) }
```

### 毛玻璃质感
```css
// 会导致子级固定定位的基准位置
.container{
  background-color: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
}
```

### 路径剪辑
```css
.circle { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
```

> 这个在线工具可以生成各种形状的剪辑：[Clippy - CSS clip-path maker](https://bennettfeely.com/clippy/)

### 自动平滑滚动
```css
// 锚点或者导航会轻柔的滑动
html { scroll-behavior: smooth }
```

## 文字

### 浏览器缩放
```css
body { font-size: calc(100% * env(browser-zoom-level)); }
```

### 首字母
```css
p::first-letter {
  font-weight: bold;
  color: #333;
}
```

### 选择空内容元素
```css
.element:empty { display: none }
```

### hyphens单词换行连字符
```css
// 当单词太长不得不断词换行时，会自动添加“-”连字符。
div{
  hyphens: auto;
}
```

### 引用符合
```css
// 可在对应的文字段落前后添加引号
q{
  quotes:"“" "”";
}
```


## 事件相关

### 阻止鼠标选择文本
```css
// 阻止用户在页面上选择文本
.no-select { user-select: none }
```

### 禁止鼠标事件触发
```css
// 该css可以使元素忽略鼠标事件，比如点击，hover等等
.no-pointer { pointer-events: none }
```

## 图片相关

### 宽高比
```css
// 宽度和高度保持在指定的比例，非常适合使用在视频和图像元素
.aspect-ratio { aspect-ratio: 16 / 9 }
```

### 图片填充方式
```css
// contain, fill, cover
.cover-img { object-fit: cover }
```

## 表单控件

### input光标颜色
```css
input{
  caret-color:#ff0000;
}
```

### radio选择高亮色
```css
.input-radio{
  accent-color:#ff00bf
}
```

CSS的现代浏览器进阶使用

小程序的视频容器背景色是微信厂商不支持替换的，如果有特殊需求要求背景变更或者动态调整样式需要解决 可以试着使用如下方案，**本文使用的是react和taro相关技术**

[相关微信小程序论坛链接](https://developers.weixin.qq.com/community/develop/doc/000606fd4b03b0482907370595b800?highline=video%E7%9A%84%E8%83%8C%E6%99%AF%E8%89%B2)

![image.png](/static/img/97204a3e2821588fc58ab95a6e12ec79.image.webp)


在视频组件中，在初次渲染组件的时候，获取视频封面图片的宽高尺寸，以及预设定的容器宽高尺寸
> 使用阿里云oss视频的时候 添加?x-oss-process=video/snapshot,t_1,m_fast可以获取首帧图片<br>
> video-warp-currentIndex为预设的容器大小

```js
useEffect(() => {
    Taro.getImageInfo({
      src: videoUrl + '?x-oss-process=video/snapshot,t_1,m_fast',
      success: (res) => {
        const query = Taro.createSelectorQuery()
        query.select('#video-warp').boundingClientRect(data => {
          if (data) {
            applyObjectFitContain(res, data)
          }
        }).exec()
      },
      fail: (err) => {
        console.info('🚀 ~ file:fail -----', '图片宽高获取失败')
      }
    })
}, [])
```

定义方法applyObjectFitContain

```js
// 声明组件内的局部变量
const [videoStyleState, setVideoStyleState] = useState({
    direction: '',
    widthPx: 0,
    heightPx: 0
})
// 方法applyObjectFitContain
function applyObjectFitContain(videoElement, containerElement) {
    // 获取视频和容器的宽高
    const videoWidth = videoElement.width;
    const videoHeight = videoElement.height;
    const containerWidth = containerElement.width;
    const containerHeight = containerElement.height;
    let directionStr = ''

    // 计算屏幕和图片的比例
    const imageRatio = videoWidth / videoHeight;
    // 获取垂直高度
    let heightPx = 0
    let widthPx = 0
    if (imageRatio < 1) {
      directionStr = 'vertical'
      heightPx = (containerWidth / imageRatio).toFixed(2)
      if (heightPx > containerHeight) {
        // 如果得到的高度大于容器高度 则以高度为边计算
        widthPx = (containerHeight / (videoHeight / videoWidth)).toFixed(2)
      }
    } else {
      directionStr = 'horizontal'
      // 获取垂直高度
      heightPx = (containerWidth * (videoHeight / videoWidth)).toFixed(2)
    }
    if (widthPx) {
      console.info('🚀 ~ method:applyObjectFitContain-----', `direction=${directionStr}---widhtPx=${widthPx}`)
    } else {
      console.info('🚀 ~ method:applyObjectFitContain-----', `direction=${directionStr}---heightPx=${heightPx}`)
    }
    setVideoStyleState(() => (
      {
        direction: directionStr,
        widthPx,
        heightPx
      }
    ))
}
```

组件的内联样式
```js
// 外层应该有容器 id = video-warp
<Video
    style={{
      'width': videoStyleState.widthPx ? (videoStyleState.widthPx + 'px') : '100%',
      'height': videoStyleState.heightPx ? (videoStyleState.heightPx + 'px') : '100%'
    }}
    src={videoUrl}
    objectFit="contain"
    controls={false}>
</Video>
```

> 代码经测试可解决video自适应宽高动态设置位置 <br>