### 知識點transform? ? > 允許你修改CSS可視化模型的坐標空間。通過transform，可以讓元素進行移動（translate）、旋轉（rotate）、縮放（scale）、傾斜（skew）。? 舉例如下：? transform: scale(1.4)? 放大1.4倍；字體也會拉伸；vh? > 單位，相對于視口的高度，視口被均分為100單位的vh，? align-items:center> **水平** 居中彈性盒的各項div元素，需配合display:flex 使用；? 另有：? flex-start 對齊到側軸起點? flex-end 對齊到側軸終點? baseline 與基準線對齊? stretch? 拉伸元素以適應? inheritjustify-content:center> **垂直** 居中彈性盒的各項div元素，需配合display:flex 使用；? 另有：? flex-start 從行首起始位置開始排列? flex-end 從行尾位置開始排列? space-between 均勻排列每個元素,首個元素放置于起點，末尾元素放置于終點? space-around 均勻排列每個元素,每個元素周圍分配相同的空間? inherit***transform-origin:100%;? > 設置旋轉的基點，示例中是按右側端點順時針（默認）旋轉? transform:rotate(45deg);? > 旋轉的角度；? transform:translateY(xxx);? > 在上下維度移動；? transition:屬性1 duration, 屬性2 duration ...? > 定義這些動作的時間段 (默認的動作都是瞬時完成)；? 需要配合1. 原始狀態； 2.最終狀態（寫到對應的操作里，如hover）***:root? > 偽類匹配文檔樹的根元素。應用到HTML，:root 即表示為元素，除了優先級更高外，相當于html標簽選擇器。? --xxx? 自定義變量，此變量僅可用于子元素? var(--xxx)? 使用定義的變量document.documentElement> 指向根元素（一般是html）? object.style.setProperty( css名稱 , css值 )? text-transform:uppercase? > 用css轉換為大寫；? lowercase? 轉換為小寫；? capitalize 首字母轉換為大寫；? 2個或多個類名連寫，指同一個元素；? 2個或多個類名用空格隔開，指同后代元素；? box-shadow:inset 0 0 10px rgba();? > 默認(無inset)是外部陰影，有inset是內部陰影；? linear-gradient(to top,色值1 0%, 色值2 100%)> 漸變顏色的設置方法(方向， 色值 位置，色值 位置)；? background-size:cover;> 設置背景圖片大小。flex-wrap:wrap;> 指定單行顯示還是多行顯示（如果超出）。父元素設置flex和wrap/nowrap/wrap-reverse后，指定子元素排列方式nowrap： 不換行;? wrap: 換行;? wrap-reverse: 換行 + 底左部開始排列；font-size:0; 去掉inline-block元素之間的空格> 在外層元素上設置font-size：0；在內層元素上加上font-size：xxx；vertical-align: text-bottom? 設置在圖片上，使圖片與文字底部基線對齊vertical-align: bottom? 設置在圖片上，使圖片與文字底部對齊hr 的設置方式>

text-align: justify;text-align-lastjustify? 實現兩端對齊的方式