经常使用css+css3集锦

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

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

　　　　一、word-break:break-all;只对英文起做用，以字母做为换行依据
　　　　二、word-wrap:break-word; 只对英文起做用，以单词做为换行依据
　　　　三、white-space:pre-wrap; 只对中文起做用，强制换行
　　　　四、white-space:nowrap; 强制不换行，都起做用
　　　　五、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