flex布局
响应式布局
过度
动画
flex布局
学习目的：基于之前所学的盒模型布局（display）、浮动布局（float）、定位布局（position），都不能很好的解决block垂直居中的问题。
flex布局：相当于一个容器（container），容器内的标签会成为该容器的项目（item）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局</title>
<style>
.container{
width: 300px;
height: 300px;
border: 1px solid black;
margin: 0 auto;
display: flex;
}
.item{
color: white;
text-align: center;
font-size: 20px;
line-height: 100px;
/*width: 100px;*/
height: 100px;
background-color: blue;
border-radius: 50%;
/*默认只能一行排列，所以item总宽不允许超过容器（container）的宽度*/
/*默认情况下item可以不规定高度时，高度会自适应父级*/
}
/* .it1,.it3{
flex-grow: 1;
}
.it2{
flex-grow: 3;
}*/
/*item没有设置宽度下，可以通过比例（flex-grow）决定对于父级的占比*/
/*wrap例子*/
/* .it1{
width: 200px;
}
.it3{
width: 300px;
}*/
.container{
/*flex-direction: :row(同行显示)|column（一列显示）|row-reverse（反转显示）;*/
/*flex-wrap: wrap(换行)| nowrap(不换行，默认)|wrap-reverse（换行并且反转显示）;*/
/*水平对齐方式:justify-content: flex-start|center|space-between|flex-end|space-around*/
justify-content: space-around;
}
</style>
</head>
<body>
<div class="container">
<div class="item it1"></div>
<div class="item it2"></div>
<div class="item it3"></div>
</div>
</body>
</html>
flex总结：
1.将父级display属性设置为flex，父级成为container，子级成为item。
2.container设置item的排列方向flex-direction。
3.item对于container的空间占比flex-grow。
响应式布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>响应式布局</title>
<style>
/*基本样式块*/
.box{
max-width: 1200px;
width: 80%;
background-color: pink;
margin:0 auto;
}
.it{
border-radius: 50%;
width:300px;
height: 300px;
background-color: blue;
float: left;
}
.box:after{
content: "";
display: block;
clear: both;
}
/*屏幕宽度超出1200px*/
@media only screen and (min-width: 1200px){
.box{
background-color: #d47856;
}
}
/*屏幕宽度间于600~1200px*/
@media only screen and (min-width: 600px) and (max-width: 1200px){
.box{
background-color: cyan;
}
}
/*屏幕宽度小于600px*/
@media only screen and (max-width: 600px){
.box{
background-color: #d3efed;
}
}
</style>
</head>
<body>
<div class="box">
<div class="it"></div>
<div class="it"></div>
<div class="it"></div>
<div class="it"></div>
<div class="it"></div>
<div class="it"></div>
<div class="it"></div>
<div class="it"></div>
<div class="it"></div>
</div>
</body>
</html>
原则：
1.采用响应式布局的页面，基本样式只做共性样式设置，需要根据页面尺寸进行适应化变化的样式均由响应式布局处理。
2.要进行响应式布局的页面要处理所有屏幕尺寸下的样式块。
响应式布局总结：
1.在响应式布局内，css语法同正确样式表语法。
2.响应式布局之间存在不同屏幕尺寸的限制，所以样式相互不要影响。（满足当前屏幕尺寸是，该样式块起作用，不满足时，则样式块失效）
3.当响应式布局中样式块起作用时，会与正常样式块设置协同布局，遵循选择器的优先级规则。
过度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>过度案例</title>
<style>
.box{
width: 300px;
height: 300px;
margin: 0 auto;
border-bottom: 1px solid black;
position: relative;
}
.line{
width: 30px;
height: 30px;
background-color: orange;
position: absolute;
bottom: 0;
transition: .4s ease;
left: 120px;
}
.line:hover{
height: 200px;
}
.b{
width: 30px;
height: 10px;
border-radius: 50%;
background-color: #333;
position:absolute;
bottom: -5px;
}
.t{
width: 30px;
height: 10px;
border-radius: 50%;
background-color: #333;
position:absolute;
top: -5px;
}
</style>
</head>
<body>
<div class="box">
<div class="line">
<div class="t"></div>
<div class="b"></div>
</div>
</div>
</body>
</html>
过度：从一个状态以动画的方式变成另一种状态的变化过程就叫做过度，过度效果通过hover产生，可以制作一个hover层，（hover层处理方式：与显示层区域同等大小）
过度的属性：
持续时间：transition-duration: 0.3s;
延迟时间：transition-delay: 1s；
过度属性：transition-property: all;
过度曲线：transition-timing-function: linear;（一般用贝塞尔曲线）
整体设置：transition: all 0.3s 0.1s linear;
一般的设置会产生一个问题（当鼠标停在某处动画一直不停切换）：
需要在有动画的标签外嵌套一层利用外面层的hover属性来实现内层的动画效果
动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<style>
.box{
height: 200px;
width: 200px;
background-color: orange;
}
/*动画样式*/
.box{
/*绑定动画名*/
animation-name: wasai;
/*持续时间*/
animation-duration: .3s;
/*运动次数:infinite无数次*/
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
animation-play-state: paused;
}
.box:hover{
animation-play-state: running;
}
/*动画体*/
@keyframes wasai{
0%{}
100%{
width: 400px;
}
}
@keyframes wasai1{
0%{}
100%{}
}
@keyframes wasai2{
0%{}
100%{}
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
实现过程：
先设置动画体--->并为动画体设置名字-->然后给需要动画的标签绑定动画名---->设置动画的一些属性
设置动画体：
@keyframes wasai{
0%{}
100%{
width: 400px;
}
}
为标签绑定动画名：
animation-name: wasai;
设置持续时间：
animation-duration: 0.3s;
设置延迟时间：（可不设置）
animation-delay: 1s;
动画结束位置：backwards、forwards
animation-fill-mode: forwards;
运动次数：infinite无数次
animation-iteration-count:2
alternate-reverse:终点开始来回
整体设置:
animation: wasai 1s 2 linear alternate running;