flex布局 响应式布局 过渡 动画
Posted layerluo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了flex布局 响应式布局 过渡 动画相关的知识，希望对你有一定的参考价值。
Z-index
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>z-index</title> <style type="text/css"> .box{ <!-- 辅助子级进行绝对定位 --> position:relative; width:400px; height:400px; background-color:red; margin:0 auto; position:relative; } .d1,.d2,.d3{ width:200px; height:200px; position:absolute; } .d1{ background-color:orange; } .d2{ background-color:blue; top:calc(50% - 100px); left:calc(50% - 100px); } .d3{ background-color:black; right: 0; bottom:0; } <!-- 脱离文档流的标签，具有z-index属性，可以用来控制显示层次的优先级，值为任意正整数 --> .d2{ z-index:1; } </style> </head> <body> <!-- 需求1：d1,d2,d3均为box的一半大小 --> <!-- 需求2：d1左上角,d2居中,d3右下角 --> <!-- 需求3：d2区域在最上方（会覆盖d1,d3重叠部分） --> <div class="box"> <div class="d1"></div> <div class="d2"></div> <div class="d3"></div> </div> </body> </html>
Flex布局
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
水平为轴（main axis），主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end。
垂直为交叉轴（cross axis），交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>flex布局</title>
<style type="text/css">
.container{
width:600px;
height:600px;
border:1px solid black;
margin:0 auto;
}
.item{
/* width:200px; */
/* height:200px; */
/* border-radius:50%; */
background-color:orange;
}
.container{
<!-- 容器：规定容器为flex，则容器内的标签会成为该容器的项目（item） -->
display:flex;
}
.item{
<!-- 默认只能一行排列，所以item总宽不允许超出container宽度 -->
width:300px;
<!-- 默认情况下item可以不规定高度，高度会自适应父级
item没有设置宽度下，可以通过flex-frow决定对于父级的占比 -->
}
.it1,.it3{
flex-grow:1;
}
.it2{
flex-grow:3;
background-color:pink;
}
/* container属性 */
.container{
<!-- flex-direction:row | row-reverse |column |column-reverse; 方向
默认是row 列 column 是行 reverse反转 如果是占比的方式 行的时候是按照高来决定占比-->
flex-direction:row;
flex-direction:column;
<!-- flex-wrap:nowrap | wrap | wrap-reverse; 换行方式 -->
<!-- justify-content:flex-start|flex-end|center|space-between|space-around; 水平对齐方式 -->
justify-content:space-between;
}
.item{
width:100px;
}
</style>
<!-- 总结 -->
<!-- 1.将父级display属性设置flex，则父级成为container，子级成为item -->
<!-- 2.container 设置item的排列方向flex-direction -->
<!-- 3.item对于container的空间占比flex-grow -->
</head>
<body>
<!-- 学习目的 -->
<!-- 之前学习的盒模型布局（display） float布局 positio都不能很好的解决block垂直居中的问题，flex布局擅长-->
<div class="container">
<div class="item it1">1</div>
<div class="item it2">2</div>
<div class="item it3">3</div>
</div>
</body>
</html>
容器属性
flex-direction 属性 决定主轴的方向（即项目的排列方向）
flex-direction: row | row-reverse | column | column-reverse;
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
flex-wrap 属性 定义，如果一条轴线排不下，如何换行。
flex-wrap: nowrap | wrap | wrap-reverse;
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。
flex-flow 属性 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
flex-flow: <flex-direction> <flex-wrap>;
justify-content 属性 定义了项目在主轴上的对齐方式。
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items 属性 定义项目在交叉轴上如何对齐。
align-items: flex-start | flex-end | center | baseline | stretch;
align-content 属性 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
响应式布局
1.在响应式布局内，css语法同正常样式表语法
2.响应式布局之间存在不同屏幕尺寸的限制，使用样式相互不影响
解释：满足当前屏幕尺寸时，该样式块起作用，不满足时，则样式块失效
3.当响应式布局中样式块起作用时，会与正常样式块设置协同布局，遵循选择器的优先级规则
原则：
1.采用响应式布局的页面，基本样式块只做共性样式设置，需要根据页面尺寸进行适应变化的样式均有响应式布局处理
2.要进行响应式布局的页面要处理所有屏幕尺寸下的样式块
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>响应式布局</title>
<style type="text/css">
<!-- 基本样式块 -->
/* .box{
max-width:1200px;
width:95%;
margin:0 auto;
background-color:red;
}
.it{
width:300px;
height:300px;
font:900 50px/300px ‘STSong‘;
text-align:center;
float:left;
border-radius:50%;
background-color:orange;
}
.box:after{
content:"";
display:block;
clear:both;
} */
html,body{
margin:0;
}
.it{
height:300px;
background-color:orange;
font:900 50px/300px ‘STSong‘;
text-align:center;
border-radius:50%;
float:left;
}
.box:after{
content:"";
display:block;
clear:both;
}
/* 屏幕宽度超出1200px */
@media only screen and (min-width:1200px ){
<!-- 1.在响应式布局内，css语法同正常样式表语法
2.响应式布局之间存在不同屏幕尺寸的限制，使用样式相互不影响
解释：满足当前屏幕尺寸时，该样式块起作用，不满足时，则样式块失效
3.当响应式布局中样式块起作用时，会与正常样式块设置协同布局，遵循选择器的优先级规则 -->
.box{
background-color:red;
}
.it{
width:25%;
}
.box:after{
content:"";
display:block;
clear:both;
}
<!-- 原则：
1.采用响应式布局的页面，基本样式块只做共性样式设置
需要根据页面尺寸进行适应变化的样式均有响应式布局处理
2.要进行响应式布局的页面要处理所有屏幕尺寸下的样式块 -->
}
<!-- 屏幕宽度间于600至1200px -->
@media only screen and (min-width: 600px) and (max-width:1200px ){
.box{
background-color:pink;
}
.it{
width:30%;
margin:0 calc(10% / 6);
}
}
<!-- 宽度小于600px -->
@media only screen and (max-width:600px ){
.box{
background-color:cyan;
}
.it{
width:80%;
margin-left:10%;
min-width:300px;
}
}
</style>
</head>
<body>
<div class="box">
<div class="it">1</div>
<div class="it">2</div>
<div class="it">3</div>
<div class="it">4</div>
<div class="it">5</div>
<div class="it">6</div>
<div class="it">7</div>
<div class="it">8</div>
<div class="it">9</div>
<div class="it">10</div>
<div class="it">11</div>
<div class="it">12</div>
</div>
</body>
</html>
过渡
过渡：从一个状态以动画方式变成另一种状态的这种变化过程叫做过渡
过渡效果通过父级产生，可以制作一个父级（对应下面示例代码里的hover）层
父级（对应下面示例代码里的hover）层处理方式：与显示层同等区域大小
同样可以将显示层的位置交于父级（对应下面示例代码里的hover）层处理
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>过渡</title>
<style type="text/css">
.box{
width:200px;
height:200px;
background-color:orange;
<!-- 过度 -->
<!-- 持续时间 -->
<!-- 来去均有过度效果 -->
transition-duration:.5s;
<!--延迟时间 -->
/* transition-delay:1s; */
<!-- 过度属性 默认属性all -->
<!-- 定义的属性慢慢变 其他的属性瞬间变 -->
/* transition-property:background-color; */
/* transition-property:width,height */
<!-- 过度的曲线 -->
<!-- transition-timing-function:linear; */
<!-- 整体设置 -->
transition:all .5s .2s linear;
<!-- 第一个属性 第二个持续时间 第三个延迟时间 第四个曲线 -->
}
.hover{
width:200px;
height:200px;
}
<!-- 可以制造第二状态的处理方式 -->
.hover:hover .box{
width:400px;
height:100px;
background-color:red;
<!-- transition放在这只有放上去有动画效果鼠标不在区域内就瞬间变回没有过度效果 -->
/* transition-duration:0.2s; */
}
.box:active{
}
</style>
</head>
<body>
<div class="hover">
<div class="box">
</div>
</div>
</body>
</html>
过渡属性
transition-property 属性 表示可过渡的样式属性 transition-property: all | [css1 [...]]; transition-duration 属性 表示过渡持续时间 transition-duration: <time>; transition-delay 属性 表示过渡延迟时间 transition-delay: <time>; transition-timing-function 属性 表示过渡运动曲线 transition-timing-function: linear | ease | ease-in-out | easa-in | ease-out | cubic-bezier(); -- linear：匀速 -- ease：慢快慢 -- ease-in-out：慢快慢 -- easa-in：慢快 -- ease-out：快慢 -- cubic-bezier()：贝赛尔曲线函数 transition 属性 表示前四个属性整体赋值 transition: <transition-property> <transition-duration> <transition-delay> <transition-timing-function>;
动画
@keyframes <name>{
/*from未写任何属性设置时，默认全部取初始值（初始状态）*/
from{}
to{}
}
@keyframes <name>{
0% {}
...
100% {}
}
动画属性设置给指定选择器标签，动画体在样式中单独设置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动画</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background-color: orange;
}
<!--动画样式-->
.box {
<!--绑定动画名-->
animation-name: wasai;
<!--持续时间-->
animation-duration: 1s;
<!--延迟时间-->
/*animation-delay: .1s;*/
<!--动画结束停留位置:backwards起点 forwards终点-->
/*animation-fill-mode: forwards;*/
<!--运动次数 infinite无数次-->
animation-iteration-count: 4;
<!--多次运动方向的规则-->
/*alternate:来回*/
/*alternate-reverse:终点开始来回*/
/*animation-direction: alternate-reverse;*/quotes: ;
<!--动画状态 running-->
/*animation-play-state: paused;*/
<!--整体设置-->
animation: wasai 1s 2 linear alternate;
}
.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>
以上是关于flex布局 响应式布局 过渡 动画的主要内容，如果未能解决你的问题，请参考以下文章