day12

1. 高度塌陷

(1) 高度塌陷的条件

1) 子元素浮动

2) 父元素没有设置高度

(2) 解决办法

1）给父元素添加overflow: hidden;(触发BFC)

弊端：会把父元素之外的元素给隐藏掉

2）给浮动元素的后面添加一个块级元素(div)，给该元素设置clear属性。 clear: left/right/both; 清除浮动(清除浮动元素对自身的影响),只对块级元素生效

弊端：代码冗余

3）通过伪元素的方法万能清除法

高度塌陷的元素::after{
                content:"";
                clear:both; 清除浮动的影响
                display:block; 转换成块
            }

2. 伪元素

给该元素添加最后一个孩子

元素::after{
            content:""; 必须由该属性，没字也要加引号
        }

元素::after{
            content: url(); 插入图片
        }

给该元素添加第一个孩子

 元素::before{
            content:""; 必须由该属性，没字也要加引号
        }

 元素::before{
            content: url(); 插入图片
        }

选中第一个字符(中文：第一个字，英文: 第一个字母)
```
元素::first-letter{对应的样式} 
```
选中第一行
```
元素::first-line{对应的样式}  
```

3. 线性渐变

语法：

background-image/background: linear-gradient(方向,颜色值1,颜色值2);

方向
- to bottom 向下
  to top 向上
  to right 向右
  to left 向左
  to right bottom 向右下角
  to right top 向右上角
  to left top 向左上角
  to left bottom 向左下角
  数值+deg(角度)

标准写法：

background-image: linear-gradient(30deg,yellow,red,blue)

兼容写法

/ -moz- 火狐 /
background-image: -moz-linear-gradient();

/ -o- 欧鹏 /

background-image: -o-linear-gradient();

/ -webkit- 谷歌 /

background-image: -webkit-linear-gradient();

重复性的线性渐变

background-image: repeating-linear-gradient(方向,颜色值 范围,颜色值 范围);

background-image: repeating-linear-gradient(red 50px,blue 55px); 
/* 0-50 红色的纯色 50-150 红色到蓝色的渐变范围 150-200 蓝色的纯色  */

4. 径向渐变

background-image/background: radial-gradient(x轴方向 y轴方向,颜色值1，颜色值2);

方向和背景图位置设置一样，默认是居中，要设置方向的话，必须加浏览器的前缀。

 background-image: -webkit-radial-gradient(left center,red,yellow,green);

重复性的径向渐变

 background-image: repeating-radial-gradient(red 50px,yellow 55px); 
 将50-55之间的渐变效果，重复显示

5. 过渡

transition-property: 需要过渡的属性
transition-duration: 过渡执行的时间数值+s/ms 1s=1000ms

transition-delay：过渡的延迟时间数值+s/ms 1s=1000ms

transition-timing-function: 过渡执行的效果 linear匀速/ease逐渐变慢/ease-in 加速/ease-out减速

复合写法：

transition: 需要过渡的属性(all:全部属性) 过渡执行的时间过渡的延迟时间过渡执行的效果

写法注意:
- 属性值之间没有顺序
- 只有一个时间代表过渡执行的时间
- 两个时间第一个代表执行时间第二个代表延迟时间
- 过渡属性要加在需要过渡的原本的元素身上，不要加在hover里面