css注意点：定义一个元素css 样式的时候，尽量只定义元素的内部样式，不要定义外部样式（如：margin等，这些可以

css 方法与指令

函数

calc(100% - 20px)

grid-template-columns: repeat(2, minmax(100px, 410px));

background: linear-gradient(90deg, #8f006f 0%, #3a005e 100%);

[el-container](https://github.com/ElemeFE/element/blob/dev/packages/theme-chalk/src/container.scss#L6-L9)
flex & min-width
<div style="width: 100%; display: flex;">
  <div style="flex: 1; flex-basis: auto; min-width: 0;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
  <div style="">bbb</div>
</div>

指令

@media not|only mediatype and (expressions) {...}
## 媒体类型(mediatype)
1.print 打印机\
2.screen 电脑屏幕，平板，智能手机等。\
3.speech语音合成器等发声设备\
4.all 用于所有多媒体类型设备（默认）

tailwind 方法与指令

函数

calc(100vh - theme('spacing.12'))

指令

@tailwind
@apply
@layer
@variants
@responsive
@screen sm { /* ... */ }

注意点：定义一个元素css 样式的时候，尽量只定义元素的内部样式，不要定义外部样式（如：margin等，这些可以由父级元素控制）,eg:

<style>
    .child {
        color: red;
    }
    .parent p {
        margin-bottom: 10px;
    }
</style>

<div class="parent">
    <p class="child">
        line 1
    </p>
    <p class="child">
        line 2
    </p>
</div>

网页变色

在特殊时间网站站变成了灰色。通过F12能看出是gray这个class导致的，其实本质是给html添加了 filter: grayscale(1) 这个样式。

aspect-ratio

用处：可以用来设置媒体标签(图片、视频等元素)的纵横比

.image-container {
    width: 500px;
    height: 500px;
    resize: both;
    overflow: auto;
    /* aspect-ratio: 16 / 9; */
    border: 4px solid hsl(140deg, 100%, 70%);
}
.image-container > img {
  max-width: 100%;
  max-width: 100%;
  // 不加以下的话，就是图片原始的纵横比
  aspect-ratio: 1 / 1;
}

pointer-events

用处：比如（给遮罩层的元素加上pointer-events事件）可以让点击事件不要相应遮罩层的事件，而是响应被遮的元素事件(ref)

CSS 模块化导入

CSS 模块化导入，Chrome 93 已支持(ref)

css