css 汇总

移动端 适配

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

————————————————————————

 

相对定位原来位置空间保留     绝对定位 原来位置 不保留 

利用绝对定位实现图片垂直居中

 

<div style="width: 500px;height:200px; position: relative; border: green solid 1px;">

<img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="
width: 120px;
height: 40px;
position: absolute;
left:50%; 
top: 50%; 
margin-left: -60px;
margin-top: -20px;" 
/>
</div>

 

 

 ——————————————————————————————————————————————

子元素设置margin-top，父元素也受影响

办法:  给父元素加个padding或border或overflow:hidden即上面代码里的注释部分

 

 

__________________________________________________________________________________

 

/*如果图片的宽度大于父元素的宽度, 也可以使用奇淫技巧
图片居中margin: 0 -100%;注意点: 父元素必须设置text-align: center;*/

 

border: 2px solid transparent;
/*transparent 透明色*/

 

opacity: 0;
/*作用: 设置元素的透明度, 特点:子元素也会跟着透明*/

 

————————————————————————————————————动画方大

.banner .video>ul>li:hover>img{
/*
后代选择器 hover img{} 既找儿子 又找孙子 会找到孙子img 鼠标放上去图标文字都会变灰色蒙版效果

子元素选择器hover>img{} 只找到儿子 图片 鼠标放上去 只有背景变灰色蒙版 */

opacity: 0.5;

}
.banner .video>ul>li:hover .video_info>img {

/*鼠标触发.banner .video>ul>li 中li
再找到 .video_info>img 给图片穿件动画 */
animation: names 2s .5s ease-in-out infinite;

/*names动画名字随便起 */
}

/*设置动画怎么做*/
@-moz-keyframes names{
20%{ transform: scale(.8);} /*图片放小*/
40%{ transform: scale(1.2);} /*放大*/
60%{ transform: scale(.9);} /* 放小*/
80%{ transform: scale(1);}
100%{ transform: scale(1);} /*还原2次是为了让在正常情况下多停留一会*/
}

 

------------------------------------------————————————————处理盒子平局距离

display: flex;
justify-content: space-between; /*处理 盒子之间间距 平均距离*/

————————————————————————————————————————