本文深入探讨CSS3中的元素垂直水平居中方法，包括已知和未知宽高的解决方案，以及使用transform和flex布局实现的技巧。同时，解析animation-timing-function属性的复杂应用，通过实例说明steps和兔斯基动画的实现原理。此外，分享移动端开机动画的2D和3D实例，以及全面介绍flex布局的新老版本特性。
***以下均是自己边看视频边记录下来的笔记，均是自己认为的主要的或需要注意的内容。***
css3_day05
1.元素垂直水平居中的其他方案
1.1.已知宽高
1.1.1.
position:absolute;
left:50%;
top:50%;
margin-left:负的元素自身宽度的50%；
margin-top:负的元素自身高度的50%;
原理：
因为最近的有position属性的非直接父元素是初始包含块，而初始包含块的宽高就是视窗即浏览器窗口的宽高，所以元素top、left取50%的话，那么元素的左上角的点必定在视窗正中心，所以margin-left、margin-top设置为自身的50%的值，且取负值，那么元素的中心就与视窗的中心相重合，那么就成功垂直水平居中。
1.1.2.
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%,0); //这里的50%就是参照元素自身的宽高，这句代码的意思就是水平向左、向右分别平移自身的50%的宽度和高度，而z轴的距离不动。（这里的50%可以变为已知的宽高）
原理：
因为最近的有position属性的非直接父元素是初始包含块，而初始包含块的宽高就是视窗即浏览器窗口的宽高，所以元素top、left取50%的话，那么元素的左上角的点必定在视窗正中心，所以transform:translate(-50%,-50%,0); 设置水平x平移距离和垂直y平移距离为自身的50%的值，且取负值，那么元素的中心就与视窗的中心相重合，那么就成功垂直水平居中。（这里的50%可以变为已知的宽高）
1.1.3.
//元素垂直水平居中的其中一个方案，必须已知元素的宽高，代码如下：
//绝对定位盒模型的特性所产生的垂直水平居中
//元素的样式：
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
//包含块一定得是容器
原理：
left + right +width + pading和margin的left、right = 包含块的宽度
top+ bottom+height+ pading和margin的top、bottom= 包含块的高度
1）水平居中：元素的left、right值设为0，width是元素自身的宽度，元素的padding和margin的left、right默认值也是0，当设置了margin=auto时，它会用包含块的宽度减去元素自身的width值，然后把剩下的包含块的宽度平分给元素margin的left和right，这样元素就水平居中了。
2）垂直居中同理。
1.2.未知宽高
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%,0); //这里的50%就是参照元素自身的宽高，这句代码的意思就是水平向左、向右分别平移自身的50%的宽度和高度，而z轴的距离不动。
原理：
因为最近的有position属性的非直接父元素是初始包含块，而初始包含块的宽高就是视窗即浏览器窗口的宽高，所以元素top、left取50%的话，那么元素的左上角的点必定在视窗正中心，所以transform:translate(-50%,-50%,0); 设置水平x平移距离和垂直y平移距离为自身的50%的值，且取负值，那么元素的中心就与视窗的中心相重合，那么就成功垂直水平居中。
1.3.使img垂直水平居中
//假设一个div容器里面放了一个img，为使img在这个div里居中，这img是inline类型的
div{
text-align:center;
}
div:after{
content:"";
display:inline-block;
height:100%;
vertical-align:middle;
}
img{
vertical-align:middle;
}
原理：
这里的after伪元素是一个替代元素，img也是一个替代元素，
当他们同时使用vertical-align:middle; 时，谁的高度高，
那么就依据这个高度垂直居中。
利用text-align:center; 来水平居中。
2.animation-timing-function的天坑
当我的关键帧如下：
设置了animation-timing-function的属性的值为step(1,end);且
animation-duration:4s；
animation-fill-mode:both；
animation-direction:alternate;
那么它的动画是这样执行的：
先在-100px，停1s后，瞬间下到-90px的位置，在这里再听1s后，瞬间下到0px的位置，以此类推，如下图。所以他一个动画周期的4s中永远不会到达100px。最后为什么它能到达100px呢？是因为animation-fill-mode：both这个属性定义了to之后的状态与to的状态一致，所以在最后一个4s的动画周期结束后，图形从90px瞬间到达100px。
3.animation-timing-function关于step的实例：兔斯基（steps(12,end)里面的end难理解）
该实例是自己看完视频后，凭自己的理解敲的，代码如下，直接复制即可使用（若有错误，在评论区指出，谢谢）：
难点的地方有解释，要联系前面的第“2.animation-timing-function的天坑”的内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
.tsj{
position: absolute;
top: 50%;
left: 50%;
margin-left: -24px;
margin-top: -24px;
height: 48px;
width: 48px;
/* background-color: pink; */
background: url(img/animation.png) no-repeat;
background-position: 0 0;
/* 我们图片的初始位置就是动画的第一帧,那么其实我们只用走11步就能把总长12帧的图片走完。设置为steps(12,end)，因为是end,所以不能走到第12步,只能走完第11步,符合我们的需要. */
animation: move .8s steps(12,end) infinite;
}
@keyframes move{
from{
background-position: 0 0;
}
to{
/* 当图片位置移到动水平位置-576px时,其实这时div的框框显示的是空白的48px * 48px的图,刚刚好这是动画原本走的第12步,由于上面的animation的step设置了12,所以刚好第12步即这张空白图片是走不到的 ，因此最后的一步刚好是这张图的最后一帧*/
background-position: -576px 0;
}
}
</style>
</head>
<body>
<div class="tsj"></div>
</body>
</html>
4.transform只对块级元素有效
5.开机动画（移动端)——实例（2d）
该实例是自己看完视频后，凭自己的理解敲的，代码如下，直接复制即可使用（若有错误，在评论区指出，谢谢）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
.wrap{
position: relative;
height: 100%;
background-color: gray;
}
.wrap > .inner{
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%,0);
white-space: nowrap;
}
.wrap > .inner > span{
position: relative;
}
@keyframes move{
from{
top: 0;
}
to{
top: -10px;
}
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">
<span>几</span>
<span>百</span>
<span>斤</span>
<span>的</span>
<span>P</span>
<span>P</span>
<span>D</span>
<span>还</span>
<span>要</span>
<span>装</span>
<span>可</span>
<span>爱</span>
</div>
</div>
</body>
<script type="text/javascript">
var spanNodes = document.querySelectorAll(".wrap > .inner > span");
var colorB = ["red","orange","yellow","green","blue","pink","deeppink","red","orange","yellow","green","blue","pink","deeppink"];
for(var i = 0 ; i < spanNodes.length ; i++){
spanNodes[i].style.animation="move .5s "+(i*0.1)+"s linear infinite alternate";
spanNodes[i].style.color=colorB[i];
}
</script>
</html>
5.开机动画（移动端)——实例（3d）
该实例是自己看完视频后，凭自己的理解敲的，代码如下，直接复制即可使用（若有错误，在评论区指出，谢谢）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
.wrap{
height: 100%;
perspective: 500px;
}
.wrap > .inner{
height: 100%;
position: relative;
transform-style: preserve-3d;
}
.wrap > .inner > img{
width:30% ;
margin-top: -123px;
animation: move 2s linear infinite ;
}
.wrap > .inner > p{
font-size: 56px;
}
.wrap > .inner > img,.wrap > .inner > p{
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%,-50%,0) rotateY(0deg);
}
@keyframes move{
from{
transform:translate3d(-50%,-50%,0) rotateY(0deg);
}
to{
transform:translate3d(-50%,-50%,0) rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">
<img src="img/load/logo3.png" >
<p>已加载0%</p>
</div>
</div>
</body>
<script src="js/data.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload=function(){
var arr = [];
var flag = 0;
var pNode = document.querySelector(".wrap > .inner > p");
for(item in imgData){
arr = arr.concat(imgData[item]);
}
// debugger
for(var i = 0; i < arr.length; i++){
var img = new Image();
img.src=arr[i];
img.onload=function(){
flag++;
pNode.innerHTML = "已加载"+(Math.round(flag/arr.length*100))+"%";
}
img.onerror=function(){
console.log("地址有问题");
}
}
}
</script>
</html>
6.flex布局
定义：也叫css3弹性盒子，是一种用于在页面上布置元素的布局模式。
弹性盒模型分老版本和旧版本，老版本的叫box，新版本叫flex。
因为很多移动端浏览器内核版本都超低，只支持box，所以要学习老版本的弹性盒模型。
学习这个布局需要知道如下点：
1） flex容器
2） flex项目
3） 主轴
4） 侧轴
5） 项目永远在主轴的正方向上排列
6.1.老版本
6.1.1.容器
6.1.1.1.容器的布局方向
6.1.1.1.1.-webkit-box-orient（属性）
定义：定义主轴是哪一个根。
取值：
vertical：定义垂直向下的为主轴（也就是竖直向下的y轴）。（自然水平向右的为侧轴(也就是水平向右的x轴））
horizontal：定义水平向右的为主轴。（自然竖直向下的为侧轴）
6.1.1.1.2.-webkit-box-direction——叫做容器排列方向（属性）
定义：定义主轴正方向。（但并不影响侧轴的正方向）
取值：
normal：按主轴的默认方向排列。
reverse：按主轴默认的方向的反方向排列。
6.1.1.2.-webkit-box-pack——容器的主轴的富裕空间
定义：在主轴方向上，容器之内，项目之外，留空的位置。
取值：
start:富裕空间在右边（x）或下边（y）。
end:富裕空间在左边（x）或上边（y）。
center:富裕空间在两边。
justify:富裕空间在项目之间，但是最外侧的两个项目的各自的最外侧紧贴容器。
6.1.1.3.-webkit-box-align——容器的侧轴的富裕空间
定义：在侧轴方向上，容器之内，项目之外，留空的位置。
取值：
start:富裕空间在右边（x）或下边（y）。
end:富裕空间在左边（x）或上边（y）。
center:富裕空间在两边。
6.1.2.项目
6.1.2.1.弹性空间管理
定义：是将主轴上的富裕空间按比例分配到项目的width或height上。
6.2.新版本
6.2.1.容器
6.2.1.1.容器的布局方向
6.2.1.1.1.flex-direction（属性）
定义：定义主轴是哪一个根而且还能定义主轴的正方向。
取值：
row：定义行是主轴，且正方向是水平向右。
column：定义列是主轴，且正方向是竖直向下。
row-reverse:定义主轴是行，且正方向水平向左。
column-reverse:定义主轴是列，且正方向竖直向上。
6.2.1.2.justify-content——容器的主轴的富裕空间
定义：在主轴方向上，容器之内，项目之外，留空的位置。
取值：
flex-start:富裕空间在主轴的正方向上。
flex-end:富裕空间在主轴的反方向上。
center:富裕空间在主轴的两边。（可以理解为整体项目两边）
space-between:富裕空间在项目之间。
space-around:富裕空间在单个项目两边。
6.2.1.3.align-items——容器的侧轴的富裕空间
定义：在侧轴方向上，容器之内，项目之外，留空的位置。（项目只有一行或一列时，由它控制侧轴的富裕空间）
取值：
flex-start:富裕空间在侧轴的正方向。
end:富裕空间在侧轴的反方向。
center:富裕空间在侧轴的两边。
stretch:等高布局。
6.2.2.项目
6.2.2.1.弹性空间管理
flex-grow
定义：是将主轴上的富裕空间按比例分配到项目的width或height上。
6.2.3.新增的属性
容器
6.2.3.1.flex-wrap
定义：控制了容器为单行还是多行，或是，单列还是多列。并且定义了侧轴的方向，新的行或列沿侧轴方向堆砌。
6.2.3.2.align-content
定义：当项目是多行或多列时，侧轴的富裕空间的位置就由align-content指定。
6.2.3.3.flex-flow
定义：是flex-direction和flex-wrap的简写。
项目
6.2.3.4.order
定义：规定了容器里项目在布局时的顺序。
6.2.3.5.algin-self
定义：管理单个项目的富裕空间。
6.2.3.6.flex-grow
定义：定义了弹性盒子项（flex item）的拉伸因子。
6.2.3.7.flex-shrink
定义：定义了弹性盒子项（flex item）的拉伸因子。
6.3.总结
1.老版本
容器
容器的布局方向
-webkit-box-orient:horizontal/vertical
控制主轴是哪一根
horizontal：x轴
vertical ：y轴
容器的排列方向
-webkit-box-direction：normal/reverse
控制主轴的方向
normal：从左往右（正方向）
reverse：从右往左（反方向）
富裕空间的管理
只决定富裕空间的位置，不会给项目区分配空间
主轴
-webkit-box-pack
主轴是x轴
start：在右边
end: 在左边
center：在两边
justify：在项目之间
主轴是y轴
start：在下边
end：在上边
center：在两边
justify：在项目之间
侧轴
-webkit-box-algin
侧轴是x轴
start：在右边
end： 在左边
center：在两边
侧轴是y轴
start：在下边
end： 在上边
center：在两边
项目
弹性空间管理
-webkit-box-flex：弹性因子（默认值为0）
2.新版本
容器
容器的布局方向
容器的排列方向
flex-direction
控制主轴是哪一根，控制主轴的方向
row; 从左往右的x轴
row-reverse;从右往左的x轴
column; 从上往下的y轴
column-reverse;从下往上的y轴
富裕空间的管理
只决定富裕空间的位置，不会给项目区分配空间
主轴
justify-content
flex-start： 在主轴的正方向
flex-end: 在主轴的反方向
center： 在两边
space-between： 在项目之间
space-around： 在项目两边
侧轴
align-items
flex-start：在侧轴的正方向
flex-end： 在侧轴的反方向
center： 在两边
base#ne 基线对齐
stretch 等高布局（项目没有高度）
项目
弹性空间管理
flex-grow：弹性因子（默认值为0）
扫一扫
356
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
