前端第六天
目录
- 补充：z-index
- flex 布局
- 响应式布局
- 过渡及案例
- 动画
一、z-index
1、代码示例
<!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;
}
.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: 88888
}
.d3 {
z-index: 666
}
</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 布局
1、代码示例
<!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;
font-size: 80px;
}
/*容器:规定容器为flex,则容器内的标签会成为该容器的项目(item)*/
.container {
display: flex;
}
.item {
/*默认只能一行排列,所有item总宽不允许超出container宽度*/
/*width: 300px;*/
/*默认情况下item可以不规定高度,高度会自适应父级*/
/*item没有设置宽度下,可以通过flex-grow决定对于父级的占比*/
}
/*.it1, .it3 {
flex-grow: 1;
}
.it2 {
flex-grow: 3;
background-color: pink
}*/
/*container属性*/
.container {
/*flex-direction: row | row-reverse | column | column-reverse; 方向*/
/*flex-direction: column-reverse;*/
/*flex-wrap: nowrap | wrap | wrap-reverse;换行方式*/
/*flex-wrap: wrap;*/
/*justify-content: flex-start | flex-end | center | space-between | space-around;水平对齐方式*/
/*item为沾满父级区域*/
justify-content: space-around;
}
/*item属性*/
.item {
/*width: 300px;
height: 200px;*/
}
.item {
width: 100px;
}
</style>
<!-- 总结 -->
<!-- 1.将父级display属性设置为flex,则父级成为container,子级成为item -->
<!-- 2.container设置item的排列方向flex-direction -->
<!-- 3.item对于container的空间占比flex-grow -->
</head>
<body>
<!-- 学习目的: -->
<!-- 之前学习的盒模型布局(display) float布局 position都不能很好的解决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>
2、学习目的
- Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
v_hint：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
3、基本概念
- 采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
- 水平为轴（main axis），主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end。
- 垂直为交叉轴（cross axis），交叉轴的开始位置叫做cross start，结束位置叫做cross end。
- 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
4、容器属性
① 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;
5、项目属性
① order 属性 定义项目的排列顺序。数值越小，排列越靠前，默认为0。
order: <integer>;
② flex-grow 属性 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-grow: <number>; /* default 0 */
③ flex-shrink 属性 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-shrink: <number>; /* default 1 */
④ flex-basis 属性 定义了在分配多余空间之前，项目占据的主轴空间（main size）。
flex-basis: <length> | auto; /* default auto */
⑤ flex 属性 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
flex: <flex-grow> <flex-shrink> <flex-basis>
⑥ align-self 属性 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
三、响应式布局
1、代码示例
<!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!important;
}
.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: pink;
}
.it {
width: 25%;
}
/*原则:*/
/*1.采用响应式布局的页面,基本样式块只做共性样式设置
需要根据页面尺寸进行适应变化的样式均有响应式布局处理*/
/*2.要进行响应式布局的页面要处理所有屏幕尺寸下的样式块*/
}
/*屏幕宽度间于600至1200px*/
@media only screen and (min-width: 600px) and (max-width: 1200px) {
.box {
background-color: brown;
}
.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>
2、页面宽度
- 小于<integer>宽度
@media only screen and (max-width: <integer>) {
selector {
}
}
- 大于<integer>宽度小于<integer>宽度
@media only screen and (min-width: <integer>) and (max-width: <integer>) {
selector {
}
}
- 大于<integer>宽度
@media only screen and (min-width: <integer>) {
selector {
}
}
四、过渡及案例
1、代码示例
<!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: width, height;*/
/*过度曲线*/
/*transition-timing-function: linear;*/
/*整体设置*/
/*transition: all .3s .1s linear;*/
transition: .3s cubic-bezier(0,.99,0,.99);
}
.hover {
width: 200px;
height: 200px;
margin: 0 auto;
}
/*可以制造第二状态的处理方式*/
.hover:hover .box {
width: 400px;
height: 190px;
background-color: red;
/*去向第二状态才有过度效果*/
/*transition-duration: .1s;*/
}
.box:active {
}
</style>
</head>
<body>
<!-- 过度:从一个状态以动画方式变成另一种状态的这种变化过程就叫做过度 -->
<!-- 过度效果通过hover产生,可以制作一个hover层 -->
<!-- hover层处理方式:与显示层同等区域大小 -->
<!-- 同样可以将显示层的位置交于hover层处理 -->
<div class="hover">
<div class="box"></div>
</div>
</body>
</html>
2、详细案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>过度案例</title>
<style type="text/css">
.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: 5px;
/*top: 270px;*/
left: 120px;
transition: .4s;
}
.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>
3、过渡属性
① 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>;
transition: 过渡的样式属性 过渡持续时间 过渡延迟时间 过渡运动曲线
五、动画
1、代码示例
<!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;
animation: 动画名 动画持续时间;
}
.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>
2、动画属性
① animation-name 属性 表示动画名(名字任意起)
animation-name: <name>;
② animation-duration 属性 表示动画持续时间
animation-duration: <time>;
③ animation-delay 属性 表示动画延迟时间
animation-delay: <time>;
④ animation-timing-function 属性 表示动画运动曲线
animation-timing-function: linear | ease | ease-in-out | easa-in | ease-out | cubic-bezier();
-- linear：匀速
-- ease：慢快慢
-- ease-in-out：慢快慢
-- easa-in：慢快
-- ease-out：快慢
-- cubic-bezier()：贝赛尔曲线函数
⑤ animation-play-state 属性 表示动画状态
animation-play-state: running | paused
-- running：运行
-- paused：暂停
⑥ animation-fill-mode 属性 表示动画结束后的停留位置
animation-fill-mode: forwards | backwards
-- forwards:终点
-- backwards:起点
⑦ animation-iteration-count 属性 表示动画次数
animation-iteration-count: <count> | infinite
-- <count>：固定次数
-- infinite：无限次
⑧ animation-direction 属性 表示运动方向
animation-direction: normal | alternate | alternate-reverse;
-- normal：原起点为第一次运动的起点，且永远从起点向终点运动
-- alternate：原起点为第一次运动的起点，且来回运动
-- alternate-reverse：原终点变为第一次运动的起点，且来回运动
3、动画体
@keyframes <name>{
/*from未写任何属性设置时，默认全部取初始值（初始状态）*/
from{}
to{}
}
@keyframes <name>{
0% {}
...
100% {}
}
