1654654

、過渡效果 - transition
1、什麽是過渡
使得CSS的屬性值在一段時間內平緩變化的效果
2、語法
1、指定過渡屬性
作用：指定哪個屬性值在變化的時候使用過渡效果
屬性：transition-property
取值：
1、屬性名稱
2、all
但凡能使用過渡效果的屬性值在變化的時候一律使用過渡效果
允許使用過渡效果的屬性：
1、所有與顏色相關的屬性
2、所有取值為數字的屬性
2、指定過渡時長
作用：指定在多長時間內完成過渡效果
屬性：transition-duration
取值：以 s 或 ms 為單位的數字
1s = 1000ms
300ms = 0.3s = .3s
3、指定過渡的速度時間曲線函數(速率)
屬性：transition-timing-function
取值：
1、ease
默認值，慢速開始，快速變快，慢速結束
2、linear
勻速
3、ease-in
慢速開始，加速結束
4、ease-out
快速開始，減速結束
5、ease-in-out
慢速開始和結束，中間先加速後減速
4、指定過渡延遲
屬性：transition-delay
取值：以 s 或 ms 為單位的數值
5、過渡屬性
屬性：transition
取值：property duration timing-function delay
練習：
創建一個元素200200，紅色背景
鼠標懸停時
1、尺寸變為400400
2、背景顏色變為×××
3、變成圓形
使用過渡效果在5s鐘內完成以上三個效果，鼠標移除時使用過渡效果變為原來的樣子
2、定位(重點)
1、什麽是定位
表示的是元素在頁面中的位置
2、定位的分類
在CSS中，定位能分為以下幾類：
1、普通流定位(默認定位方式)
2、浮動定位(重難點)
3、相對定位
4、絕對定位
5、固定定位
3、普通流定位
普通流定位，又稱為"文檔流定位"。是頁面中所有元素的默認定位方式。典型的 "流式布局"
特點：
1、每個元素在頁面中都有自己的位置，並占據一定的頁面空間
2、每個元素都是從其父元素的左上角開始排列的
3、每個元素基本上都是按照從左到右 或 從上倒下的方式排列的
塊級元素：從上倒下排列，每個獨占一行
行內元素 & 行內塊元素：從左到右排列，顯示不下的時候才換行
4、浮動定位(重難點)
1、浮動元素的特點
將元素設置為浮動定位，將具備以下特點：
1、浮動元素會被排除在文檔流之外 - 脫離文檔流，那麽元素將不在占據頁面空間
2、未浮動的元素們會上前占位
3、浮動定位的元素會停靠在父元素的左邊或右邊或其他已浮動元素的邊緣上
4、浮動只能在當前行浮動
5、浮動解決問題：讓多個塊級元素能夠在一行內顯示
2、語法
屬性：float
取值：
1、none
默認值，無任何浮動效果
2、left
浮動到父元素的左邊，或停靠在左邊已有的浮動元素的邊緣上
3、right
浮動到父元素的右邊，或停靠在右邊已有的浮動元素的邊緣上
3、浮動引發的特殊效果
1、如果父元素顯示不下所有的已浮動子元素的話，那麽最後一個將換行，但有可能被卡住
2、元素一旦浮動起來後，都將變成塊級元素
行內元素們一旦浮動，就允許修改尺寸
3、元素一旦浮動起來之後，在為指定寬度的情況下，寬度將由內容來決定
4、文字，圖片，行內元素是采用環繞的方式來排列的，是不會被浮動元素壓在底下的

web全棧