积小流以成江海，很多东西你不总结就不是你的东西
常用css总结：
/*设置字体*/
@font-face {
font-family: 'myFont';
src: url('../font/myFont.eot');
src: url('../font/myFont.eot?#iefix') format('embedded-opentype'), url('../font/myFont.woff2') format('woff2'), url('../font/myFont.woff') format('woff'), url('../font/myFont.ttf') format('truetype'), url('../font/myFont.svg#square721_cn_btroman') format('svg');
font-weight: normal;
font-style: normal;
}
/*clearfix清楚浮动*/
.clearfix {
*zoom: 1;
}
.clearfix:after {
content: " 020";
display: block;
visibility: hidden;
clear: both;
height: 0;
overflow: hidden;
}
/*给input的placeholder设置颜色*/
::-webkit-input-placeholder {
/* WebKit browsers */
color: #999;
}
:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #999;
}
::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #999;
}
:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #999;
}
/*文本框焦点状态：没有蓝框*/
.input{outline:none;}
/*透明度设置*/
.opacity {
opacity: .9;
filter: alpha(opacity=90)
}
/*超出文本显示省略号*/
.elips {
display: bolck;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/*多行文本显示省略号，这个只支持chrome浏览器*/
.elipsMoreLine {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
100px;
height: 40px;
line-height: 20px;
}
/*多行文本显示省略号的，跨浏览器兼容，设置元素的高度，用包含省略号(…)的伪类元素模拟实现*/
p {
position: relative;
line-height: 20px;
height: 40px;
overflow: hidden;
}
p::after {
content: "...";
font-weight: bold;
position: absolute;
bottom: 0;
right: 0;
padding: 0 20px 1px 45px;
background-color: #fff;
}
/*去掉移动端，a标签点击产生的阴影虚框*/
a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/*强制不换行*/
div{
white-space:nowrap;
}
/*强制换行*/
p{
word-wrap: break-word;
word-break: normal;
}
/*单词断行*/
p{
word-break:break-all;
}
/*常用伪类*/
div:after{
content:'';display:block;position:absolute;
};
div:before{
content:'';display:block;position:absolute;
}
.selector:first-child{
/*选择第一个子元素*/
}
.selector:last-child{
/*选择最后一个子元素*/
}
.selector:first-letter{
/*设置第一字符的样式*/
}
.selector:nth-of-type(n){
}
.selector:nth-of-type(2n){
}
.selector:nth-of-type(2n+1){
}
/*设置文本的间距*/
.txt{
letter-spacing:2em;
}
/*影藏文本*/
.hiddentxt{
text-indent:999em;overflow:hidden;
}
/*全屏遮罩背景*/
.mask {
background: #111;
position: fixed;
100%;
height: 100%;
opacity: 0.8;
filter: alpha(opacity=80);
z-index: 100;
top: 0;
left: 0;
}
/*修正img产生的3像素的bug*/
img {
border: 0;
display: inline-block;
vertical-align: middle;
}
/*解决ie6下浮动的双倍间距bug*/
.fl {
float: left;
_display: inline
}
.fr {
float: right;
_display: inline
}
/*阴影效果*/
.shadow {
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}
/*模糊遮罩效果*/
.blur{
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
}
/*从上到下的渐变效果*/
.gradent{
background: -webkit-linear-gradient(#ed5a5e, #ed3a61);
background: -o-linear-gradient(#ed5a5e, #ed3a61);
background: -moz-linear-gradient(#ed5a5e, #ed3a61);
background: linear-gradient(#ed5a5e, #ed3a61);
}
/*从左到右的渐变*/
.gradent2{
background:-moz-linear-gradient(left,#ace,#f96);/*Mozilla*/
background:-webkit-linear-gradient(left,#ace,#f96);/*new gradient for Webkit*/
background:-o-linear-gradient(left,#ace,#f96); /*Opera11*/
}
/*从左上角，到右下角的渐变*/
.gradent3{
background: -moz-linear-gradient(left top, #ace, #f96);
background: -webkit-linear-gradient(left top, #ace, #f96);
background: -o-linear-gradient(left top, #ace, #f96);
}
/*指定角度的渐变*/
.gradent4{
background: -moz-linear-gradient(45deg, #ace, #f96);
background: -webkit-linear-gradient(45deg, #ace, #f96);
background: -o-linear-gradient(45deg, #ace, #f96);
}
/*怪异盒模型,这种模式下增加padding和边框值，元素的宽度不会增加*/
.box {
box-sizing: border-box;
-moz-box-sizing: border-box;
/* Firefox */
-webkit-box-sizing: border-box;
/* chrome */
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*transition过渡效果:第一个参数为某个属性，第二参数为动画执行的时间，第三个参数为动画的效果速度曲线，第四个参数为动画延迟多久执行*/
.transition{
transition: all 1s linear 2s;
-moz-transition:all 1s linear 2s;
-webkit-transition:all 1s linear 2s;
-o-transition:all 1s linear 2s;
}
/*transform效果:
translate(x,y);
translate3d(x,y,z);
translateX(30px);
translateY(30px);
translateZ(30px);
scale(x,y);
scale3d(x,y,z);
scaleX(1.2);
scaleY(1.2);
scaleZ(1.2);
rotate(angle);
rotate3d(x,y,z,angle);
rotateX(angle);
rotateY(angle);
rotateZ(angle);
skew(x-angle,y-angle);
skewX(angle);
skewY(angle);
perspective;三维空间。
*/
.transform{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); /* Opera */
}
/*animation keyframes帧动画*/
/*如下：
第一个参数，帧动画的名称，
第二个参数，动画执行的时间，
第三个参数，动画运动的速度曲线，ease、ease-in、ease-out、linear、ease-in-out、cubic-bezier(num1,num2,num3,num4)。
第四个参,动画延迟执行的时间。
第五个参数，规定动画播放的次数，infinite是循环无限播放，
第六个参数，规定是否应该轮流反向播放动画。
第七个参数：animation-fill-mode: forwards(动画结束之后保持在最后一帧的状态) backwards(动画结束之后保持在第一帧) ;
*/
.shakeAni{
-webkit-animation: shake 0.5s ease-in-out 3s infinite alternate;
-moz-animation: shake 0.5s ease-in-out infinite alternate;
animation: shake 10.5s ease-in-out infinite alternate;
}
@keyframes shake {
from {transform:translateX(-10px);}
to {transform:translateX(10px);}
/*或者使用%写多个不同的区段*/
0% {
transform:translateX(-10px);
}
25% {
transform:translateX(10px);
}
50% {
transform:translateX(-10px);
}
75% {
transform:translateX(10px);
}
100% {
transform:translateX(10px);
}
}
@-moz-keyframes shake{
from {-moz-transform:translateX(-10px);}
to {-moz-transform:translateX(10px);}
}
/* @-ms-keyframes shakeX {
from {-m-transform:translateX(-@10px);}
to {-m-transform:translateX(@10px); }
} */
@-webkit-keyframes shake{
from {-o-transform:translateX(-10px); }
to {-o-transform:translateX(10px);}
}
@-o-keyframes shake{
from {-webkit-transform:translateX(-10px);}
to {-webkit-transform:translateX(10px);}
}
/*css3的方式进行水平竖直居中*/
.hvCenter {
position: fixed;
left: 50%;
top: 50%;
z-index: 200;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-sizing: border-box;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
}
/*css居中的方法还有很多，有空再整理总结*/
/*移动端常用设备的媒体查询*/
@media(max-320px)
{
}
@media(min-321px) and (max-639px)
{
}
@media(min-640px) and (max-767px)
{
}
@media(min-768px) and (max-1023px)
{
}
@media(min-1024px) and (max-1200px)
{
}
@media(min-1200px) and (max-1679px)
{
//笔记本
}
@media(min-1680px)
{
//台式机
}
/*后续继续整理填充*/