css常用代码

/*清除浮动代码*/ 
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
.clearfloat{zoom:1} 

 

.animate-up{

　　transition: all 0.2s ease-out;

　　-webkit-transition: all 0.2s ease-out;

}

.animate-up:hover{

　　transform: translate(0,-3px); 

　　-webkit-transform: translate(0,-3px);==-webkit-transform: translateY(-3px);

 

}

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

translate() 方法转换画布的用户坐标系统 

transition 属性是一个简写属性，用于设置四个过渡属性：

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

 

　　outline: none;

　　outline-style:dotted;
　　outline-color:#00ff00;

　　outline-offset:-80px;

　　box-sizing: border-box;

　　

 

.thumb-ntp .mv-tile:hover{

　　 box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.2);

}

 

div垂直居中

 

:before {
　　content: "a";
　　height: 100%;
　　display: inline-block;
　　vertical-align: middle;
　　visibility: visible;
}

display: inline-block;
vertical-align: middle;

 

 

div居中:

width: 100px;height: 300px;position: absolute;left: 0;right: 0;top: 0;bottom:0;margin: auto;background-color: bisque"

@media

从上面我们可以看出有几个临界点的分辨率，那么我们就可以轻松的来写自己的自适应代码了

@media (min-width: 768px){ //>=768的设备 }

@media (min-width: 992px){ //>=992的设备 }

@media (min-width: 1200){ //>=1200的设备 }

注意下顺序，如果你把@media (min-width: 768px)写在了下面那么很悲剧，

@media (min-width: 1200){ //>=1200的设备 }

@media (min-width: 992px){ //>=992的设备 }

@media (min-width: 768px){ //>=768的设备 }

因为如果是1440,由于1440>768那么你的1200就会失效。

所以我们用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面

@media (max-width: 1199){ //<=1199的设备 }

@media (max-width: 991px){ //<=991的设备 }

@media (max-width: 767px){ //<=768的设备 }