摘要：如何在圖片開(kāi)始加載時(shí)獲取大小可以在這里找到。其他不平鋪橫向平鋪縱向平鋪固定滾動(dòng)水平居中水平居中并垂直居中二關(guān)閉隱藏滑動(dòng)上下事件屬性可返回事件的目標(biāo)節(jié)點(diǎn)觸發(fā)該事件的節(jié)點(diǎn)，如生成事件的元素文檔或窗口。的結(jié)合示例關(guān)閉隱藏滑動(dòng)

一、關(guān)于樣式（CSS）

1、Input

1）Input可編輯可下拉

<div>
   <input type="text" list="itemlist" name="itemid" value="{$data.itemid}" >
 　<datalist id="itemlist">
     <option>item1option>
     <option>item2option>
   datalist>
div>

2）Input下拉

<select>
    <option value="-1" >---請(qǐng)選擇分辨率---option>

    <option value="0" >320 X 240option>

select>

3）Input邊線點(diǎn)擊不顯示

input點(diǎn)擊邊框樣式無(wú)效

outline: none;  /**/

4）提示文字：placeholder="手機(jī)號(hào)"

input修改提示文字顏色

::-webkit-input-placeholder { /* input提示文字顏色 */
    color: #fff;
    font-size:20px;
}

5）input出現(xiàn)背景是黃色

這種點(diǎn)擊框也不會(huì)出現(xiàn)黃色了

input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset !important;}

還有一種就是關(guān)閉自動(dòng)填充：autocomplete="off"

2、是否占位：顯示/隱藏

1）display

display:none;  /*不占位*/

display: block;  /*顯示*/

2）visibility

visibility: hidden;   /*占位*/

visibility: visible;  /*顯示*/

3、定位

1) 絕對(duì)定位：position:absolute

　a)   父級(jí)不自動(dòng)增高，解決方法：overflow:auto;

2）相對(duì)定位：position: relative;

3）固定定位：position:fixed;

4、Textarea

1）div模擬textarea文本域輕松實(shí)現(xiàn)高度自適應(yīng)

.testdisplay {
   width: 100%;
   min-height: 200px;
   max-height: 400px;
   margin-left: auto;
   margin-right: auto;
   outline: 0;
   font-size: 12px;
   line-height: 24px;
   word-wrap: break-word;
   overflow-x: hidden;
   overflow-y: auto;
   /*box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);*/
}

5、手指光標(biāo)

 cursor: pointer; /*手指光標(biāo)*/

6、文本省略號(hào)

1）單行文本省略號(hào)

.digital-limit {
   overflow: hidden;
   text-overflow: ellipsis;
   /*顯示...*/
   white-space: nowrap;
   /*文本不換行，這樣超出一行的部分被截取，顯示...*/
}

2）多行文本省略號(hào)

.digital-normal {
   display: -webkit-box;
   -webkit-box-orient: vertical; 
   -webkit-line-clamp: 3; 
   overflow: hidden;
}

7、滾動(dòng)條修改樣式

::-webkit-scrollbar {/*滾動(dòng)條整體樣式*/
   width:  8px !important;     /*高寬分別對(duì)應(yīng)橫豎滾動(dòng)條的尺寸*/
   height: 8px !important;
}

::-webkit-scrollbar-thumb {/*滾動(dòng)條里面小方塊*/
   border-radius: 8px !important;
   -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,.1) !important;
   background: rgba(0,0,0,.1) !important;
}

::-webkit-scrollbar-track {/*滾動(dòng)條里面軌道*/
   -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0) !important;
   border-radius: 10px !important;
   background: rgba(0,0,0,0) !important;
} 

8、透明度

1）背景與字體透明

opacity：0.5; /* 0-1 的透明度 */

2）背景透明，字體不透明

 background: rgba(216, 216, 216, .1.5);

9、img圖片截圖

.historys img{

    width: 100%;

    height: 100%;

    position: absolute;

    right: -5px;

    clip: rect(0 103px 100px 0px);

}

通過(guò)js在圖片剛剛開(kāi)始加載的時(shí)刻可以獲取其寬度和高度，然后用js決定限制圖片的高度還是寬度。如何在圖片開(kāi)始加載時(shí)獲取大小可以在這里找到。

Js:

$(function(){

    $(.historys img).each(function(){

        var $this=$(this);

        imgReady($this.attr(src),function(){

            if(this.width>this.height){

                $this.attr(height,100);

                $this.removeAttr(width);

            }

        });

    });

});

10.背景圖

1）尺寸等比擴(kuò)展圖片來(lái)填滿元素，即cover值： background-size:cover; 

2）尺寸等比縮小圖片來(lái)適應(yīng)元素的尺寸，即contain值：background-size:contain; 

3）尺寸以圖片自身大小來(lái)填充元素，即auto值： background-size:auto;

4）圖片模糊

使用filter()函數(shù)實(shí)現(xiàn)模糊背景，使用方法：

-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
 filter: blur(5px);

5）其他 

不平鋪：background-repeat: no-repeat; 
橫向平鋪：background-repeat: repeat-x; 
縱向平鋪：background-repeat: repeat-y; 
固定：background-attachment: fixed; 
滾動(dòng)：background-attachment: scroll; 
水平居中：background-position: center; 
水平居中并垂直居中：background-position: center center; 

二、Js

1.fadeOut：關(guān)閉、隱藏

2.slideUp/out//滑動(dòng)上/下

3.event .target  

targe事件屬性可返回事件的目標(biāo)節(jié)點(diǎn)（觸發(fā)該事件的節(jié)點(diǎn)），如生成事件的元素、文檔或窗口。

1~3的結(jié)合示例

$(document).ready(function(){

    $(".backdrop,.box").click(function(event){

        if (event.target.className == backdrop) {

            $(#backdrop).fadeOut(); //fadeOut：關(guān)閉、隱藏

            $(#box).slideUp(200); //slideUP:滑動(dòng)

        }

    });

});