前端学习笔记css篇（1）

1.响应式布局

常用的响应式布局方法：

为不同分辨率配置不同的css文件

/* 当分辨率大于720px时 */
@media screen and (min-width: 720px) {}

2.CSS动画

css3的animation提供简单的动画效果，如设置透明度渐变：

.header {
	width: 100px;
	height: 100px;
	background-color: #000;
	-webkit-animation:c-opacity 1s infinite;
}
@keyframes c-opacity {
	from {
		opacity: 1
	}
	to {
		opacity: 0.5
	}
}

通过@keyframes定义动画 c-opaacity为自定义的动画名，然后在选择器中使用，其中的1s是动画播放的时间，infinite是设置在循环播放

3.水平居中和垂直居中

常用的水平居中方法为设置margin-left和margin-right的值为auto，

常用的垂直居中方法为设置position为absolute，top:50%;margin-top:-50%width;

.div-vertical-center {
	position: absolute;
	top: 50%;
	width: 100px;
	height: 100px;
	margin-top: -50px;
	margin-left: auto;
	margin-right: auto; 
	background-color: blue; 
}