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里面