css随笔

• 字体间隔
  中文：letter-space
  英文：word-space

• 清除ios网页中的点击高亮效果

-webkit-user-select: none;  //禁止选中
-webkit-tap-highlight-color: transparent;  //设置高亮夜色为透明

• table合并边框

border-collapse: collapse;

• hover和after、before一起用

// 以li为例子
li:hover:after{}   //li:hover::after{}

li:hover:before{}  //li:hover::before{}

    
asd
    
asd
    
asd
    
asd
    
asd
    
asd
    
asd
    
asd

• display：table-cell后overflow：hidden；失效

    hello world!

    hello world!

    hello world!

    hello world!

    hello world!

    hello world!

    hello world!

    hello world!

Paste_Image.png

    hello world!

    hello world!

    hello world!

    hello world!

    hello world!

    hello world!

    hello world!

    hello world!

Paste_Image.png

display：table-cell后不但只overflow失效，margin也失效（这个也是可以预见的）

• css3 tap-highlight-color设置点击的按钮、链接的高亮颜色

设置或检索对象的轻按时高亮。
当用户轻按一个链接或者JavaScript可点击元素时给元素覆盖一个高亮色
如果想取消这个高亮，将值设置为全透明即可，比如transparent
对应的脚本特性为textHighlightColor。

参考：http://www.css88.com/book/css/properties/only-webkit/tap-highlight-color.htm

.test {
    display: block;
    margin: 5px;
    padding: 10px;
    border: 1px solid #aaa;
    -webkit-user-select: none;
}
.demo1 {
    -webkit-tap-highlight-color: red;
}
.demo2 {
    -webkit-tap-highlight-color: red;
}

• 清楚系统的默认样式：appearance

设置或检索外观按照本地默认样式
如果你想去除元素本身的外观并进行自定义，可以设置为none
对应的脚本特性为appearance，它可指定浏览器按什么风格渲染元素

Paste_Image.png

参考: http://www.css88.com/book/css/properties/user-interface/appearance.htm

appearance: none;
-moz-appearance: none;
-webkit-appearance: none;

• -webkit-user-select 和 -moz-user-select

禁止用户选中文本

• 弹性布局换行失败

Paste_Image.png

• placeholder
  参考： http://www.css88.com/book/css/selectors/pseudo-element/placeholder.htm