css

CSS

选择器

CSS 选择器【常用】

元素选择器：h1, img, p {}

类选择器：.className {}

id 选择器：#id {}

通配符选择器：* {}

CSS 属性【常用】

字体大小：font-size

字体颜色：color

宽度：width

高度：height

背景色：background-color

文本水平居中：

text-align: center;

文本垂直居中：

line-height: height对于的值;

文本行高（垂直居中）：line-height

选择器【扩展】

层级选择器：select1 select2 {}

组合选择器：select1, select2 {}

伪类选择器（增加行为）：select:hover {}

伪元素选择器（增加元素）：select::before, select::after {}

选择器权重

相同选择器：后面的会覆盖前面的。

不同选择器：ID（100）> CLASS（10）> element（1）

层级选择器：按权重累加计算。

设置最高权重

!important

引入 css 的方法

嵌入样式

内联样式

外部样式（实际开发中大部分都使用外部样式）

<link rel="stylesheet" type="text/css" href="引入的外部 css 样式"/>

盒子模型

有关盒子模型的 css 属性

盒子模型 div

边框：border-width; border-style; border-color;

外边距：margin（-top|-right|-bottom|-left）

内边距：padding（-top|-right|-bottom|-left）

边框 border-style 的值：

值	描述
none	定义无边框
dotted	定义点状边框
dashed	定义虚线
solid	定义实线
double	定义双线

盒子模型水平居中

margin: 0 auto;

盒子模型边距初始化

* {
    margin: 0;
    padding: 0;
}

默认情况：元素宽度和高度计算

元素的实际宽度 = border-left + border-right + width + padding-left + padding-right;

元素的实际高度 = border-top + border-bottom + height + padding-top + padding-bottom;

设置 box-sizing: border-box;

box-sizing: border-box;

盒子的实际宽度 = width

盒子的实际高度 = height

列表的样式

取消列表样式：

list-style: none;

列表样式在边距之内：

list-style: inside;

HTML 元素的分类

块元素：可以设置宽度和高度，独立成行。h1-6、p、div、ul、li

行内元素(内联元素，行级元素)：不可以设置宽度和高度，不独立成行。a、span

行内块元素：可以设置宽度和高度，不独立成行 img、input、button

display 属性

block：转换为块元素。

inline：转换为行内元素。

inline-block：转换为行内块元素。

none：隐藏元素。

两个 div 在同一行显示

将元素设置为浮动元素（float），块元素可以在同一行显示。

float: left;

浮动元素的特性

脱离文档流

空 div 清除浮动

clear: both;

伪元素清除浮动

放在浮动元素的父标签上class="clear"

.clear::after, .clear::before {
    content: "";
    display: block;
    clear: both;
}

CSS 定位（position）

绝对定位：`absolute`

脱离文档流；
默认参照物为浏览器视窗的左上角。

相对定位：`relative`

不脱离文档流；
默认参照物为此元素的原位置。

固定定位：`fixed`

脱离文档流；
默认参照物为浏览器视窗位置。
固定在屏幕上，不随滚动条移动（默认）。

设置参照物

使用绝对定位时，一般需要重新设置参照物

父级为定位元素，一般父级元素设置为相对定位（relative）

position: relative;

子级的绝对定位（absolute）元素会以父级为参照物。

position: absolute;
top: 0;
left: 0;

坐标属性（非定位元素不起作用）

只有设置了 position 属性，以下的属性才有用！

top、left、right、bottom、

z-index

设置 z 轴（z-index）;
值为整数，可以为负数，默认为 0;
数值大则在前方显示，数值相同则按照先后顺序覆盖显示。

HTML 5 新特性

布局元素
媒体元素
画布（<canvas>），例如刮刮乐
SVG（定义矢量图）
表单新特性

HTML 5 布局元素

布局元素相当于一个有语义的 div

header：网页头部

nav：导航栏

aside：侧边栏

article：显示文章

section：布局的一部分

footer：网页页脚

媒体元素

audio：音频
video：视频

媒体元素属性

controls：显示控制面板
autoplay：视频自动播放
muted：静音

CSS 3 新特性

边框圆角
阴影
形变：旋转、缩放、位移
过渡效果
动画效果
媒体查询
flex 布局
grid 布局

圆角

border：边框

radius：半径

border-radius: 左上 右上 右下 左下;（顺时针）

如果设置两个值，第一个值表示左上和右下，第二个值表示右上和坐下。

值得计算方式如下所示：

阴影

shadow：阴影

box-shadow: 10px 20px 30px blue;

参数分别表示：x 轴偏移量，y 轴偏移量，模糊半径，阴影颜色（不设置颜色默认为黑色）

形变

transform：形变

rotate：旋转，deg 单位表示角度（degree）

scale：缩放

translate：位移

transform: rotate(45deg) scale(0.5) translate(50px, 100px);

设置旋转原点

transform-origin: 0 0;

让一个元素在网页中水平垂直居中

.box {
    width: 500px;
    height: 200px;
    background-color: blueviolet;
    /* 绝对定位 */
    position: absolute;
    /* 垂直居中 */
    top: 50%;
    /* 水平居中 */
    left: 50%;
    /* 设置元素的中心点 */
    transform: translate(-50%, -50%);
}

案例

让一个蓝色的正圆垂直水平居中显示。
正圆的直径为 100px。
阴影距离正圆偏离 10px，阴影的颜色为红色。

.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    /* 设置正圆 */
    border-radius: 50%;

    /* 设置红色阴影 */
    box-shadow: 10px 10px 10px red;

    /* 绝对定位 */
    position: absolute;
    /* 垂直居中 */
    top: 50%;
    /* 水平居中 */
    left: 50%;
    /* 设置元素的中心点 */
    transform: translate(-50%, -50%);
}

图示：.

过渡效果

transition（过渡）

transition-property：过渡属性（例如 transform）

transition-duration：过渡持续时间（例如 1s ）

transition-timing-function：过渡函数

transition-delay：过渡延迟时间

简写

transition: 属性 秒数 函数 延迟;

过渡函数

transition: 属性 秒数 过渡函数;

ease：开始和结束慢，中间快，默认值。

linear：匀速

ease-in：开始慢

ease-out：结束慢

ease-in-out：和 ease 类似，但比 ease 幅度大。

设置多个值（逗号隔开）

transition: 属性 秒数, 属性 秒数;

overflow

超出范围的内容不显示

overflow: hidden;

下拉菜单

图示：.

css 代码：

<style ref="stylesheet">
    * {
        margin: 0;
        padding: 0;
    }

    .menu>li {
        height: 30px;
        width: 150px;
        background-color: yellow;

        /* 文本水平对齐 */
        text-align: center;
        /* 文本竖直对齐 */
        line-height: 30px;
        /* 左浮动 */
        float: left;
        /* 清除列表样式，去除前面的黑点 */
        list-style: none;
    }

    .sub-menu>li {
        height: 0;
        overflow: hidden;
        /* 渐变高度，以显示内容 */
        transition: height 0.3s;
        /* 为了覆盖 “其他内容” */
        position: relative;
    }

    .menu>li:hover > .sub-menu>li {
        /* height 不能使用 auto 值，推荐此值和父标签的 height 的值一致*/
        height: 30px;
        background-color: yellow;
    }

    /* 清除浮动 */
    .clear::before, .clear::after {
        display: block;
        content: "";
        clear: both;
    }
</style>

html 代码：

<body>
    <ul class="menu clear">
        <li>
            书籍1
            <ul class="sub-menu">
                <li>JavaScript</li>
                <li>Java</li>
                <li>python</li>
                <li>MySQL</li>
            </ul>
        </li>
        <li>
            书籍2
            <ul class="sub-menu">
                <li>JavaScript</li>
                <li>Java</li>
                <li>python</li>
                <li>MySQL</li>
            </ul>
        </li>
        <li>
            书籍3
            <ul class="sub-menu">
                <li>JavaScript</li>
                <li>Java</li>
                <li>python</li>
                <li>MySQL</li>
            </ul>
        </li>
    </ul>

    <div>其他内容</div>
</body>

滚动导航

图示：.

css 代码：

<style ref="stylesheet">
    * {
        margin: 0;
        padding: 0;
    }


    .menu>li {
        float: left;
        list-style: none;
        width: 60px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        overflow: hidden;
    }

    .show {
        height: 30px;
        width: 60px;
        background-color: red;
        transition: margin 0.3s;
    }

    .click {
        height: 30px;
        width: 60px;
        background-color: yellow;
        transition: margin 0.3s;
    }

    .clear::after, .clear::after {
        display: block;
        content: "";
        clear: both;
    }

    .menu>li:hover>.show {
        margin-top: -30px;
    }
</style>

html 代码：

<body>
    <ul class="menu clear">
        <li>
            <p class="show">首页</p>
            <p class="click">首页</p>
        </li>
        <li>
            <p class="show">视频</p>
            <p class="click">视频</p>
        </li>
        <li>
            <p class="show">电影</p>
            <p class="click">电影</p>
        </li>
    </ul>
    <div>其他内容</div>
</body>

百度菜单

图示：.

css 代码：

 <style ref="stylesheet">
    * {
        margin: 0;
        padding: 0;
    }

    .menu {
        position: fixed;
        bottom: 100px;
        right: 100px;
    }

    .menu>li {
        width: 60px;
        height: 30px;
        /* 文本水平居中 */
        text-align: center;
        /* 文本垂直居中 */
        line-height: 30px;
        /* 清除 “黑点” */
        list-style: none;

        /* 将 li 元素设置为 .click 的参照物 */
        position: relative;

        /* 隐藏多余元素 */
        overflow: hidden;
    }

    .show {
        width: 60px;
        height: 30px;
        background-color: wheat;
    }

    .click {
        width: 60px;
        height: 30px;
        background-color: yellow;
        /* 绝对定位覆盖原来的元素背景 */
        position: absolute;
        top: 0;
        left: 0;
        /* transform-origin: 0 0;
        transform: rotate(90deg); */
        transform-origin: -30px 0;
        /* 旋转 45° */
        transform: rotate(45deg);
        /* 过渡效果，设置时间 <= 0.5s */
        transition: transform 0.4s;
    }

    .menu>li:hover>.click {
        /* 回到起始位置 */
        transform: rotate(0deg);
    }
</style>

html 代码：

<body>
    <ul class="menu clear">
        <li class="clear">
            <p class="show">首页</p>
            <p class="click">首页</p>
        </li>
        <li class="clear">
            <p class="show">视频</p>
            <p class="click">视频</p>
        </li>
        <li class="clear">
            <p class="show">电影</p>
            <p class="click">电影</p>
        </li>
    </ul>
    <div>其他内容</div>
</body>

动画效果

动画与过渡的区别：

过渡效果：通常用户与浏览器进行交互（例如 hover）。

动画效果：可以交互，也可以在网页加载时直接执行，并且可以让效果更复杂。

动画属性（animation）

animation-name：规定需要绑定到选择器的 keyframe 名称

animation-duration：规定完成动画所花费的时间，以秒或毫秒计

animation-timing-function：规定动画的速度曲线

animation-delay：规定在动画开始之前的延迟

animation-iteration-count：规定动画应该播放的次数

animation: anim 5s linear 1s infinite;

@keyframes anim {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

等价于：

@keyframes anim {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

keyframes

按百分比指定动画
form ... to ... 指定动画 0% 100%

注意：开始与结束相同，可以让动画更平滑

CD 旋转效果

停止动画效果

animation-play-state: paused;

注意：谁使用动画，就停止谁

音乐播放器

图示：.

css 代码：

<style ref="stylesheet">
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        width: 200px;
        height: 200px;
        margin: 100px auto 10px;
        border-radius: 50%;
        overflow: hidden;
        animation: anim 6s linear infinite;
    }

    .box>img {
        width: 200px;
        height: 200px;
    }

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

    @keyframes anim {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }
    audio {
        display: block;
        margin: 0 auto;
    }
</style>

html 代码：

<body>
    <div class="box">
        <img src="https://img2.baidu.com/it/u=2875118436,2421093614&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=400" alt="">
    </div>
    <audio src="" controls></audio>
</body>

flex 布局

flex 布局又叫弹性布局（或者叫弹性盒子布局），这是一种更先进的布局方式，可以让网页布局更简洁，更易于维护。

main axis：主轴

cross axis：交叉轴

基本概念

将元素设置为

display: flex;

元素会变为一个 flex 容器。

容器内部的元素为 flex 元素或者叫 flex 项目（flex-item）。

flex 容器中的默认效果

flex 项目在 flex 容器中延主轴排列。
flex 项目高度适应 flex 容器高度（同行内元素）。

设置 flex 容器

前情提要：这是 flex 容器的 css 样式，注意书写位置。

flex-direction：设置 flex 项目排列方向

justify-content：flex 项目主轴排列方式

align-items：flex 项目在交叉轴的排列方式

flex-direction

`row`

主轴为水平方向，起点在左端。（默认值）

display: flex;
flex-direction: row;

`row-reverse`

主轴为水平方向，起点在右端。

display: flex;
flex-direction: row-reverse;

注意：此时 123 在最右边，而不是 789。

`column`

主轴为垂直方向，起点在上沿。

display: flex;
flex-direction: column;

`column-reverse`

主轴为垂直方向，起点在下沿。

display: flex;
flex-direction: column-reverse;

注意：此时 123 在最下面，而不是 789

justify-content

`flex-start`

左对齐（默认值）

display: flex;
justify-content: flex-start;

`flex-end`

右对齐

display: flex;
justify-content: flex-end;

注意：此时 789 在最右边，而不是 123。与上面的 flex-direction: row-reverse; 区分开来

`center`

居中

display: flex;
justify-content: center;

`space-between`

两端对齐，项目之间的间隔都相等

display: flex;
justify-content: space-between;

`space-around`：

每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

display: flex;
justify-content: space-around;

align-item

`flex-start`

交叉轴的起点对齐

display: flex;
align-items: flex-start;

`flex-end`

交叉轴的终点对齐

display: flex;
align-items: flex-end;

`center`

交叉轴的中点对齐

display: flex;
align-items: center;

`stretch`

延伸，如果项目未设置高度或设为 auto，将占满整个容器的高度。（默认值）

display: flex;
align-items: stretch;

flex 项目

前情提要：这是 flex 项目的 css 样式，注意书写位置。

`flex-grow`

属性定义项目的放大比例，默认为 0，空间充足，等比例补全。

 flex-grow: 1;

flex-shrink：

定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。【不常用】

flex-shrink: 1;

flex-basis：

主轴排列为宽度，交叉轴排列为高度，设置 px，默认值为 auto。【不常用】

flex-basis: auto;

`flex`：

综合上面三个样式。

通常 flex 仅仅用来表示 flex-grow 使用。

flex: 1;

效果和 align-item 相同，只是使用的位置不同（一个对容器使用，一个对项目使用）。

align-self: center;

案例

设置一个元素在容器中水平垂直居中

<style ref="stylesheet">
    * {
        margin: 0;
        padding: 0;
    }
    /* 将背景设置为 100%，需要设置该容器的所有父类的 height 为 100% */
    body,html {
        height: 100%;
    }
    .container {
        height: 100%;
        background-color: yellow;
        display: flex;
        /* 水平居中 */
        justify-content: center;
        /* 垂直居中，方式 1 */
        /* align-items: center; */
    }
    .item {
        width: 300px;
        height: 200px;
        background-color: red;
        /* 垂直居中，方式 2 */
        align-self: center;
    }
</style>

<body>
    <div class="container">
        <div class="item">123</div>
    </div>
</body>

底部导航栏

<style ref="stylesheet">
    * {
        margin: 0;
        padding: 0;
    }
    .menu {
        display: flex;
        /* 水平对齐 */
        justify-content: space-around;
        /* 垂直对齐 */
        align-items: center;

        position: fixed;
        bottom: 0;

        /* 定位元素宽度默认为适应容器内元素的宽度 */
        width: 100%;

        height: 70px;

        background-color: yellow;

    }

    .sub {
        /* 文本对齐 */
        text-align: center;
    }

    .sub img {
        height: 30px;
    }
</style>

<body>
    <div class="menu">
        <div class="sub">
            <img src="图片地址" alt="">
            <p>首页1</p>
        </div>
        <div class="sub">
            <img src="图片地址" alt="">
            <p>首页2</p>
        </div>
        <div class="sub">
            <img src="图片地址" alt="">
            <p>首页3</p>
        </div>
        <div class="sub">
            <img src="图片地址" alt="">
            <p>首页4</p>
        </div>
        <div class="sub">
            <img src="图片地址" alt="">
            <p>首页5</p>
        </div>
    </div>
</body>

grid 布局

概述

flex 布局是一维布局，grid 布局是二维布局。
flex 考虑的是项目按行或列布局，grid 布局需要同时考虑行和列。

设置 grid 容器

按具体像素

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}

按比例

.container {
    display: grid;
    grid-template-columns: 100px 1fr 2fr;
    grid-template-rows: 100px 100px 100px;
}

grid-auto-flow: column; 元素纵向排列

.container {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 100px 1fr 2fr;
    grid-template-rows: 100px 100px 100px;
}

容器属性

grid 容器 VS 单元格 VS grid 项目

grid 项目在单元格中的对齐方式

justify-items

align-items

.container {
    margin: 50px;
    width: 800px;
    height: 500px;
    border: 1px solid red;

    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;

    /* grid 项目在单元格中的对齐方式 */
    /* 水平对齐 */
    justify-items: center;
    /* 垂直对齐 */
    align-items: center;
}

单元格在整个 grid 容器中的对齐方式

justify-content

align-content

.container {
    margin: 50px;
    width: 800px;
    height: 500px;
    border: 1px solid red;

    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;

    justify-content: center;
    align-content: center;
}

grid-auto-columns

.container {
    margin: 50px;
    width: 800px;
    height: 500px;
    border: 1px solid red;

    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;

    /* 超出（溢出）的列的宽度 */
    grid-auto-columns: 200px;
}

grid-auto-rows

.container {
    margin: 50px;
    width: 800px;
    height: 500px;
    border: 1px solid red;

    display: grid;
    /* grid-auto-flow 默认值为 row */
    grid-auto-flow: row;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;

    /* 超出（溢出）的行的高度 */
    grid-auto-rows: 200px;
}

项目属性

grid-column-start

grid-column-end

grid-column

.first {
    /* grid-column-start: 1; */
    /* grid-column-end: 3; */
    /* 合并单元格 */
    grid-column: 1 / 3;
}

grid-row-start

grid-row-end

grid-row

.first {
    /* 合并单元格 */
    grid-row: 1 / 3;
}

justify-self

align-self

.first {
    justify-self: center;
    align-self: center;
}

实践

<style ref="stylesheet">
    * {
        margin: 0;
        padding: 0;
    }

    .container {
        border: 1px solid red;
        width: 800px;
        margin: 0 auto;

        display: grid;
        grid-template-columns: 600px 200px;
        grid-template-rows: 80px 200px 200px 200px 50px;
    }

    header {
        grid-column: 1 / 3;
        background-color: aquamarine;
    }

    aside {
        background-color: antiquewhite;
        grid-row: 2 / 5;
        grid-column: 2 / 3;

    }

    footer {
        background-color: burlywood;
        grid-column: 1 / 3;
    }
</style>

<body>
    <div class="container">
        <header>
            logo
        </header>
        <div class="docs">
            docs
        </div>
        <aside>
            aside
        </aside>
        <div class="blogs">
            blogs
        </div>
        <div class="videos">
            videos
        </div>
        <footer>
            footer
        </footer>
    </div>
</body>

响应式页面

同一套静态页面代码，在不同的设备中展现出不同的效果。

媒体查询

通过 @media 定义样式，浏览器窗口满足指定条件，才会应用此样式。

<style ref="stylesheet">
    .container {
        width: 200px;
        height: 200px;
        background-color: antiquewhite;
    }
    /* 小于指定宽度，样式才会生效 */
    @media screen and (max-width: 600px) {
        .container {
            width: 400px;
            background-color: burlywood;
        }
    }
	/* 设置多个条件 */
    /* 大于 200px，小于 500px */
    @media screen and (min-width: 200px) and (max-width: 500px) {
        .container {
            width: 300px;
            background-color: darkorchid;
        }
    }
</style>

响应式页面的优点与缺点

优点：一套页面适应多端设备，提升开发效率。

缺点：页面效果不及单独为某一终端定制的页面效果，性能问题，维护成本提升。

总结：大部分项目不会整体采用响应式页面的解决方案。

制作响应式页面

手机端效果：

电脑端效果：

<style ref="stylesheet">
    .container {
        width: 800px;
        margin: 0 auto;
        background-color: antiquewhite;

        display: flex;
        justify-content: center;
    }
    .item {
        width: 100px;
        border: 1px solid red;
    }

    @media screen and (max-width: 700px) {
        .container {
            width: 100%;
            flex-direction: column;
        }
        .item {
            width: 100%;
        }
    }
</style>

<body>
    <div class="container">
        <div class="item">文档</div>
        <div class="item">博客</div>
        <div class="item">视频</div>
    </div>
</body>

使用 rem 单位设置移动端页面尺寸

单位概述

px：像素

em：相对于父级的 font-size 值

rem：相对于 html 标签的 font-size 值【html {font-size: 30px;} 1rem 代表 30px; 10rem 代表 300px;】

html {
    font-size: 30px;
}

通过 js 文件，根据浏览器的视窗宽度设置 html 元素的 fontsize 值

(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';

750：设计稿的宽度

100：基数

clientWidth 为浏览器视窗宽度

如果浏览器视窗宽度为 750px，那么 html 的 font-size 为 100px

100px = 1rem

100% = 750px = ?rem;

结果为：7.5 rem;

如果浏览器视窗宽度为 375px，那么 html 的 font-size 为 50px

50px = 1rem

100% = 375px = ?rem;

结果为：7.5 rem;

posted @ 2023-03-15 14:18 软柠柠吖阅读(12) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

热爱学习的好孩子🥳

css

CSS

选择器

CSS 选择器【常用 】

CSS 属性【常用】

选择器【扩展】

选择器权重

设置最高权重

引入 css 的方法

盒子模型

有关盒子模型的 css 属性

盒子模型水平居中

盒子模型边距初始化

默认情况：元素宽度和高度计算

设置 box-sizing: border-box;

列表的样式

HTML 元素的分类

display 属性

两个 div 在同一行显示

浮动元素的特性

空 div 清除浮动

伪元素清除浮动

CSS 定位（position）

绝对定位：absolute

相对定位：relative

固定定位：fixed

设置参照物

坐标属性（非定位元素不起作用）

HTML 5 新特性

HTML 5 布局元素

媒体元素

媒体元素属性

CSS 3 新特性

圆角

阴影

形变

设置旋转原点

让一个元素在网页中水平垂直居中

案例

过渡效果

transition（过渡）

overflow

下拉菜单

滚动导航

百度菜单

动画效果

动画与过渡的区别：

动画属性（animation）

keyframes

CD 旋转效果

flex 布局

基本概念

flex 容器中的默认效果

设置 flex 容器

flex-direction

row

row-reverse

column

column-reverse

justify-content

flex-start

flex-end

center

space-between

space-around：

align-item

flex-start

flex-end

center

stretch

flex 项目

flex-grow

flex：

案例

设置一个元素在容器中水平垂直居中

底部导航栏

grid 布局

概述

设置 grid 容器

CSS 选择器【常用】

绝对定位：`absolute`

相对定位：`relative`

固定定位：`fixed`

`row`

`row-reverse`

`column`

`column-reverse`

`flex-start`

`flex-end`

`center`

`space-between`

`space-around`：

`flex-start`

`flex-end`

`center`

`stretch`

`flex-grow`

`flex`：