这是我参与「第四届青训营」笔记创作活动的第6天

前言

今天学习的内容是关于 Web 开发中关于安全的技术内容，包括 XSS 、CRSF 、SQL 注入、DDOS 、HTTPS 等等，也算是一个量大管饱，~~奈何本人基础比较差，多数是当个开眼界听，其实并没怎么听懂，太丢人了。~~ 但是，经过一段时间的学习，对 CSS 的理解更深了！所以这次笔记，并不讲 Web 安全，而是对前面 CSS 内容的查漏补缺。

CSS 定位

在我们浏览网页的过程中，经常会发现有元素是层叠显示的，举个大家都很“喜欢”的例子，就是在网页或者软件的角落里经常弹出的小广告，这其实就是通过定位实现的。

绝对定位

通过position:absolute;可将元素设置为绝对定位，我们先通过一个简单实例分析：

<head>
<style>
       .box{
        width: 100px;
        height: 100px;
        border: 1px solid black;
       }
       .pos{
        position: absolute;
        top: 50px;
        left: 50px;
       }

    </style>
</head>
<body>
    <div class="box">1</div>
    <div class="box pos">2</div>
    <div class="box">3</div>
</body>

可以看到，第二个 div 脱离了文档流，不在占位，而第三个 div 与第一个 div 相邻。首先要明确，定位肯定是有参照点的，对于绝对定位而言，原点即为整个网页的左上角。所设置的top: 50px; left: 50px; 即坐标值，是元素左上角距离原点的距离。

相对定位

通过position: relative;可将元素设置为相对定位，还是用刚才的例子分析吧，首先将position的属性值改为relative，那么效果为：

直观的发现 div3 并没有再和 div1 相邻了，说明 div2 还是占位的，即并没有脱离文档流，再通过 div2 位置的改变即可得出，对于相对定位而言，原点为其占位位置的左上角，所设置的定位坐标为元素左上角距离原位置的距离。

固定定位

将position设置为fixed即可将元素设置为固定定位。为了直观的看到效果，在上诉代码中作了一些改动：

<head>
<style>
        body{
            height: 1000px;
        }
       .box{
        width: 100px;
        height: 100px;
        border: 1px solid black;
       }
       .pos{
        position: fixed;
        top: 50px;
        left: 50px;
       }

    </style>
</head>
<body>
    <div class="box">1</div>
    <div class="box pos">2</div>
    <div class="box">3</div>
</body>

注意，这里设定的坐标值并没有变化，但 div2 的位置却直观的出现了变化，这是怎么回事呢？

固定定位脱离文档流，并不占位，原点为浏览器当前窗口的左上角，定位的坐标是元素左上角距离原点的距离，那么它和绝对定位有什么区别呢？在拖动滚动条时，发现 div2 的位置在我们的视角中并没有发生改变，如果是绝对定位，在将滚动条拖动时，div2 也会随着我们的视角在动，得到结论：固定定位元素永远相对于当前窗口的位置定位。

设置原点

前面我们提到的定位中，都有一个原点的概念，在实际开发中，我们当然希望能自己设置原点，以灵活实现需求。 将父级元素设置定位元素，那么子级元素定位的坐标原点会设置为父级元素左上角的位置。

来看一个例子：

<head>
 <style>
     .container{
    width:300px;
    height:300px;
    border:1px solid blue;
    position: relative;;
    top:100px;
    left:100px;
}
    .box{
    border:blue 4px solid;
    width:100px;
    height:100px;
    position:absolute;
    top:10px;
    left:20px;
}

    </style>
</head>
<body>
    <div class="container">
    <div class="box">box</div>
    </div>
</body>

可以看到，container设置为relative相对定位，其原点还是原占位位置左上角，而我们将其子级元素box设置为absolute绝对定位，从设置的坐标值及实际效果来看，原点为父级元素container的左上角。

一般父级元素不设置为绝对定位。

如果父级元素不脱离文档流，参与正常排版，那么父级设置相对定位。
如果父级需要根据视窗的显示位置而变化位置，可以设置固定定位。

当然有一点是需要强调的，考虑到网页的后续维护，对不同尺寸屏幕的适配，定位应该是我们实现布局的最后一种手段。

过渡效果

让一个元素的某一个或多个 CSS 属性从一个值平滑过渡到另一个值，可以使用过渡属性。来看实例：

<head>
    <style>
        .box {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: #00f;
            transition: 
            width 1s linear 0.5s, height 1s linear 0.5s, background-color 1s linear 0.5s
        }

        .box:hover {
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box">box</div>
</body>

实际效果：

当鼠标悬浮的时候，元素就会以动画的形式变成width值为300px，背景为红色的元素。

在上诉代码中transition可以按顺序带四个参数值：

第一个为需要过渡改变的属性；
第二个为过渡到指定属性值需要的时间；
第三个为过渡函数，linear表示线性运动，即过渡的过程是匀速的，ease为默认值，表示开始和结束慢，中间快，ease-in表示开始慢，ease-out表示结束慢，ease-in-out与ease类似，但幅度要更大。
第四个为延迟时间，即延迟设定时间后再开始过渡。

形变

结合过渡效果，形变也很好理解了。

.box {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: #00f;
            transition: transform 3s;
        }
 .box:hover {
            transform: rotate(360deg);
        }

当鼠标悬浮时，元素开始旋转。将transform指定为过渡属性，就可以实现形变的过渡效果。

而transform也存在几个值：

transform:translate(80px, 80px);表示横向位移80px，纵向位移80px；
transform:scale(1,1);表示整体横向拉伸比例为1，纵向拉伸比例为1；
transform:rotate(90deg);表示顺时针旋转90度；

动画效果

在有过渡效果的基础上，动画效果也能理解了！没错，CSS 还能做动画！不像过渡效果那样，需要用户和网页交互，如鼠标悬停，才会展示动态效果，而 CSS 动画可以实现在没有交互的情况下，自行展示动态效果。

来看代码：

.box {
            width: 200px;
            height: 200px;
            background-color: #00f;
            animation: anim 5s linear 0.5s;
        }

@keyframes anim {
            0% {
                transform: translate(0px, 0px)
            }

            100% {
                transform: translate(900px, 100px)
            }
        }

用@keyframes定义一个动画，在上面的代码中，定义的动画名字为 anim 。然后定义动画具体细节，0%表示起始状态，100%为结束状态，也可以用其他的百分比定义动画在不同阶段的不同状态。现在动画定义好了，再用元素选择器来调用这个动画，animation属性可以调用动画，第一个值是动画名称，后面的三个值分别是动画的时间，动画函数和延时时间。

还可以通过设置animation-iteration-count属性设置动画播放的次数，如果值为infinite，则动画不断地循环播放。

还可以添加这样一段代码：

.box:hover{
    animation-play-state: paused;
}

当鼠标悬浮的时候，动画就会停止，当鼠标离开，动画又会开始运行，这样就有了交互行为！

写在最后

CSS 真是太强太复杂了，排版果然是一生之敌，而且它的某些特性还在更新迭代。本次 CSS 学习就到这里了，~~不然就不知道下一篇笔记写啥了~~，关于 flex 布局，gird 布局，待我再好好学学，那么下篇笔记再见！

再看 CSS | 青训营笔记

前言