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包含内边距和边框



你可能感兴趣的:(css 常用技巧)