自己总结的几个零碎样式处理，碰到一个就加一点

空白符

    white-space: pre-line;

元素内文本平均分布

    text-align: justify;
    text-align-last: justify;

去除点击背景色

     body {
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        -webkit-tap-highlight-color: transparent;
    }

伪类元素边框做小箭头

.weui_cells_access .weui_cell_ft:after {
content: " ";
display: inline-block;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
height: 6px;
width: 6px;
border-width: 2px 2px 0 0;
border-color: #c8c8cd;
border-style: solid;
position: relative;
top: -2px;
top: -1px;
margin-left: .3em;
}

超出部分隐藏 鼠标移入显示

.tasklink{
    width:160px;
    display:block;
    white-space:nowrap;
     overflow:hidden; 
    text-overflow:ellipsis;
}
.tasklink:hover{
    overflow:inherit
}

超出强制换行 以字母为基准

.tasklink{
    word-break: break-all;
    width:200px;
}

滚动条样式

    .p_box::-webkit-scrollbar { width: 5px; height:5px; background-color: #5D89EF; }
    .p_box::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); border-radius: 3px; background-color: #F0F0F1; }
    .p_box::-webkit-scrollbar-thumb { /*width: 10px;*/ height: 20px; border-radius: 3px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #5D89EF; }

文字中间加横线
text-decoration: underline
可编辑div或者input placeholder不能显示

要注意value不能有空格  
div标签对内部不能有空格

字边距

letter-spacing: 26px;

边框

border: 4px double red;双线
border: 4px dashed red;虚线

表格边距清除

border-collapse:collapse;

表格合并

colspan="11"横向合并
rowspan="2" 纵向合并

文字竖行排列

display: inline-block;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;

IE8支持背景色透明

input{
    background:transparent; // IE要清楚默认的背景色
    /*
    startColorstr,endColorstr最前面的两位是透明
    */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F990000,endColorstr=#7F990000); 
    zoom: 1;
}

获取鼠标相对于浏览器的位置 去除页面滚动的影响

 e = e || event;
var x = e.clientX+$(window).scrollLeft();
var y = e.clientY+$(window).scrollTop();

获取页面元素相对于浏览器的位置 去除页面滚动的影响

var Y = $(e.target).offset().top;
var X = $('.box').offset().left; 

去除select 小箭头

select{
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

长度单位

vm vh vmin vmax rem em 

input

 @*$('[name="search"]:checked').val()*@

通用样式

*{
    margin:0;
    padding:0;
    list-style:none;
}
input{
    outline:none;
}
img{border:none;}
html,body{height:100%;font-family:微软雅黑;overflow:auto;}
body {font-size: 16px; line-height: 1.5; font-family:'Microsoft Yahei','simsun','arial','tahoma';  color: #222;  }
table { border-collapse:collapse; border-spacing:0; }
h1, h2, h3, h4, h5, h6, th { font-size: 100%; font-weight: normal; }
button,input,select,textarea{font-size:100%;}
a { text-decoration: none; -webkit-tap-highlight-color:rgba(0,0,0,0);color:#111;}
a:hover{text-decoration:none;}
.clear{clear: both;}
.fl{ float: left; }
.fr{float: right;}
.tc{text-align:center;}
.f12{font-size:12px;}
.f14{font-size:14px;}
.h100{height:100%;}
.h20{height:20px;}
.h45{height:45px;}
.h60{height:60px;}
.w100{width:100%;}
.pon { cursor:pointer;}
.hidden { display:none; }
.block { display:block; }
.FB { font-weight:bold; }
.mau{margin:0 auto;}
.dil{display:inline-block;}
.db{display:block;}
p{margin:0;}
.cf{color:#fff;}

下拉框模拟

需要做一个类似select的下拉 但是样式有改变 option的hover样式谷歌浏览器不能更改，所以自定义

后期由于需要在页面任意地方点击能够关闭弹框，所以添加了遮罩层

下拉框模拟 select中option的背景色改变

    .this_select_style{
    display:inline-block;
    position:relative;
}
.this_select_style input{
    width:260px;
    /*padding: 5px 50px 5px 20px;*/
    padding-left:5px;
    height: 35px;
    border: 1px solid #d8d8d8;
    box-sizing: border-box;
    border-radius: 5px;
    color: #999;
    background: url(../images/Mall_select.png) no-repeat 87% 54%;
}
.this_select_style ul{
    width:260px;
    border: 1px solid #d8d8d8;
    border-top:none;
    border-radius: 0 0 5px 5px;
    color: #999;
    padding:0;
    position:absolute;
    top:19px;
    background-color:#fff;
    z-index:9999;
    display:none;
    box-sizing: border-box;
}
.this_select_style .show_ul{
    border-radius:5px 5px 0 0;
    border-bottom:none;
    background:none;
}
.this_select_style ul li{
    width:100%; 
    padding: 5px 50px 5px 20px;
    cursor:pointer;
    box-sizing: border-box;
}
.this_select_style ul li:hover{
    color:#fff;
    background-color:#1bbc9b;
}
#mask{
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.2);//为了测试，真实可以去掉背景色
    position: fixed;
    left: 0;
    top:0;
    z-index: 999;
    display: none;
}


<div id="mask"></div>
<div class="this_select_style">
    <input type="text" readonly="true" class="selectmenu" style="background-color: #fff;" data-value="-1" value="等待发货收货"/>
    <ul>
        <li data-value="0">全部</li>
        <li data-value="1">待审核</li>
        <li data-value="1">已拒绝</li>
        <li data-value="1">等待发货收货</li>
        <li data-value="1">订单取消</li>
        <li data-value="1">交易结束</li>
    </ul>
</div>


//下拉框
 $('body').on('click', '.this_select_style .selectmenu', function () {
    $this = $(this);
    $this.toggleClass("show_ul");
    $this.next().toggle();
    $('#mask').toggle();
})
$('body').on('click', '.this_select_style ul li', function () {
    $this = $(this);
    var thisInput = $this.parent().siblings("input");
    thisInput.attr("data-value", $this.attr("data-value")).val($this.text()).toggleClass("show_ul");
    $this.parent().toggle();
    $('#mask').toggle();
})
$('body').on('click','#mask',function(){
    $(this).toggle();
    $('.this_select_style .selectmenu').removeClass("show_ul");
    $('.this_select_style ul').hide();
})

---

我叫洱月，我愿意陪你到洱海风花雪月，你，看到我了吗？