常用css+css3集锦

就平时看到的，对自己有帮助的，暂且先记录下来，备用。

• CSS强制英文、中文换行与不换行

　　　　1、word-break:break-all;只对英文起作用，以字母作为换行依据
　　　　2、word-wrap:break-word; 只对英文起作用，以单词作为换行依据
　　　　3、white-space:pre-wrap; 只对中文起作用，强制换行
　　　　4、white-space:nowrap; 强制不换行，都起作用
　　　　5、white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行，超出部分隐藏且以省略号形式出现

• CSS Reset标准写法

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, cc,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}

del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

• 图片预加载

　　

div.loader{
    background:url(images/hover.gif) no-repeat;
    background:url(images/hover2.gif) no-repeat;
    background:url(images/hover3.gif) no-repeat;
    margin-left:-10000px;
}

• 文本选择

::selection { background:#d3d3d3; color:#555;}
::-moz-selection { background:#d3d3d3; color:#555;}
::-webkit-selection { background:#d3d3d3; color:#555;}

• 根据链接属性统一替换链接样式

/* external links */
a[href^="http://"]{
    padding-right: 20px;
    background: url(external.gif) no-repeat center right;
}

/* emails */
a[href^="mailto:"]{
    padding-right: 20px;
    background: url(email.png) no-repeat center right;
}

/* pdfs */
a[href$=".pdf"]{
    padding-right: 20px;
    background: url(pdf.png) no-repeat center right;
}

• CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内

　　最基本的：

　　　　设置display属性为none，或者设置visibility属性为hidden

　　技巧性：

　　　　设置宽高为0，设置透明度为0，设置z-index位置在-1000

• rgba()和opacity的透明效果有什么不同？

　　rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，

　　而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

• Sass、LESS是什么？

      他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。

　　例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。

　　为什么要使用它们？

• 结构清晰，便于扩展。
• 可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
• 可以轻松实现多重继承。
• 完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

• display:none与visibility:hidden的区别

　　display : 隐藏对应的元素但不挤占该元素原来的空间。

　　visibility: 隐藏对应的元素并且挤占该元素原来的空间。

　　即是，使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。

• 垂直居中 

 1. 利用lineheight

 2. 将父级div的设置为display:table,将子div设置为display:table-cell。然后就可以使用table特有的vertical-align:middle属性了。

 3. 利用负边距,先设置position：absolute然后设置top:50%接着设置margin-top:-(height/2)

 4. 首先设置display:box,然后box-align:center为兼容各浏览器请加相应前缀

• 水平居中

 1. 块级元素可以使用margin:0 auto;

 2. 行内元素想button之类的可以使用text-align:center;

 3. 使用负边距，原理同垂直居中

 4. 利用flexible-box，原理同垂直居中，设置box-pack:center

 5. 如果父级元素的高度是未知的呢， line-height就不好确定了，下面三行代码为你搞定 因为不再考虑父级元素的宽度了：

section{ //父元素
     display: -webkit-box;    
    -webkit-box-align: center;
    -webkit-box-pack: center;

     }

• 禁止a标签点击高亮,这些都是非官方属性，但实用性超强

html,body{
     -webkit-touch-callout: none; //禁止或显示系统默认菜单
     -webkit-user-select: none; //禁止长按复制选择
     -webkit-tap-highlight-color: rgba(0,0,0,0);//禁止触摸a标签高亮 这个特别实用
 }

• 禁止换行 多余省略号

html代码：

<div class='word'>
     看！我只显示一行，多余的用省略号表示哟
 </div>  

css代码：

.word{
    display:block; //如果是块儿级元素可以不用加
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

若是碰到需求是这样的，让文字显示两行多余用省略号显示呢？解决办法如下：

.word{
    font-size:2.4rem; 
    line-height:130%;
    height: 7.0rem;
    line-height: 130%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; //显示的行数 
    -webkit-box-orient: vertical;

}

• 用百分比控制line-height

 　　移动端应尽量少使用px，用百分比控制更精确

line－height:100%;//两行文字之间无空隙

使用：当拿到设计PSD时 我们先看字号是多少，比如24px; 文字的间距，比如10px; 那么line-height=100%+(10/24)*100%; 这样的行间距是最精确的并且响应各种设备。

• 文字上划斜线

 我们知道在文字上划横线是 text-decoration: line-through;但是默认没有划斜线的属性，这个常用于电商网站比如将原价用斜线划掉
或者说用del标签

　　　　　<div style="text-decoration: line-through">
            文字上划斜线1
        </div>
        <div>
            <del>文字上划斜线2</del>
        </div>

• 字体大小使用vw

字号的使用变迁 px->em->rem->vw

前三种都不能到达响应的效果
vw是根据设备屏幕的百分比设置
 比如
 .a{
   font-size:10vw;//大小为屏幕宽度的百分之十 当然很少有设这么大的字
  }
因为vw设置的字体大小是根据屏幕大小改变而改变 所以在大屏幕上显示会变大 根据可根据 需求使用

• 画1px的细线

html代码如下：

<div class='border1px'></div>

css代码如下：

.border1px{  position: relative;}
.border1px:after{
    content:"";
    position: absolute;
    bottom:0px;
    left:0px;
    right:0px;
    border-bottom:1px solid red;
    border-left:1px solid red;
    -webkit-transform:scaleY(.5);
    -webkit-transform-origin:0 0;
}

后期看到有用的，会持续更新～

相关请参照 http://www.dbpoo.com/category/html-css/

　　　　　http://www.cnblogs.com/coco1s/p/4034937.html

 　　　　　http://www.cnblogs.com/leinov/p/4837783.html