keyframes
有兼容性 -webkit- -moz- -0- -ms-
要定义属性名称 名称
结合过渡一起使用
过渡完成时间(S) 缓冲描述 (linear 匀速 ease非匀速 ) 延迟时间;(如果是0秒也必须设置单位)
动画次数 infinite
补全反方向动画 alternate
保存最后一帧的状态 forwards
1.box {
width: 200px;
height: 200px;
background-color: lightblue;
/*调用动画
1参数: 定义寻找动画名称
2参数: 一次动画完成时间,单位是s
3参数: 缓冲描述,linear ease
4参数: 延迟时间
5参数:动画的次数,infinite无限次
6参数: 补全反方向动画alternate
7参数: 保持最后一帧状态forwards
*/
-webkit-animation: donghua 1s linear 3s 3 alternate forwards;
}
/*定义动画*/ from to状态
2 @-webkit-keyframes donghua {
3 /*开始状态*/
4 from {
5 width: 200px;
6 background-color: lightblue;
7 }
8 /*结束状态*/
9 to {
10 width: 600px;
11 background-color: red;
12 }13 }
/*定义动画*/ 百分比状态
@-webkit-keyframes donghua {
0% {
width: 0px;
height: 0px;
background-color: green;
}
50% {
width: 400px;
height: 400px;
background-color: orange;
}
100% {
width: 600px;
height: 500px;
background-color: blue;
}
}
以谷歌和苹果为例子
动画暂停
play: 播放
state:状态
paused:暂停 结合 hover一起使用
-webkit-animation-play-state: paused;
布局
垂直居中
水平居中
弹性布局
//html部分同上
.parent {
display:flex;
}
.right {
margin-left:20px;
flex:1;
}
单列布局 header、content、footer
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
.header{
margin:0 auto;
max-width: 960px;
height:100px;
background-color: blue;
}
.content{
margin: 0 auto;
max-width: 960px;
height: 400px;
background-color: aquamarine;
}
.footer{
margin: 0 auto;
max-width: 960px;
height: 100px;
background-color: aqua;
}
二列布局
如果是普通的两列布局,浮动+普通元素的margin便可以实现,但如果是自适应的两列布局,利用float+overflow:hidden便可以实现,这种办法主要通过overflow触发BFC,而BFC不会重叠浮动元素。由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性,所以需要设置zoom:1来兼容IE6-浏览器。
.parent {
overflow: hidden;
zoom: 1;
}
.left {
float: left;
margin-right: 20px;
}
.right {
overflow: hidden;
zoom: 1;
}
均分:
1 .box {
2 width: 100%;
3 overflow: hidden;
4 }
5 .box p {
6 /*浮动和标准流 百分比含义相同*/
7 float: left;
8 width: 50%;
9 height: 200px;
10 background-color: green;
11 }
12 .box p:last-child {
13 background-color: red;14 }
三列布局
圣杯布局
圣杯模型
三个元素并排显示,高度不同,最高盒子撑高父盒子,其他盒子最终渲染高度也和最高盒子相同
开始三个盒子高度各不相同。
.box p {
/*三个元素并排显示 浮动*/
float: left;
width: 20%;
height: 200px;
background-color: green;
}
.box .no1 {
/*利用padding-bottom拉长盒子*/
padding-bottom: 500px;
/*利用Mgb负值让盒子变矮*/
margin-bottom: -500px;
}
.box .no2 {
/*三个元素height 不同*/
width: 50%;
height: 400px;
background-color: orange;
/*no2利用padding拉长 >= 最高-自身高度*/
padding-bottom: 1000px;
/*拉回相同数值*/
margin-bottom: -1000px;
}
.box .no3 {
width: 30%;
height: 600px;
background-color: pink;
}
最终显示效果高度相同。
双飞翼布局
双飞翼布局
左右两侧盒子宽度固定值,中间盒子宽度自适应。
浮动:mg相对于上一个浮动元素位置偏移。
1 //结构
2 <!-- 三个同级元素 浮动 -->
3 <div class="container">
4 <!-- 宽度自适应盒子 标准流 -->
5 <div class="main">自适应</div>
6 </div>
7 <div class="left">left</div>
8 <div class="right">right</div>
9 //样式
10 .container {
11 /*左浮动 宽度通栏*/
12 width: 100%;
13 float: left;
14 height: 300px;
15 background-color: #eee;
16 }
17 .container .main {
18 /*标准流*/
19 /*不设置宽度的盒子 mg占有位置 利用Mg将左右两个盒子的位置挤出来*/
20 margin: 0 210px;
21 height: 300px;
22 background-color: green;
23 }
24 /*同级元素要浮动都浮动container left right*/
25 .left {
26 float: left;
27 width: 200px;
28 height: 300px;
29 background-color: orange;
30 /*利用mgl负值将该盒子移动到container最左侧 拉回一个屏幕宽度*/
31 margin-left: -100%;
32 }
33 .right {
34 /*也是左浮动*/
35 float: left;
36 width: 200px;
37 height: 300px;
38 background-color: pink;
39 /*right元素在container 最右侧 拉回自身宽度*/
40 margin-left: -200px;41 }
百分比布局
标准流,浮动:
width: 表示相对于父盒子内容宽比值
height: 表示相对于父盒子内容高比值
padding,margin:不管任何方向都是表示相对于父盒子内容宽比值
border:不能使用百分数
绝对定位:
width: 表示相对于定位参考盒子(内容宽+padding)比值
height: 表示相对于定位参考盒子(内容高+padding)比值
padding,margin:不管任何方向都是表示相对于定位参考盒子(内容宽+padding)比值
border:不能使用百分数
百分比布局
* {
padding: 0;
margin: 0;
}
ul, ol {
list-style: none;
}
a {
text-decoration: none;
color: #000;
}
.box1 {
/*父盒子使用px*/
width: 300px;
height: 400px;
padding: 50px;
border: 20px solid #000;
}
.box1 p {
/*标准流和浮动*/
/*width:相对于父盒子内容宽比值*/
width: 50%;
/*height: 相对于父盒子内容高比值*/
height: 20%;
/*padding,margin 相对于父盒子内容宽比值*/
padding: 10%;
margin: 10%;
background-color: red;
}
.box2 {
/*父盒子使用px*/
width: 300px;
height: 400px;
padding: 50px;
border: 20px solid #000;
position: relative;
}
.box2 p {
/*绝对定位*/
position: absolute;
left: 0;
top: 0;
/*参考边框以内宽度 (300+50*2)* 50% = 200px*/
width: 50%;
/*参考边框以内高度比值*/
height: 20%;
/*padding,margin 边框以内宽度比值*/
padding: 10%;
margin: 10%;
background-color: green;
}
</style>
</head>
<body>
<div class="box1">
<p>son</p>
</div>
<div class="box2">
<p>绝对</p>
</div>
---------------------
【转载,仅作分享,侵删】
作者:前端小99
原文:https://blog.csdn.net/qq_41328247/article/details/88605722
版权声明:本文为博主原创文章,转载请附上博文链接!
|
|