乱七八糟的css笔记以及踩坑经历

乱七八糟的css笔记以及踩坑经历

animation应用之模拟雨滴下落

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,html{
            height: 100%;
        }
        .container{
            position: relative;
            height: 100%;
            overflow: hidden;     
        }
        .rain-drop{
           position: absolute;
            width: 2px;
            height: 10px;
            background-color: black;
            animation: drops 1s ease-in infinite;
            clip-path: ellipse(50% 50% at 50% 50%);
            overflow: hidden;
            opacity: 0;
        }
        @keyframes drops {
            0%{
                opacity: 0;
            }
            10%{
                opacity: 1;
            }
            90%{
                opacity: 1;
            }
            100%{
                opacity: 0;
                transform: translate3d(100px,100vh,-100px);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="rain-drop"></div>
    </div>
</body>
<script src="../js/jquery-3.6.0.js"></script>
<script>
    /* 使用jquery获取画布容器以及雨滴div
        initPos表示每个雨滴的水平分布，top表示雨滴的垂直分布
        delay表示雨滴下落的时机
        循环30次，在每一次循环中 给每个雨滴添加写好的雨滴样式，并且设置好它们的初始位置
        最后将每个雨滴逐个加入到画布容器container中
    */
    var $container = $('.container')
    var initPos = 0;
    for(let i = 0; i < 30; i++){
        let top = Math.floor(Math.random()*5+2)
        let delay = Math.floor(Math.random()*5+2)
        initPos += top
        let $div = $('<div></div').addClass('rain-drop').css({
            "left": `${initPos}%`,
            "top": `${top}%`,
            "animation-delay": `${delay/5}s`
        })
        $container.append($div)
    }
</script>
</html>

本次demo学习并了解到了下面这个属性：

clip-path：这是一个区域裁剪属性，可以对一个图层进行任意形状的裁剪，比如本次demo中的ellipse，就是裁剪出一个椭圆，除此之外，还能裁剪出其他形状，比如圆形、矩形或者自定义的多边形

什么是BFC

BFC全称block formatting context，也就是块级格式上下文，有点函数执行上下文的味道了，查阅资料后明白了，它是页面中的一块渲染区域，在此区域里，其子元素的摆放方式（垂直摆放）不会受到外部的影响。

计算BFC的高度时，浮动元素的高度也参与计算。因此可以将 把浮动元素包裹着的父元素转换成BFC，这样就能解决子元素浮动导致父元素高度塌陷的问题了！！！

如何生成BFC（查阅资料）

  • 1、float的值不是none。

  • 2、position的值不是static或者relative。

  • 3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex

  • 4、overflow的值不是visible

关于流体布局

一边固定一边自适应

  1. 改变DOM位置的流体布局写法
  2. 不改变DOM位置的流体布局写法【左右栏都左浮动】，通过margin来调整之间的距离

流体布局进阶—智能自适应尺寸

一边float一边display: table-cell

关于absolute属性的更多理解

使用无依赖的绝对定位，也就是不使用“子绝父相”（能更好地实现自适应定位）

absolute具有跟随性！！！所谓跟随性是指，元素开启无依赖的绝对定位前后的位置不会发生变化。举个栗子，一个span标签后面紧跟着一个div标签，div标签开启无依赖绝对定位后的位置不会发生变化

应用：可以将需要定位的元素的display属性设置为inline-block，让其紧紧跟随在目标元素后面，再利用margin属性去调整具体位置

动画尽量作用在绝对定位的元素上

关于margin属性的更多理解

利用margin可以实现一端固定一段自适应布局（评论区=头像区+评论）

利用margin改变其占据尺寸

普通元素的百分比margin都是相对于容器的宽度计算的！！！

绝对定位元素的百分比margin是相对于第一个祖先定位元素的宽度计算的！！！

父子margin重叠的条件

  • margin-top重叠

    1. 父元素非bfc
    2. 父元素没有border-top设置
    3. 没有padding-top
    4. 父子元素之间没有inline元素分割

  • margin-bottom

    与上述的类

  • 空元素margin重叠

    1. 没有border设置
    2. 没有padding
    3. 没有inline元素
    4. 没有height或者min-height

设置绝对定位元素的top、left、right、bottom为0实现自动拉伸，在设置元素的宽高，最后使用margin即可实现居中显示

margin负值下的等高布局：一开始利用margin-bottom将元素高度变小（甚至消失），然后再利用padding-bottom来填充缺失的高度

margin负值下的两栏自适应布局：两栏使用浮动，通过调整margin-left和margin-right来进行调整两栏的间距