動畫屬性是css3新特性新增後的作用
中心點
移動 translate
和定位相似都可以改變元素的位置
和定位的區別
關於移動對居中的改進：
position
: absolute;
left
: 50%;
top: 50%;
/* 盒子的寬度有可能，上面的margin 一直計算 */
/* margin-top: -90px;
margin-left: -190px; */
/* 2d轉化：自身寬高 ，不用關心盒子本身寬高*/
transform
:translate
(-50%, -50%)
;
img:hover
//自定義軸
img:hover
注意點： 迴圈是關於原有基礎上進行的新增效果 所以需要加上原先的旋轉度數！！！
旋轉關於中心點旋轉 並且旋轉會影響移動的效果（旋轉是帶軸一起旋轉的 所以旋轉後的元素的軸的方向也改了
旋轉案例（下拉三角）
核心思想： 用邊框模擬三角形 旋轉三角形達到需要的樣式 用偽元素承載三角形（優化** html 中的**越少 瀏覽器載入（渲染）越快）
**：
/* 父級盒子 */
.box
/* 偽元素：一般情況，小圖示的引用，或者自己實現小圖示 */
.box::before
/* .box::before:hover 偽元素後面不能跟著偽類 */
/*
.box::before:hover */
/* 正確的寫法 */
.box:hover::before
/* 寬，高 縮放一倍，厚度放大兩倍 */
transform
:scale3d
(1,1,2)
/* 寬 縮放 */
transform
:scalex
(1);
/* 高 縮放 */
transform
:scaley
(1);
/* 厚度 縮放？沒有厚度 */
transform
:scalez
(1);
視距* perspactive
/* 父元素 */
body
/* 目標 */
div
字首-了解
動畫比過渡表現的更加豐富
語法： 定義： @keyframes 呼叫 ：呼叫動畫名即可
/* 1. 定義:*/ 幀
@keyframes dong_hua
/* 結束狀態 */to}
div
@keyframes name
/* 結束狀態 */to}
@keyframes name
50%75%
83%/* 結束狀態 */
100%
}
animation-delay：動畫推遲多久執行；動畫得等待。
animation-direction：迴圈方向：若0% 紅色; 100% 黑色
animation-fill-mode：動畫等待或者結束的狀態； 區別
動畫簡寫
div
/* 1: 動畫名稱 2：動畫整體執行時間 3：運動曲線 4：動畫延遲 5：迴圈次數 6：迴圈方向 7：控制動畫結束和開始的元素停留樣式 */
移動端布局
viewport(視口)
螢幕尺寸：對角線的長度，絕對單位，長度不會變化；
物理畫素點：客觀的發光點，乙個物理畫素點發乙個光的顏色。乙個坑放入乙個蘿蔔；
關於二倍圖的使用
二倍精靈圖的使用：
聖杯布局
1：靠父級的padding
2.靠自己的margin （寬度吧設定 預設等於父級寬度 magin不影響）
3.flex布局的 flex: 1；
流式布局的特點：
flex布局：
所以說： **如果是pc端頁面布局，最好採用傳統方式；如果是移動端或者是不考慮相容的pc則採用flex；
flex-direction: 主軸方向
justify-content: 子元素在一行內的對齊方式
flex-flow: 合寫
flex-wrap: 換行
align-items 側重 單行 定義一行內的彈性元素的對齊方式
align-contrnt: 側重多行 把一行看成乙個整體 定義行的對齊方式
專案屬性 flex 讓子元素佔據容器的空間 給彈性元素
align-self 控制子項 自己在側軸上的對齊方式
order 控制彈性元素的 順序 值越小 越排前面
（用空需要去網上查詢資料 多了解一下 目前講的比較淺）
（media featture) : **特性
檔位查詢
注意 min-width 或者max-width 必須再（）內 並且括號內的 值必須要加 英文的 ；號
rem單位
rem 單位是乙個用來控制頁面所有元素中有關px單位 （替換px 單位）
root 根
1rem = html中 font-size的大小
rem+ **查詢
查詢不同**的螢幕大小 劃分不同的html的font-size的大小
使用rem會讓頁面中所有的內容等比例變化
從最小的頁面設計稿的大小 設定為最小 檔 最大的設計稿 設定為最大檔
基本上 1rem = 頁面最大寬度/10 ！！！一般情況 該值值是可以改變的
1rem 只要確定劃分的分數 讓（當前）最小框度除以分數
less css 的預處理語言
方便邏輯
可以自定義變數
語法和css一樣並且方便 巢狀關係原理
檔位劃分
版心 container （和檔位乙個概念 都是市場約定 為了區分 手機 平板 pc裝置）
布局
多個類名 生效！！！重點理解
bootstrap
關於html第二行meta的意思於引用框架的初始化
容器及預製類（container 版心)
柵格系統
所謂的柵格系統就是預定義好各個檔位的寬度 並且寫好類名
！！！和柵格布局有區別的（網上查詢柵格布局概念 大概了解一下）
偏移 （這掌握的不太好 回頭多看看）
列排序作用：控制元素在各個檔位的顯示和隱藏
max-width: 100%; 表示當父級寬度大於寬度就顯示自己的寬度
移動端布局
預設以寬度為640px的設計稿為基準頁面，然後通過js獲取當前顯示裝置的尺寸，對應的調整 html 標籤的font size大小，從而實現通過以rem為單位的移動端布局適配。function win,doc function layoutcalc html.style.fontsize rem px...
移動端布局
css畫素與裝置畫素 二者的區別在於前者是抽象的，用於瀏覽器渲染頁面，而後者是裝置的最小物理單位。可參考 a pixel is not a pixel is not a pixel 進行理解。視口 移動端瀏覽器有兩個視口，即可見視口與布局視口，二者的區別在於前者為基於移動裝置螢幕的實際寬度，而後者為...
移動端布局
瀏覽器上 用來顯示網頁的那部分區域了 1 設定 view 有 init scale 頁面的初始縮放值 為數字 width viewport的寬度 height viewport的高度 mininum scale 允許使用者縮放最小值 maxinum scale 允許使用者縮放最大值 user sca...