css 常用技巧

1、禁止用户选中文字

    -webkit-user-select:none

2、文本溢出显示..

overflow:hidden; text-overflow:ellipsis; white-space:nowrap;

3、常用字体：

Arial ,arial black,verdana,georgia,courier new,comic sans ms,tahoma,

4、两端对齐

text-justify : auto; text-align:justify;

5、文字垂直居中对齐，

display:table-cell;

vertical-align:middle;

6、before after 中content用法

content:'\5B'  编码字符用法

content:"(" attr(引用标签上属性值) ")"  attr(href)

content:url() 使用图片，但不可设置大小

7、webkit-transform-origin:用法：

它用来设置旋转的中心点，一般会用x y两个百分比

但如果3d视图时是可以设置z轴的值的，可以用百分比，px 等

8、去掉移动端a点击时的暗色背景

a,button,input,optgroup,select,textarea {
    -webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/
}

9、禁止长按a出现菜单栏

a, img {
    -webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/
}

10、流畅滚动

body{
    -webkit-overflow-scrolling:touch;
}

11、文字长显示...

  /*指定字符串的宽度*/
    width:300px;   
    overflow: hidden;  
    /* 当字符串超过规定长度，显示省略符*/ 
    text-overflow:ellipsis;  
    white-space: nowrap;  

12、box-sizing使用

用来改变默认盒子的计算方式

content-box:默认值，标准盒子 width height 只包含内容的宽高

padding-box:width height 包含内边距

border-box:width height包含内边距和边框