1 、垂直居中效果
具體查看:http://www.itdecent.cn/writer#/notebooks/1470914/notes/13795535
2、多行文本溢出時(shí)自動(dòng)顯示省略號(hào)在夸瀏覽器時(shí)的解決方案.
在開發(fā)中單行文本溢出顯示省略號(hào)很簡單,但是多行文本溢出也是比較常見的,在解決時(shí)時(shí)常會(huì)遇到夸瀏覽器不兼容的問題,最近找到了兩個(gè)比較好用的插件,在這里分享下:
兩個(gè)插件的地址:
https://github.com/josephschmitt/Clamp.js
https://github.com/FrDH/jQuery.dotdotdot
2.1 Clamp.js的使用方法特別簡單,甚至不需要jquery等依賴庫.
參數(shù): clamp (Number | String | 'auto').

        var element= document.getElementById('clampjs');
        $clamp(element, {clamp: 3}); //可以直接定義顯示的行數(shù),溢出部
                                                                  分會(huì)自動(dòng)添加...
        $clamp(element, {clamp: '65px'}); ////可以直接定義元素的高度,插件自動(dòng)計(jì)算可以顯示多少行,溢出部分會(huì)自動(dòng)添加...
       $clamp(ps, {clamp: 'auto'});    //也可設(shè)置auto,這時(shí)標(biāo)簽元素要設(shè)置高度

2.2 dotdotdot的使用方法,需要依賴于jquery
先引用必須的依賴庫:

    <script type="text/javascript" language="javascript" 
    src="src/jquery.dotdotdot.min.js"></script>

使用也很簡單

 <script>
        $(function(){
            $('.test1').dotdotdot({
                // ellipsis: "\u2026 ",
                after: 'a',   //可以在省略號(hào)后面添加一些如'read more'等的提示語.
                // watch: 'window'
                // wrap: 'letter'
            });
            $('.test2').dotdotdot();
        })
    </script>

這個(gè)插件在英文狀態(tài)很好用,但在中文狀態(tài)有時(shí)不顯示內(nèi)容,知道怎么解決的朋友希望可以告訴我
3、img標(biāo)簽根據(jù)父div等比例縮放不變形.
在開發(fā)中進(jìn)行列表或圖文布局時(shí),經(jīng)常會(huì)遇到圖片需要根據(jù)父div的縮放自動(dòng)等比例自動(dòng)縮放而不變形,我們可以根據(jù)媒體查詢?cè)诓煌某叽缦陆o圖片設(shè)置合適的尺寸,但是這樣太繁瑣,并且如果寬高的尺寸和原始圖片尺寸相差很大的話很容易造成圖片失真的現(xiàn)象,先總結(jié)兩種方法可以自動(dòng)根據(jù)父div的縮放進(jìn)行等比例縮放.
3.1

      .parent-box{ // 對(duì)圖片盒子設(shè)置 overflow: hidden;,不需要固定寬高
            overflow: hidden;
        }

       .parent-box img{ // 對(duì)圖片進(jìn)行如下設(shè)置,
            max-width: 100%;
            max-height: 100%;
        }

這樣設(shè)置之后,圖片就可以自動(dòng)壓縮而不會(huì)失真了.在進(jìn)行響應(yīng)式布局時(shí)也同樣適合.
3.2 使用div的 background屬性設(shè)置背景圖片并配合padding-top來解決
style部分

        .img-box-1{max-width: 1024px;}
        .img-content{
            padding-top:30.85%; /* 316 / 1024 padding-top為圖片的（高度 / 寬度 ）* 100% */
            background: url("http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg") no-repeat;
            background-size:cover;
            background-position:center;
        }

html部分

        <div class="img-box-1">
           <div class="img-content"></div>
        </div>

實(shí)現(xiàn)的基本原理：將使用到保持元素的寬高比的技巧，為元素添加垂直方向的padding-top的值，使用百分比的形式，這個(gè)值是相對(duì)于元素的寬而定的，比如我上面的一張圖片的寬度是1024px，高度為316px；那么現(xiàn)在的padding-top = （高度 / 寬度 ）＊ 100% ＝ （316 ／ 1024）＊ 100% ＝ 30.85%;

但是僅僅對(duì)圖片高度和寬度縮放的放還不夠，我門還必須添加 background-size:cover, 使這個(gè)屬性讓背景鋪滿元素的，但是IE8及以下不支持該屬性，因此為了兼容IE下面的瀏覽器，我門還需要再加一個(gè)屬性 background-position: center ; 同時(shí)我門也要保證 圖片的寬度最大等于父容器的寬度；因此下面的HTML代碼

知識(shí)點(diǎn)參考:http://www.cnblogs.com/tugenhua0707/p/5260411.html

4、div橫向超出一定寬度之后可以橫向滑動(dòng)

父div：

.father-div{
  width: 1920px;
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
}

子div：

.children-div{
  width: 384px;
  height: 216px;
  display: inline-block;
}

5、視頻播放