Vue小程序项目知识积累（三）

1.CSS中的var( )

var() 函数用于插入自定义属性（也称为CSS变量）的值。

var(--main-bg-color,20rpx)

设置一个CSS变量的值，但是如果 --main-bg-color 变量不存在，它将默认返回 20rpx。

CSS变量必须在一个有效的CSS规则（如选择器）内定义，否则它们不会被识别。如果你在 :root 伪类中定义了 --main-bg-color，那么你可以在任何后代元素中使用 var() 函数来引用它。

:root {--main-bg-color: #fff; /* 定义一个名为 --main-bg-color 的CSS变量，值为 #fff */
}.element {background-color: var(--main-bg-color); /* 使用 var() 函数来引用 CSS 变量 */
}

我们首先在 :root 伪类中定义了 --main-bg-color 变量，然后在一个名为 .element 的类中使用 var() 函数来设置背景颜色。

如果你在JavaScript中动态设置CSS变量，你可以这样做：

document.documentElement.style.setProperty('--main-bg-color', '#fff');

这个方法将动态设置 --main-bg-color 变量的值。请确保在执行这个操作的时候，DOM已经完全加载，否则可能不会生效。

2.display:flex

  justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。/* 对齐方式 */justify-content: center;     /* 居中排列 */justify-content: start;      /* 从行首开始排列 */justify-content: end;        /* 从行尾开始排列 */justify-content: flex-start; /* 从行首起始位置开始排列 */justify-content: flex-end;   /* 从行尾位置开始排列 */justify-content: left;       /* 一个挨一个在对齐容器得左边缘 */justify-content: right;      /* 元素以容器右边缘为基准，一个挨着一个对齐, *//* 基线对齐 */justify-content: baseline;justify-content: first baseline;justify-content: last baseline;/* 分配弹性元素方式 */justify-content: space-between;  /* 均匀排列每个元素首个元素放置于起点，末尾元素放置于终点 */justify-content: space-around;  /* 均匀排列每个元素每个元素周围分配相同的空间 */justify-content: space-evenly;  /* 均匀排列每个元素每个元素之间的间隔相等 */justify-content: stretch;       /* 均匀排列每个元素'auto'-sized 的元素会被拉伸以适应容器的大小 *//* 溢出对齐方式 */justify-content: safe center;justify-content: unsafe center;/* 全局值 */justify-content: inherit;justify-content: initial;justify-content: unset;

flex-direction 属性规定灵活项目的方向。row：默认值。灵活的项目将水平显示，正如一个行一样。
row-reverse：	与 row 相同，但是以相反的顺序。
column：	灵活的项目将垂直显示，正如一个列一样。
column-reverse：	与 column 相同，但是以相反的顺序。
initial；	设置该属性为它的默认值。请参阅 initial。
inherit：	从父元素继承该属性。请参阅 inherit。

align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。stretch：默认值。元素被拉伸以适应容器。	如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
center	：元素位于容器的中心。 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
flex-start	：元素位于容器的开头。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end	：元素位于容器的结尾。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
baseline	：元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
initial  ：设置该属性为它的默认值。请参阅 initial。
inherit	：从父元素继承该属性。请参阅 inherit。

3.linear-gradient() 

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。

/* 从上到下，蓝色渐变到红色 */
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);/* 从左侧开始的线性渐变，从红色开始，转为黄色 */
linear-gradient(to right, red , yellow);/* 从左上角到右下角的线性渐变 */
linear-gradient(to bottom right, red , yellow);/* 90度线性渐变，顺时针的90度 */
linear-gradient(90deg, red, yellow);/* -90度线性渐变，顺时针的90度 */
linear-gradient(-90deg, red, yellow);/* 多个终止色的线性渐变 */
linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);/* 使用了透明度的线性渐变 */
linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));/* 从下到上的线性渐变 */
linear-gradient(180deg, #0066cc 0%, #0066cc 50%, #f8f8f8 50%, #f8f8f8 100% );

4.flex-shrink: 1

按照给的比例进行划分份数。

flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。

A、B、C 显式定义了 flex-shrink 为 1，D、E 定义了 flex-shrink 为 2，所以计算出来总共将剩余空间分成了 7 份，其中 A、B、C 占 1 份，D、E 占 2 份，即1:1:1:2:2

.box { flex-shrink: 1;
}.box1 { flex-shrink: 2; 
}<div class="box" style="background-color:red;">A</div>
<div class="box" style="background-color:lightblue;">B</div>
<div class="box" style="background-color:yellow;">C</div>
<div class="box1" style="background-color:brown;">D</div>
<div class="box1" style="background-color:lightgreen;">E</div>

5.vertical-align

vertical-align 属性设置一个元素的垂直对齐方式。

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	使元素及其后代元素的底部与整行的底部对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length	将元素升高或降低指定的高度，可以是负数。
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

 vertical-align:middle;

6.CSS position

position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成固定定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
sticky	粘性定位，该定位基于用户滚动的位置。 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。 注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。
inherit	规定应该从父元素继承 position 属性的值。
initial	设置该属性为默认值，详情查看 CSS initial 关键字。

    position:absolute;left:100px;top:150px;