css常見小問題（本身遇到的）

• 禁止div點擊

//css屬性：
    pointer-events: none;   
    //或者定義屬性，在js中添加：
    $(".原類名").addClass("新類名");  
//js：
    //禁用
    $.fn.disable = function () {
        $(this).addClass("disable");
    };
    //啓用
    $.fn.enable = function () {
        $(this).removeClass("disable");
    };
    //或者
    $("#@id").disable();
    $("#@id").enable();

View Code

• 鼠標放置顯示「小手」手勢，並顯示提示文字

<div style="cursor:pointer;" title="提示的信息">這裏是文字內容</div>

• 超出區域的文字顯示省略號

//1.普通狀況
display:inline-block;   //這個看狀況加 
overflow:hidden; /*超出部分隱藏*/
white-space:nowrap; /*讓文本強制在一行不換行*/
text-overflow:ellipsis;/*顯示省略號來表明被修剪的文本*/

/*2.長的英文單詞換行*/
word-break:break-all; /*支持IE，chrome，FF不支持*/
word-wrap:break-word;/*支持IE，chrome，FF*/


/*3.兩行截取  2行超出顯示...*/
.mui-ellipsis-2 {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal!important;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/*4.select的狀況下*/
<select onmouseover="selbox($(this))" ></select>
<script>
function selbox(a){
var val = a.val();
a.attr("title",val);
}

View Code

• div+css控制圖片等比例縮放：

/*外側div設置寬、高，內側圖片設置寬、高爲auto;而且設置max-width和max-height爲同等比例*/

.imgbox50{
    width:200px;
    height:50px;
    border-radius:50%;
    text-align: center;
    margin:0 auto;
}
.Img50{
    max-width:85%;
    max-height:85%;
    border-radius:5px;
    width:auto;
    height:auto;
}
<div class="imgbox50 mt5">
    <img class="Img50" src="">
</div>

View Code

• ui樣式

第一個li的樣式：li:first-child {  background:#f00;  }
最後一個li的樣式：li:last-child {  background:#000;  }
第n個li的樣式：li:nth-child(n) {  background:#000;  }
倒數第二個li的樣式：nth-last-of-type(2){  background:#000;  }
奇數列表：li:nth-child(odd) {  background:#f00;  }
偶數列表：li:nth-child(even) {  background:#f00;  }

View Code

• 設置元素在另外一個元素的最底部

//設置父div的
position:relative;
//子div
position: absolute;
bottom:0;

View Code

• 設置背景顏色，不透明度

background-color:#6d7a83;
opacity:0.75;

• select文字對齊方式

//右對齊
select {
    direction: rtl;
}
//左對齊
select option {
    direction: ltr;
}
//居中對齊設置padding 

View Code

• input設置提示文字的顏色

/* WebKit browsers */ 
input::-webkit-input-placeholder {color: red; } 
/* Mozilla Firefox 4 to 18 */ 
input:-moz-placeholder { color: red; } 
/* Mozilla Firefox 19+ */ 
input::-moz-placeholder { color: red; } 
/* Internet Explorer 10+ */ 
input:-ms-input-placeholder {color: red; } 

View Code

• 修改select下拉按鈕的樣式是自定義的：

select::-ms-expand { display:none; }//隱藏自帶的樣式
select{
        height:30px;
        line-height:28px;
        padding:0 16px 0 5px;
        border:1px solid #e4e4e4;
        background: url("/zbw/img/mobile/public/icon/sjxdown.png") right center no-repeat #fff;
        background-size:16px;
        text-align:left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        appearance:none;
        -moz-appearance:none;
        -webkit-appearance:none;
        cursor:pointer;
}

View Code

• table中多個tr之間的間距

<tr style="display:block;margin-top:10px;"></tr>

• 兩個div之間加個豎線樣式

<div style="margin-top: 20px;width:1px;height:80px;float:left;background:#e4e4e4;"></div>

• textarea禁止拉伸

style="resize:none"