元素的定位与移动display--block;（转换为块元素）float--left/right;（浮动左/右）

绝对定位absolute;
相对定位relative;——根据父级元素位置移动
复习：position:relative; position:static; position:absolute;

布局技巧：
1.
响应式设计媒体查询；
2.
CSS Grid布局模型；

案例使用：
grid-template-columns: auto 100px auto;
grid-template-rows: repeat(auto-fill, 150px);

样式省略符：
缩写属性书写：
font-size/line-height/color; margin:top/right/bottom/left;

选择器优先级：
标签选择器 > 类选择器 > id选择器
!important ——最高优先级

清除浮动：
clear:both;
clearfix:伪类技巧；
overflow：auto (滚动条) vs. auto (自动根据内容决定是否出现滚动条)

盒模型border盒子模型解析——margin、padding、border、content

案例使用：
box-sizing: border-box;
div{
    border: 2px solid black;
    padding: 10px;
    box-sizing: border-box;
}

伪元素使用：
::before/::after
:hover, :active, :focus;

样式设置：
text-align:right; ——文本右对齐
cursor:pointer; ——光标指针
opacity:.5; ——半透明效果

动画与过渡：
animation-name关键帧（@keyframes）；
transition: 属性名 时长 过渡曲线 延迟
案例使用：

.animation {
    width: 100px;
    height: 100px;
    background-color: pink;
    animation: move 2s infinite alternate; /* 动画名称 时间 无限次 循环 */
}

@keyframes move {
    from { left: 0; }
    to { left: 300px; }
}

响应式设计：
媒体查询——设置不同设备上的样式
案例使用：

@media only screen and (max-width: 600px) {
    .container {
        width: 90%;
    }
}

字体图标：
目的：提高页面的加载速度，减少服务器请求次数；
实现原理：利用web font字体技术；
应用场景：导航按钮、小图标等。

步骤：
1. 将字体文件复制到项目根目录；
2. 在HTML中添加结构标签；
3. CSS声明自定义字体样式；
4. 设置盒子字体以添加字体图标。

三角形制作：
本质：利用CSS边框绘制三角形；
方法：设置宽高为0，保留需要的边框颜色，其他透明；

案例使用：

.triangle {
    position: relative;
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 80px solid pink;
}

::after/::before
在元素前/后插入内容。

响应式图片处理：
使用srcset属性，根据不同屏幕尺寸加载不同大小的图片；
案例：

img {
    src: "image.jpg";
    srcset:
        "image-200.jpg 200w",
        "image-400.jpg 400w",
        "image-large.jpg 800w"
}

自定义滚动条：
使用CSS自定义滚动条的样式；
步骤：
1. 设置::-webkit-scrollbar轨道的样式；
2. 设置::-webkit-scrollbar滑块的样式；

案例：

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: #888;
}