六.变换与动画
1.变化
在网页开发中，常常需要对图像进行一定的变化，如旋转等。
在CSS中，我们可以使用transform语句实现多种变换，如下述的rotate语句将实现元素的旋转。
1
2
3
4
5
6
.test{
width: 100px;
height: 100px;
background-color: deepskyblue;
transform:rotate(45deg);
}
其中，rotate内填的便是旋转度数deg。
同样是transform的变换形式包括translate，即将某一元素进行移动
1
2
3
4
5
6
.new{
width: 100px;
height: 100px;
background-color: orangered;
transform:translate(100px,20px);
}
translate的两个参数分别为x轴和y轴，与之前的定义一致。
通过这个属性，我们可以实现一定的动态效果。
1
2
3
4
5
6
7
8
9
.new{
width: 100px;
height: 100px;
background-color: orangered;
transition: transform 0.3s;
}
.new:hover{
transform:translate(100px,0);
}
hover是之前的伪类选择器，即停留在上方会进行指定的CSS变换。
其中transition是过度语句，可以给特定的语句指定过渡时间
除了上述的两种变换外，还有scale语句来实现缩放
1
2
3
.new:hover{
transform:scale(1.5);
}
其中的数字便是缩放的倍数。
上述的transform语句的参照物是元素的几何中心，想改变这个中心就需要调整锚点，这时使用的便是transform-origin语句。
1
2
3
4
.test:hover{
transform:rotate(45deg);
transform-origin:right bottom;
}
2.过渡
在变换的过程中我们已经使用了过渡语句transition
其中transition包括多个子属性：
| 属性 | 作用 |
|---|---|
| transition-property | 指定要过渡的标签，可以使用通配符all来指定全部标签。 |
| transition-duration | 指定过渡持续的时间，单位为s或ms |
| transform-timing-function | 指定要过渡的时间函数，用于控制过渡的速度曲线，常见的值包括ease、linear、ease-in、ease-out、ease-in-out |
| transition-delay | 指定过渡的延迟时间，单位与transition-duration相同。 |
1
2
3
4
5
6
7
.test{
width: 100px;
height: 100px;
background-color: deepskyblue;
margin:40px;
transition: transform 0.3s ease 3s;
}
transition在传参时便可以直接传入对应的这四个值。
3.动画
在CSS中提供了animation语句来帮助我们实现动画效果
| 属性 | 描述 |
|---|---|
animation-name |
指定由 @keyframes 描述的关键帧名称 |
animation-duration |
设置动画一个周期的时长 |
animation-delay |
设置延时，即从元素加载完成之后到动画序列开始执行的这段时间 |
animation-direction |
设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行 |
animation-iteration-count |
设置动画重复次数， 可以指定 infinite 无限次重复动画 |
animation-play-state |
允许暂停和恢复动画 |
animation-timing-function |
设置动画速度， 即通过建立加速度曲线，设置动画在关键帧之间是如何变化 |
animation-fill-mode |
规定元素在不播放动画时的样式（在开始前、结束后，或两者同时） |
下述代码实现了一个简单的加载动画：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@keyframes animation_move {
0%{
transform: rotate(0);
}
100%{
transform: rotate(360deg);
}
}
.animation{
width:100px;
height: 100px;
border-radius: 100%;
background-image:url("loading.jpg");
background-size: contain;
animation-name:animation_move;
animation-duration:5s ;
animation-iteration-count:infinite;
animation-timing-function: linear;
}
通过linear可以实现丝滑的动画效果。
也可以使用animation-play-state来实现特定的效果，如鼠标悬停时停止动画
1
2
3
.animation:hover{
animation-play-state: paused;
}
注意：关键帧的实现不一定非要使用transform，也可以使用position来实现位置的转换，并在@keyframes内直接写坐标即可。
1
2
3
4
5
6
7
8
9
10
@keyframes animation_move {
0%{
left:0;
top:0;
}
100%{
left:100px;
top:100px;
}
}
七.flex布局
Flexbox布局，简称Flex布局/弹性盒子布局。
它的主要思想是使父级元素能够调整后代元素的宽度、高度、排列方式，从而更好的适应可用的布局空间。
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器”。它的所有 子元素自动成为容器成员，称为 Flex 项目（flex item），简称“项目”。
如：
1
2
3
4
5
6
<div class="div">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
其中，div被称为容器，child被称为项目。
通过将display的参数调为flex，即可打开flex布局。
1
2
3
4
.div{
display:flex;
justify-content: space-between;
}
flex布局将容器分为了两个轴：主轴和交叉轴
1.容器属性
flex布局中常用的一些容器的属性包括以下内容：
| 属性 | 作用 |
|---|---|
| flex-direction | 决定主轴的方向 |
| justify-content | 定义了项目在主轴上的对齐方式 |
| align-items | 定义项目在交叉轴上如何对齐 |
| flex-wrap | 定义超出轴线的内容如何处理 |
| flex-flow | flex-direction和flex-wrap的复合属性 |
| align-content | 适应多行情况的align-items |
a.flex-direction
首先介绍flex-direction，语句的参数决定了容器内元素的排列顺序和方式。
| 属性值 | 含义 |
|---|---|
| row | 默认值，主轴为水平方向（水平布局），起点在左端，从左向右排列 |
| row-reverse | 主轴为水平方向（水平布局），起点在右端，从右向左排列 |
| column | 主轴为垂直方向（垂直布局），起点在上沿，从上往下排列 |
| column-reverse | 主轴为垂直方向（垂直布局），起点在下沿，从下往上排列 |
1
2
3
4
.div{
display:flex;
flex-direction: column-reverse;
}
如上述语句将实现div下的元素按竖着的方向从后往前排序。
b.justify-content
之后则是justify-content，决定了项目在主轴上的对齐方式
| 属性值 | 含义 |
|---|---|
| flex-start | 默认值，左对齐 |
| flex-end | 右对齐 |
| center | 居中 |
| space-between | 两端对齐，项目之间的间隔都相等 |
| space-around | 每个项目两侧的间隔相等。 |
| space-evenly | 均匀排列每个元素，与space-around有一定区别 |
其中，space-around和space-evenly的相同之处在于，为了使视觉效果更好，调整了元素之间距离相等，且最外侧增加了一定的边界。区别在于，space-around两边的宽度为元素间距的一半，而space-evenly则直接与间距相等。
1
2
3
4
5
.div{
display:flex;
flex-direction: row;
justify-content: space-evenly;
}
c.align
align中的align-items调整了元素在交叉轴(纵轴)的对齐方式
| 属性值 | 含义 |
|---|---|
| flex-start | 交叉轴的起点对齐 |
| flex-end | 交叉轴的终点对齐 |
| center | 交叉轴的中点对齐 |
| baseline | 项目的第一行文字的基线对齐 |
| stretch | （默认值） 如果项目未设置高度或设为auto，将占满整个容器的高度 |
而align-content则可以在调整行内元素的同时对交叉轴方向的内容进行排列，如space-evenly等
d.flex-wrap和flow
flex-wrap决定了当容器内一行放不下所有元素使该如何进行排列。
| 属性值 | 含义 |
|---|---|
| nowrap | 默认值，表示不换行 |
| wrap | 换行 |
| wrap-reverse | 换行，第一行在下方 |
而flex-flow则是flex-direction和flex-wrap的结合，方便我们对这两个参数进行调整。
1
2
3
4
5
6
.div{
height: 1000px;
display:flex;
flex-flow:row wrap;
justify-content: space-evenly;
}
2.项目属性
项目属性是在对容器中的项目定义的属性，可以决定项目在容器中的排列方法。
| 项目属性 | 作用 |
|---|---|
| order | 定义项目的排列顺序，数值越小排名越前。 |
| flex-grow | 定义项目的放大比例，默认为 0。flex会根据剩余空间与放大比例的大小来分配项目的大小 |
| flex-shrink | 定义了项目的缩小比例，默认为 1 。当值为0时，则项目不会收缩。 |
| flex-basis | 定义了在分配多余空间之前，项目占据的主轴空间(main size)，浏览器根据这个属性，计算主轴是否有多余空间。 |
| flex | flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。 |
| align-self | 调整项目自身的交叉轴对齐状态 |
其中要说明一下margin的auto属性，auto属性可以实现元素的space-around效果，下述两段代码的效果是一样的
1
2
3
4
5
6
7
8
9
10
11
12
.div{
height: 1000px;
display:flex;
flex-flow:row wrap;
justify-content: space-around;
}
.div .child{
width: 100px;
background-color: deepskyblue;
margin:0 auto;
}
margin的auto属性可以实现元素的居中排版，且十分方便。
八.grid布局
flex布局是轴线布局，适用于行或列的情况。而在要同时处理行列的情景下，我们便需要引入新的布局：grid布局(网格布局)。
1.容器属性
容器属性分为grid-template-columns和grid-template-rows。
-
grid-template-columns用于划分列数 -
grid-template-rows用于划分行数
下列代码以grid-template-columns为例介绍如何传入参数。
1
2
3
4
5
6
7
grid-template-columns: 40px 40px;
grid-template-columns: 40% 60%;
grid-template-columns: 1fr 2fr;
grid-template-columns: repeat(5, 1fr);
grid-template-columns: repeat(auto-fill, 600px);
grid-template-columns: repeat(auto-fit, 600px);
grid-template-columns: 100px auto 100px;
其中，若传入多个参数，则每个参数都是一列(rows的话则是一行)
-
如
grid-template-columns: 40px 40px;便是将多个元素分为两列，每列40px。 -
而
grid-template-columns: 40% 60%;则是将多个元素分成两列，其中第一列占容器宽度的40%，第二列占容器宽度的60% -
相对应的
grid-template-columns: 1fr 2fr;则是表示第一列和第二列的宽度比为1:2。
要实现均匀分割，则可以使用repeat()函数，通过多次重复对应的fr值来实现均匀分割，如grid-template-columns: repeat(5, 1fr);。
此外也可以直接使用auto-fill来实现自动分割，会根据容器长度和列宽来自动决定列多少列。
auto-fill和auto-fit的区别：
以下列内容为例，假设有一个网格容器，其宽度为1000px，我们想要在其中创建宽度至少为200px的列。
- 使用
repeat(auto-fill, minmax(200px, 1fr))时，网格会根据可用空间创建尽可能多的列，直到没有足够空间添加另一个完整的200px列为止。如果剩余空间不足以放下一个完整的列，则这些空间不会被用于创建额外的列。 - 使用
repeat(auto-fit, minmax(200px, 1fr))时，网格同样会根据可用空间创建尽可能多的列。但是，如果放置完所有网格项后还有剩余空间，这些空间会被分配给已存在的列，使它们更宽。如果网格项数量很少，比如只有一个网格项，那么这个网格项可能会扩展到填满整个容器。
2.行列间距
通过row-gap和column-gap可以实现行列间距的划分
1
2
3
4
5
6
7
8
9
.grid{
width: 240px;
height: 200px;
background-color: gray;
display:grid;
grid-template-columns:1fr 1fr 2fr;
row-gap: 2px;
column-gap:3px;
}
其中两个gap也可以缩写为一个。传入一个参数时行列间距均为该参数。传入两个参数时则分别为行间距和列间距。
1
2
gap:5px;
gap:1px 2px;
3.容器对齐方式
容器对齐方式分为
| 对齐方式 | 内容 |
|---|---|
| justify-content | 水平对齐方式，即调整多个列之间的对齐 |
| align-content | 垂直对齐方式，即调整多行之间的对齐 |
以justify-content为例，其参数多于之前flex布局的类似
1
2
3
4
5
6
7
8
9
10
.grid{
width: 240px;
height: 200px;
background-color: gray;
display:grid;
grid-template-columns:40px 40px 40px;
gap:5px;
margin: auto;
justify-content:center;
}
而place-content则是是align-content属性和justify-content属性的合并简写形式。
| 属性值 | 含义 |
|---|---|
| flex-start | 默认值，左对齐 |
| flex-end | 右对齐 |
| center | 居中 |
| space-between | 两端对齐，项目之间的间隔都相等 |
| space-around | 每个项目两侧的间隔相等。 |
| space-evenly | 均匀排列每个元素，与space-around有一定区别 |
4.单元格对齐方式
与容器对齐方式相似，单元格对齐方式也分为justify和align，即
| 对齐方式 | 内容 |
|---|---|
| justify-items | 水平对齐方式，即调整单元格内水平方向的对齐 |
| align-items | 垂直对齐方式，即调整单元格内垂直方向的对齐 |
| place-items | align-items属性和justify-items属性的合并简写形式 |
单元格对齐方式的应用场景是，若单元格内元素无法将单元格占满，存在空余空间且需要调整时，使用单元格对齐方式来调整单元格内元素的对齐。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.grid .child{
width: 20px;
height:20px;
background-color: deepskyblue;
border:1px solid red;
}
.grid{
width: 240px;
height: 200px;
background-color: gray;
display:grid;
grid-template-columns:40px 40px 40px;
gap:5px;
margin: auto;
justify-content:center;
justify-items: center;
}
如上述语句中，项目的长宽为20px，小于单元格的40px，因此会有空余空间可以进行justify-items操作。
注：单元格对齐方式也是针对于容器的设置，应该写在容器对应的标签下。
此外可以对单一项目进行设置，只需要将对应的items改为self即可，此时对象为项目而非容器。且其优先级大于justify-items。
1
2
3
.grid>.child:nth-child(5){
justify-self: left;
}
5.grid项目属性
在gird布局中我们可以设置一个单元格的延展。
如：
1
2
3
4
.grid>.child:nth-child(8){
grid-column-start: 2;
grid-column-end: 4 ;
}
上述代码实现了nth-child(8)的延展，让他从第2列开始延展至第4列结束，这一过程是不包含第4列的。
1
2
3
4
grid-column-start: 开始的列数;
grid-column-end: 结束的列数(不包含本身);
grid-row-start: 开始的行数;
grid-row-end: 结束的行数(不包含本身);
如：
1
2
3
4
5
6
.grid>.child:nth-child(5){
grid-column-start: 2;
grid-column-end: 4 ;
grid-row-start: 2;
grid-row-end: 4;
}
九.CSS栅格化
栅格化强调将页面的容器进行一定比例的等分，我们可以通过设置flex的百分比来实现比例效果。
1
2
3
4
5
<div class="row table">
<div class="col-1" style="background-color: deepskyblue"></div>
<div class="col-3" style="background-color: cornflowerblue"></div>
<div class="col-6" style="background-color: blue"></div>
</div>
其中我们要将col-nun事先进行定义，下述代码至展示三个col的定义语句。
1
2
3
4
5
6
7
8
9
10
11
12
13
.row {
display: flex;
height: 100px;
}
.col-1 {
flex: 0 0 10%;
}
.col-3 {
flex: 0 0 30%;
}
.col-6 {
flex: 0 0 60%;
}
栅格化是UI组件库的基础，常见的UI组件库如即下即用的Bootstrap (https://www.bootcss.com/) 能够十分方便的调用组件，实现网页的快速开发。
