keyframes
Compatibility -webkit- -moz- -0- -ms-
To define the attribute name names
Use in conjunction with the transition
Transition completion time (S) Buffer Descriptor (linear ease uniform non-uniform) time delay; (0 seconds if the unit must be provided)
Animations infinite
Completion opposite direction animated alternate
Save the last a state 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;
}
}To Google and Apple as an example
Suspended animation
play: Play
state: state
paused: Pause used together in combination hover
|
layout
Vertical center
Horizontal Centers
Elastic layout
//html部分同上
.parent {
display:flex;
}
.right {
margin-left:20px;
flex:1;
}Single column layout 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;
}Two layout
If an ordinary two-column layout, float + margin ordinary elements can be realized, but if it is adaptive two-column layout, the use of float + overflow: hidden can be realized, this approach is mainly triggered by the overflow BFC, BFC and not overlap float. Since the overflow: hidden property and does not trigger haslayout IE6- browser, you need to set zoom: 1 to IE6- compatible browser.
.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 }
Three layout
Holy Grail layout
Holy Grail model
Three elements side by side, have different heights, the highest supporting high boxes parent box, the other box height and the highest final rendering the same box
It began three boxes height varies.
.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;
}
The final display is the same height.
Flying wing
双飞翼布局
左右两侧盒子宽度固定值，中间盒子宽度自适应。
浮动：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 }
Percentage layout
Standard flow, float:
width: relative to the parent box indicates the content ratio of the width
height: relative to the parent box indicates high content ratio
padding, margin: any direction regardless of the contents of the box represents the parent with respect to width ratio
border: You can not use a percentage
Absolute positioning:
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>