文章目錄

二.彈性佈局（重點）

什麼是彈性佈局
主要解決某個元素中，子元素（僅僅是子元素不是後代元素）的佈局方式
爲佈局提供非常大的靈活性
彈性佈局的相關概念
1. 容器
  要發生彈性佈局的子元素的父元素叫做容器
  即：定義了display：flex;的元素
2. 項目
  要發生彈性佈局的子元素們叫做項目
  即：定義了display: flex的元素的兒子們
3. 主軸(4條)–x軸正負方向，y軸正負方向
  項目們的排列方向，稱之爲主軸
  項目們在主軸上的排列順序，稱爲主軸的起點和終點
  例：x軸正方向稱爲：主軸方向x軸，主軸起點-左側，主軸重點-右側
4. 交叉軸(2條)–x軸正方向，y軸負方向
  永遠與主軸垂直的方向
  項目們在交叉軸上的排列，稱爲交叉軸的起點和終點
  
  以圖中3個元素爲例：3個子元素做彈性佈局，主軸方向x軸，主軸起點-左側，交叉軸y軸，在交叉軸的終點對齊
語法
設置彈性容器
display：
取值：
flex; 把塊級變爲彈性容器
inline-flex; 將行內元素變爲彈性容器
注意：
1. 當一個元素設置爲容器之後，這個容器的text-align，vertical-align失效，項目沒失效
2. 當元素變爲彈性項目時（即父元素設置了display:flex），這個彈性項目float，clear失效
容器的樣式屬性
1. 設置主軸的方向
  flex-direction:
  取值：
  row 默認值，主軸爲x，主軸起點在左側
  row-reverse 主軸爲x，主軸起點在右
  column 主軸爲y，主軸起點在頂部
  column-reverse 主軸爲y，主軸起點在底部
2. 設置項目換行
  當容器在主軸方向，空間不夠時，用來設置項目是否換行
  flex-wrap:
  取值：
  no-wrap; ：默認值，不換行(項目壓縮)
  wrap; ：換行
  wrap-reverse; ：反轉換行
3. 上面兩個屬性的簡寫方式
  flex-flow: 主軸方向換行;
4. 定義項目在主軸上對齊方式
  justify-content:
  flex-start;：默認值，主軸起點對齊
  center;：主軸的中間對齊
  flex-end;：主軸終點對齊
  space-around;：每個項目左右外邊距相同 (兩端有空間)
  
  space-between;：每個項目之間間距相同，兩端對齊(兩端沒有空間)
5. 交叉軸對齊方式
  align-items:
  取值：
  flex-start 交叉軸起點
  center 中間
  flex-end 交叉軸終點
  baseline 每個項目的文本，基線對齊（很少用）
  stretch 前提，是項目(不是容器)在交叉軸方向不寫尺寸，項目充滿交叉軸
項目的樣式屬性
只能設置在一個項目上，不影響其他項目
1. 單獨設置一個項目交叉軸對齊方式
  align-self:
  取值：
  flex-start 交叉軸起點
  center 中間
  flex-end 交叉軸終點
  baseline 每個項目的文本，基線對齊（很少用）
  stretch 前提，是項目(不是容器)在交叉軸方向不寫尺寸，項目充滿交叉軸
  auto 使用容器align-items定義的值
2. 設置項目在主軸的排列順序
  order:取值爲無單位數字，默認值爲0。值越小，離主軸起點越近！
3. 項目縮小
  當主軸空間不夠時，項目是否縮小，怎麼縮小
  flex-shrink:取值爲不帶單位的數字
  默認值：1；
  取值規則，子元素總溢出寬度，根據flex-shrink取值，按比例*總溢出寬度，分配給各個項目做縮小(減法)。
  舉例：
  爲父元素命名爲div0，1-5五個子元素分別命名爲div1、div2、…、div5。
  父元素需要設定：
  
  display：flex，width：500px
  
  所有子元素需要設定：
  
  flex-basis：120px; 即不發生收縮時子元素原本的寬度
  
  以上爲先決條件。子元素寬度之和與父元素寬度的差值：
  
  120*5-500=100px
  
  這時通過設定子元素的flex-shrink屬性來決定100px總縮減量如何分配給5個子元素。
  預設:
  
  前三個div設置flex-shrink: 1;
  後兩個div設置flex-shrink: 2;
  
  div1佔總收縮比例的1/7，所以div1需要被移除的溢出量爲
  
  100*(1/7)≈14px
  
  則，最後div1的實際寬度爲
  
  120-14=106px
4. 項目放大
  當主軸空間過大，項目是否放大，怎麼放大
  flex-grow:取值爲不帶單位的數字
  默認值：0；
  取值規則，多出的空間，按照取值，分配給各個項目進行放大(相加)
5. 項目的樣式屬性（重要屬性）
  1. flex-basis
    單獨設置每個項目在主軸上的佔據空間（不管主軸是x,還是y）
    flex-basis:
    取值①% 容器主軸方向尺寸的百分比；②px固定數字
    注意，定義了flex-basis，優先級高於項目本身寬高
  2. 簡寫方式
    是flex-grow、flex-shrink、flex-basis 的簡寫
    flex:0 1 25%;

三.CSS hack

由於不同的瀏覽器對css的解析不同，會導致同一份css在不同瀏覽器生成不同的效果
開發人員需要針對不同瀏覽器寫不同的css
這個行爲，就叫做寫css hack
-webkit-谷歌的
-o-歐朋的
-ms-微軟的
-moz-火狐的

四.轉換（重點）

什麼是轉換
改變元素在頁面中的位置，大小，角度，以及形狀
2D轉換：只在x軸和y軸上發生轉換效果
3D轉換：增加了z軸的效果。但是3D都是模擬的！
轉換屬性
transform:轉換函數;
2D轉換
1. 位移(改變元素在頁面中的位置)
  transform: translate()
  轉換函數
  1. translate(x)和translateX(x) 設置元素在x軸上位移的距離：取正數元素→移，取負數元素←移
  2. translateY(y) 設置元素在y軸上位移的距離：取正數元素↓移，取負數元素 ↑移
  3. translate(x,y) 同時設置x和y軸位移距離
  面試題
  要求一個200px*200px的div，不管瀏覽器多大，都在瀏覽器正中心顯示
```
	div{
		width: 200px;height: 200px;
		background: #000;
		position: absolute;
		top: 50%;left: 50%;
		transform: translate(-100px,-100px);
	}
```
2. 縮放(改變元素的大小)
  transform：scale()
  取值
  1. 參數爲一個值 scale(v1) 同時設置x軸和y軸的縮放倍數
    v1>1 x軸和y軸都放大倍數
    0<v1<1 x軸和y軸都縮小
    -1<v1<0 x軸和y軸都縮小,並反轉（x軸y軸都反轉）
    v1<-1 x軸和y軸都放大,並反轉
  2. 參數爲兩個值，分別設置x軸和y軸的縮放
  3. 單獨設置x軸縮放 scalex()
  4. 單獨設置y軸縮放 scaley()
3. 旋轉(改變元素的角度)
  transform:rotate(ndeg);
  n取值：正–順時針，負–逆時針
  注意：
  1. 旋轉原點會影響旋轉效果
    transform-origin:x y
    取值
    ①以px爲單位的數字
    ②%
    ③關鍵字 x(left/center/right)；y(top/center/bottom)
  2. 旋轉與位移的配合，注意旋轉會帶着座標軸一起轉，位移是在旋轉之後的座標方向位移
4. 傾斜（項目中用的較少）
  1. skewX(ndeg)和skew()
    讓y軸向着x軸傾斜n度
    n:正數逆時針負數順時針
  2. skewY(ndeg)
    讓x軸向着y軸傾斜n度
    n:正數順時針，負數逆時針
  3. 同時設置x軸和y軸的傾斜
    練習
    在一個transform屬性中，寫多個轉換函數
    div 200*200.背景隨意，鼠標懸停時，該元素髮生以下效果
    向右偏移100px,向下偏移100px，旋轉135deg,向着x軸傾斜78度，放大1.5倍
3D轉換（3D旋轉）
頁面中所有的3D轉換都是模擬的
1. 透視距離
  模擬人眼到3d轉換元素之間的距離，
  距離不同，效果不同
  perspective:透視距離：此屬性要加載到3D轉換元素的父元素上
2. 3D轉換
  transform:
  取值：
  1. rotateX(xdeg)
    以x軸爲中心軸，旋轉元素（現實中烤羊腿，老式爆米花機的旋轉方式）
    2 rotateY(ydeg)
    以y軸爲中心軸，旋轉元素(現實中旋轉門，旋轉木馬，鋼管舞，土耳其烤肉的旋轉方式)
  2. rotateZ(zdeg)
    以z軸爲中心軸，旋轉元素角度(現實中風扇，大風車，摩天輪的旋轉方式)
  3. 3D旋轉 rotate3D(x,y,z,ndeg)
    x,y,z 取值爲不帶單位的數字。0 代表不參與。其他數字代表角度的倍數。負數代表反方向轉

五.過渡（重點）

什麼是過渡
讓css的值，在一段時間平緩變化的效果
語法
1. 指定參與過渡的屬性
  transition-property:
  取值
  ①一個或多個css屬性，多個屬性間用空格分開(寫或者不寫transform屬性，該屬性都參與過渡)
  ②all 所有支持過渡的屬性
  支持過渡的屬性
  1. 顏色屬性
  2. 大多數取值爲具體數字的屬性
  3. 陰影
  4. 轉換
2. 設置過渡持續時長
  transition-duration: s/ms;
3. 過渡時間曲線函數
  transition-timing-function:
  取值：
  1. 貝塞爾曲線(自學) cubic-bezier(0,0,1,1)
  2. ease 默認值，慢速開始，加速，減速，慢速結束
  3. linear 勻速
  4. ease-in 慢速開始，一直加速
  5. ease-out 快速開始，減速結束
  6. ease-in-out 慢速開始，先劇烈加速，再劇烈減速，慢速結束
4. 過渡前的延遲時間
  transition-delay: s/ms
5. 過渡代碼的編寫位置
  過渡寫在原始樣式中，過渡效果，有去有回
  過渡寫在僞類hover中，過渡效果，有去無回
6. 過渡的簡寫方式
  transition: property duration timgin-function delay;
  最簡方式：transition: duration;
  練習：1.翻滾吧球 2.魔力轉圈圈
  PS:過渡和動畫的使用區分
  
  過渡動畫
  
  兩個css值之間的變化至少兩個，或者兩個以上css值之間的變化
  
  必須使用僞類激活可以使用刷新頁面激活，也可以使用僞類

過渡	動畫
兩個css值之間的變化	至少兩個，或者兩個以上css值之間的變化
必須使用僞類激活	可以使用刷新頁面激活，也可以使用僞類

六.動畫（重點）

什麼是動畫
使元素從一種樣式逐漸變爲另外一種樣式
就是過渡的升級，將多個過渡效果放到一起
使用關鍵幀來控制動畫每一個狀態
關鍵幀的組成：
1. 這一幀執行的時間點
2. 這一幀的樣式
動畫的使用步驟
1. 使用關鍵幀，來定義動畫
  @keyframes 動畫名稱{ 0%/from{樣式} ..... 100%/to{樣式} }
  舉例：
```
/* 1.定義動畫 */
@keyframes change{
    0%{
        background-color: #00f;
        border-radius: 0;
    }
    50%{
        background-color: #f00;
        border-radius: 50%;
    }
    100%{
        background-color: #afa;
        border-radius: 0;
    }
}
```
2. 調用定義好的動畫
  1. 指定調用動畫的名稱
    animation-name:動畫名稱;
  2. 指定動畫播放時長
    animation-duration: s/ms;
  3. 設置動畫的時間曲線函數
    animation-timing-function:
    取值:
    ease
    linear
    ease-in
    ease-out
    ease-in-out
    貝塞爾曲線
  4. 設置動畫的延遲
    animation-delay: s/ms
動畫的其他屬性
1. 設置動畫的播放次數
  animation-iteration-count:
  取值：
  具體的數字
  infinite 無限
2. 定義關鍵幀的播放順序
  animation-direction:
  normal ：0%—>100%
  reverse ：100%–>0%
  alternate：輪流播放，奇數次正向，偶數次逆向
3. 動畫簡寫
  animation: name duration timing-function delay count direction;
  最簡方式 animation:name duration;
4. 動畫的填充狀態
  animation-fill-mode
  取值：
  none ：默認值，不填充
  backwards：動畫的延遲時間內，填充第一幀
  forwards ：動畫結束後，填充最後一幀
  both ：前後都填充
5. 設置動畫的播放狀態
  animation-play-state:
  取值：
  paused：暫停
  running：播放
動畫的兼容性
如果低版本瀏覽器兼容動畫效果，需要在聲明動畫的時候，添加前綴
正常寫動畫：@keyframes 動畫名稱{}
添加兼容的寫動畫：
@-webkit-keyframes 動畫名稱{}
@-o-keyframes 動畫名稱{}
@-moz-keyframes 動畫名稱{}
@-ms-keyframes 動畫名稱{}
練習:坤坤打籃球
動畫的第三方包使用
animate.css的使用
https://daneden.github.io/animate.css/下載animate.css文件
在頁面中使用link引入這個css
在樣式中直接調用動畫名稱

七.css優化

css優化的目的
減少服務器端壓力
提升用戶體驗
css優化的原則
儘量減少http的請求個數（緩存，精靈圖）
頁面的頂部引入css文件
將css和js文件，放在獨立的文件中
css代碼優化
合併樣式(能簡寫，就不單獨寫)
減少樣式重寫(能重用就重用)
避免出現空的href和src
代碼壓縮

八.css reset和normalize.css

什麼是css reset
由於不同瀏覽器，給元素定義的默認樣式不同，導致一份css有可能產生不同的效果。爲了統一，在開發之前，我們把所有有差異的默認樣式，清除或統一
css reset沒有標準，項目中使用哪個版本，聽領導安排
注意：css reset存在的問題：css reset 比較霸道，不管是不是違背語義，都要把樣式清除和統一
normalize.css
他是css reset一種替代方案，比較溫和
他在默認的html元素的樣式上，提供跨瀏覽器的高度一致性，還修改了不同瀏覽器的bug

T-CSS核心-day02-css hack、轉換、過渡、動畫、優化

文章目錄

二.彈性佈局（重點）

三.CSS hack

四.轉換（重點）

五.過渡（重點）

六.動畫（重點）

七.css優化

八.css reset和normalize.css

T-JS-ECMAScript核心題庫

T-CSS基礎-day05-浮動、樣式屬性、定位

T-CSS核心-day01-複雜選擇器、彈性佈局

T-JS基礎-day09-引用類型

JavaScript Math 對象屬性及方法示例

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結