day12-李大人part1

最新推荐文章于 2023-05-08 01:00:08 发布

乐意-李

最新推荐文章于 2023-05-08 01:00:08 发布

阅读量492

点赞数

文章标签： html css css3 html5

本文链接：https://blog.csdn.net/qq_45903009/article/details/111469013

版权

day12

一：高度塌陷

条件：

1·子元素浮动脱离文档流

2·父元素没有设置高度

解决：

给父元素添加overflow：hidden（同解决margin的传递）

触发BFC

弊端：会把父元素之外的元素给隐藏掉
给浮动元素的后边添加一个块级元素(div)，给该元素设置一个clear属性

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

只对块级元素起作用

清除浮动元素对自己的影响

弊端：代码冗余（有很多没有用的div，不利于优化）
通过伪元素的方法（万能清除法）
- 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是将渐变区域重复的显示在元素的区域中