积小流以成江海,很多东西你不总结就不是你的东西

常用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: "\0020";
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;
width: 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;
width: 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-width:320px)
{
}
@media(min-width:321px) and (max-width:639px)
{
}
@media(min-width:640px) and (max-width:767px)
{
}
@media(min-width:768px) and (max-width:1023px)
{
}
@media(min-width:1024px) and (max-width:1200px)
{
}
@media(min-width:1200px) and (max-width:1679px)
{
//笔记本
}
@media(min-width:1680px)
{
//台式机
}
/*后续继续整理填充*/

  

非常有用的css使用总结的更多相关文章

  1. Web开发中20个很有用的CSS库

    来源: 微信公众号文章 在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供了一系列功能和特性.每个月都有无数个围绕CSS的工具被开发者发布以简化WEB开发.像CSS库,框架,应用这 ...

  2. Web 开发中 20 个很有用的 CSS 库

    转自:http://www.oschina.net/translate/css-libraries-for-developers 在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供 ...

  3. 应该知道的25个非常有用的CSS技巧

    在我们的前端CSS编码当中,经常要设置特殊的字体效果,边框圆角等等,还要考虑兼 容性的问题, CSS网页布局,说难,其实很简单.说它容易,往往有很多问题困扰着新 手,在中介绍了非常多的技巧,这些小技巧 ...

  4. 你应该知道的25个非常有用的CSS技巧

    在我们的前端CSS编码当中,经常要设置特殊的字体效果,边框圆角等等,还要考虑兼容性的问题, CSS网页布局,说难,其实很简单. 说它容易,往往有很多问题困扰着新手,在中介绍了非常多的技巧,这些小技巧与 ...

  5. 有用的css片段

    1.背景渐变动画 CSS中最具诱惑的一个功能是能添加动画效果,除了渐变,你可以给背景色.透明度.元素大小添加动画.目前,你不能为渐变添加动画,但下面的代码可能有帮助.它通过改变背景位置,让它看起来有动 ...

  6. 30+有用的CSS代码片段

    在一篇文章中收集所有的CSS代码片段几乎是不可能的事情,但是我们这里列出了一些相对于其他的更有用的代码片段,不要被这些代码的长度所吓到,因为它们都很容易实现,并且具有良好的文档.除了那些解决常见的恼人 ...

  7. 【转】30+有用的CSS代码片段

    来自:WEB资源网 链接:http://webres.wang/31-css-code-snippets-to-make-you-a-better-coder/ 原文:http://www.desig ...

  8. 一些对新手有用的css技巧

    一.表单部分 1.禁止textarea文本域的缩放 resize:none; 2.去除初始化textarea下拉条 overflow:auto; 3.如何让表单中的选项按钮,点击文字也能选中? < ...

  9. 20个很有用的CSS技巧

    导语:下面这几个CSS技巧你可能不知道,1.彩色照片变黑白,2.所有元素垂直居中,3.禁用鼠标,4.模糊文字,小编学完能量满满的,觉得对CSS又充满了爱,你也来看看. 1. 黑白图像 这段代码会让你的 ...

随机推荐

  1. python+selenium自动化软件测试(第2章):WebDriver API

    2.1 操作元素基本方法 前言前面已经把环境搭建好了,从这篇开始,正式学习selenium的webdriver框架.我们平常说的 selenium自动化,其实它并不是类似于QTP之类的有GUI界面的可 ...

  2. jenkins 每个月1号到7号 一天执行一次

    在线Crontab表达式执行时间验证 / crontab执行时间计算 - aTool在线工具验证 http://www.atool.org/crontab.php 1.Build periodic a ...

  3. chrome开发工具指南(三)

    Security 面板 使用 Security Overview 可以立即查看当前页面是否安全. 检查各个源以查看连接和证书详情(安全源)或找出具体哪些请求未受保护(非安全源). Security O ...

  4. 3.修改第一个程序来点亮LED

    在上一节中已经将驱动程序框架搭建好了 接下来开始写硬件的操作(控制LED): (1)看原理图,确定引脚 (2)看2440手册 (3)写代码(需要使用ioremap()函数映射虚拟地址,在linux中只 ...

  5. Ubuntu下安装NVIDIA显卡驱动的教训

    今天在ubuntu16.04版本下安装了NVIDIA的显卡驱动,真的是一波十六折: 首先是在英伟达的官网上查找你自己电脑的显卡型号然后下载相应的驱动. 网址:http://www.nvidia.cn/ ...

  6. Sublime Text 安装插件

    Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等.还可自定义键绑定,菜单和工具栏.Sublime Text 的主要功能包括:拼写检查,书签,完整的 ...

  7. Lombok的使用

    下面介绍几个我常用的 lombok 注解:         @Data   :注解在类上:提供类所有属性的 getting 和 setting 方法,此外还提供了equals.canEqual.has ...

  8. Python并发编程协程(Coroutine)之Gevent

    Gevent官网文档地址:http://www.gevent.org/contents.html 基本概念 我们通常所说的协程Coroutine其实是corporate routine的缩写,直接翻译 ...

  9. 201521123114 《Java程序设计》第5周学习总结

    1. 本章学习总结 2. 书面作业 Q1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误?试改正该错误.并分析输出结果. 不能 ...

  10. 201521123061 《Java程序设计》第三周学习总结

    1. 本章学习总结 2. 书面作业 **Q1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2 ...