css3动画keyframes css常用布局

 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>