day12

一：高度塌陷

條件：

1·子元素浮動脫離文件流

2·父元素沒有設定高度

解決：

1. 給父元素新增overflow：hidden（同解決margin的傳遞）

   觸發BFC

   弊端：會把父元素之外的元素給隱藏掉

2. 給浮動元素的後邊新增一個塊級元素(div)，給該元素設定一個clear屬性

   clear：both/left/right（清除浮動）

   只對塊級元素起作用

   清除浮動元素對自己的影響

   弊端：程式碼冗餘（有很多沒有用的div，不利於優化）

3. 通過偽元素的方法（萬能清除法）

   • 1·誰塌陷給誰加偽元素

   • 2·清除浮動

   • 3·轉換為塊元素（偽元素新增進來的元素是內聯元素）

     高度塌陷的元素::after{
                content:" ";
                clear:both; 清除浮動的影響
                display:block; 轉換成塊
                 } 
     
     

二：偽元素：

通過css新增HTML的結構

偽元素新增進來的元素是內聯元素

2·1給該元素新增最後一個孩子

​ 元素::after{
​ content:""; 必須由該屬性，沒字也要加引號
​ }
​ 元素::after{
​ content: url(); 插入圖片
​ }

2·2 給該元素新增第一個孩子 內聯元素

​ 元素::before{
​ content:""; 必須由該屬性，沒字也要加引號
​ }
​ 元素::before{
​ content: url(); 插入圖片
​ }

2·3選中第一個字元(中文：第一個字，英文: 第一個字母)

​ 元素::first-letter{對應的樣式}

2·4選中第一行

​ 元素::first-line{對應的樣式}

三：線性漸變

background-image：linear-gradier（方向，顏色值1，顏色值2）

相容性：IE9以上相容

3·1,方向：

(1):to bottom向下，to top向上，to right 向右，to left向左

(2):to right bottom向右下角，to right top向右上角，

(3):數值+deg（角度）

3·2,寫法：

(1): 標準寫法
background-image: linear-gradient(30deg,yellow,red,blue)

(2): 相容寫法

​ /* -moz- 火狐 /
​ -moz-linear-gradient();
​ / -o- 歐鵬 /
​ -o-linear-gradient();
​ / -webkit- 谷歌 */
​ -webkit-linear-gradient();

3·3,漸變效果的重複性

background-image: repeating-linear-gradient(方向,顏色值1 範圍1,顏色值2 範圍2);

background-image: **repeating-linear-gradient**(to left，rgb(192, 227, 255) 20px,pink 200px);

純藍色的值是0-20px,20-200px表示漸變的範圍，200-元素的寬的值表示純粉色的

區域新增repeating-linear-gradient是將漸變區域重複的顯示在元素的區域中

四：徑向漸變

4·1屬性：

background-image：radial-gradier（x軸方向 y 軸方向，顏色值1，顏色值2）

4·2漸變效果重複性

類似於線性漸變

五：過渡

5·1，屬性

​ transition-property: 需要過渡的屬性

​ transition-duration: 過渡執行的時間 數值+s/ms

​ transition-delay：過渡的延遲時間 數值+s/ms

​ transition-timing-function: 過渡執行的效果 linear勻速/ease逐漸 變慢/ease-in 加速/ease-out減速

5·2，複合寫法：

transition: 需要過渡的屬性(all:全部屬性) 過渡執行的時間 過渡的延遲時間 過渡執行的效果

5·3，注意

​ 屬性值之間沒有順序
​ 只有一個時間代表過渡執行的時間
​ 兩個時間 第一個代表執行時間 第二個代表延遲時間
​ 過渡屬性要加在需要過渡的原本的元素身上，不要加在hover裡面

意

​ 屬性值之間沒有順序
​ 只有一個時間代表過渡執行的時間
​ 兩個時間 第一個代表執行時間 第二個代表延遲時間
​ 過渡屬性要加在需要過渡的原本的元素身上，不要加在hover裡面