开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第8天，点击查看活动详情
--size: min(60vmin, 400px);
width: var(--size);
height: var(--size);
vmin : view min | vmin / vmax 可视范围的宽度或高度中较小/较大；60vmin相当于html屏幕的60%
css的比较函数min(),max()
min() - 如果60vmin > 400px，则取400px；否则取60vmin \
扩展：
绝对单位
- px: Pixel 像素
- pt: Points 磅
- pc: Picas 派卡
- in: Inches 英寸
- mm: Millimeter 毫米
- cm: Centimeter 厘米
- q: Quarter millimeters 1/4毫米
相对单位
- %: 百分比
- em: Element meter 根据文档字体计算尺寸
- rem: Root element meter 根据根文档（ body/html ）字体计算尺寸
- ex: 文档字符“x”的高度
- ch: 文档数字“0”的的宽度
- vh: View height 可视范围高度
- vw: View width 可视范围宽度
- vmin: View min 可视范围的宽度或高度中较小的那个尺寸
- vmax: View max 可视范围的宽度或高度中较大的那个尺寸
css变量以及使用
- 创建⼀个变量，必须两个中划线开始 --
- 通过var函数使⽤变量
css函数 函数 描述 CSS 版本
- attr() 返回选择元素的属性值。 2
- calc() 允许计算 CSS 的属性值，⽐如动态计算⻓度值。 3
- cubic-bezier() 定义了⼀个⻉塞尔曲线(Cubic Bezier)。 3
- hsl() 使⽤⾊相、饱和度、亮度来定义颜⾊。 3
- hsla() 使⽤⾊相、饱和度、亮度、透明度来定义颜⾊。 3
- linear-gradient() 创建⼀个线性渐变的图像 3
- radial-gradient() ⽤径向渐变创建图像。 3
- repeating-lineargradient() ⽤重复的线性渐变创建图像。 3
- repeating-radialgradient() 类似 radial-gradient()，⽤重复的径向渐变创建图像。 3
- rgb() 使⽤红(R)、绿(G)、蓝(B)三个颜⾊的叠加来⽣成各式各
- 样的颜⾊。 2
- rgba() 使⽤红(R)、绿(G)、蓝(B)、透明度(A)的叠加来⽣成各式
- 各 样的颜⾊。 3
- var() ⽤于插⼊⾃定义的属性值。 3
| 函数 | 描述 | css版本 |
|---|---|---|
| attr() | 返回选择元素的属性值 | 2 |
| calc() | 不同单位之间的运算 | 3 |
| min() | 返回最小值 | 2 |
| max() | 返回最大值 | 2 |
| hsl() | 使⽤⾊相、饱和度、亮度来定义颜⾊ | 3 |
| hsla() | 使⽤⾊相、饱和度、亮度、透明度来定义颜⾊ | 3 |
| rgb() | 使⽤红(R)、绿(G)、蓝(B)三个颜⾊的叠加来⽣成一个颜色 | 2 |
| rgba() | 使⽤红(R)、绿(G)、蓝(B)、透明度(A)叠加来⽣成一个颜色 | 3 |
| var() | 插⼊⾃定义的属性值 | 3 |
| linear-gradient() | 创建⼀个线性渐变的图像 | 3 |
| radial-gradient() | ⽤径向渐变创建图像 | 3 |
grid
display: grid;
grid-template-rows: 50% 50%; /*网格布局行宽为50%，50%*/
grid-template-columns: 1fr 1fr; /*网格布局列宽为1fr,1fr*/
grid-column: 1;
grid-row: 1;
justify-self: end; /*设置单元格内容的水平位置（左中右）,end:对齐单元格结束边缘*/
column：列
row：行
/* 情况一：从第1列到第4列 */
grid-column: 1 / 4;
/*
相当于：
grid-column-start: 1;
grid-column-end: 4;
*/
/* 情况二:在第 2 列开始，横跨2列 */
grid-column: 2 / span 2;
grid-column-gap: 1em; /网格的列间距宽为1em/
grid-row-gap: 1em; /网格的行间距宽为1em/
注意：更多属性请看文档或别的笔记！！
