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;