摘要：允許以特定的方式去定義匹配某個(gè)區(qū)域的特定元素。在規(guī)定一個(gè)框的寬高之外給這個(gè)框加內(nèi)邊距和邊框。和默認(rèn)值在規(guī)定的一個(gè)框的寬高之內(nèi)給這個(gè)框加內(nèi)邊距和邊框。

content-box：在規(guī)定一個(gè)框的寬高之外給這個(gè)框加內(nèi)邊距和邊框。
border-box：（textarea和select默認(rèn)值）在規(guī)定的一個(gè)框的寬高之內(nèi)給這個(gè)框加內(nèi)邊距和邊框。

/*看個(gè)人習(xí)慣而用，但一般標(biāo)簽?zāi)J(rèn)屬性是content-box，除textarea,select*/ 
   -moz-box-sizing: content-box; 
   -webkit-box-sizing: content-box;
   box-sizing: content-box;

/*在IE10+瀏覽器中, 使用css即可隱藏input文本輸入框右側(cè)的叉號(hào)*/
input[type=text]::-ms-clear,::-ms-reveal{display:none;}
input::-ms-clear,::-ms-reveal{display:none;}
input{
  /*去除點(diǎn)擊出現(xiàn)輪廓顏色*/
  outline: none;
  -webkit-appearance: none; /*去除系統(tǒng)默認(rèn)的樣式，蘋(píng)果手機(jī)上的陰影*/
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*點(diǎn)擊高亮的顏色*/
  /*padding已在重置樣式中去除，如果沒(méi)有去除，記得有padding哦*/    
}

textarea{
    /*別忘了文本域的box-sizing屬性值是border-box;所有的邊框和padding都是在你固定的寬高的基礎(chǔ)上繪制*/
     /*去除點(diǎn)擊出現(xiàn)輪廓顏色*/
      outline: none;    
      /*如果有需要，去掉右下角的可拉伸變大小的圖標(biāo)和功能*/
      resize: none;
      /*padding已在重置樣式中去除，如果沒(méi)有去除，記得有padding哦*/
}

input::-webkit-input-placeholder { 
    /* WebKit browsers */ 
    font-size:14px;
    color: #333;
} 
input:-moz-placeholder { 
    /* Mozilla Firefox 4 to 18 */ 
    font-size:14px;
    color: #333;
} 
input::-moz-placeholder { 
    /* Mozilla Firefox 19+ */ 
    font-size:14px;
    color: #333;
} 
input:-ms-input-placeholder { 
    /* Internet Explorer 10+ */ 
    font-size:14px;
    color: #333;
}

/*清除ie的默認(rèn)選擇框樣式清除，隱藏下拉箭頭*/
select::-ms-expand { display: none; }
select {
  /*Chrome和Firefox里面的邊框是不一樣的，所以復(fù)寫(xiě)了一下*/
  border: solid 1px #333;

  /*將默認(rèn)的select選擇框樣式清除*/
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;

  /*在選擇框的最右側(cè)中間顯示小箭頭圖片*/
  background: url("小箭頭圖片路徑") no-repeat right center transparent;

  /*為下拉小箭頭留出一點(diǎn)位置，避免被文字覆蓋*/
  padding-right: 14px;

  /*去除點(diǎn)擊出現(xiàn)輪廓顏色*/
  outline: none;
}

button{
    /*本身有2px的邊框，一般的button都不需要邊框*/
    border: none;
    /*本身有的背景色，可以用其他顏色取代*/
    background: #333;
    /*padding已在重置樣式中去除，如果沒(méi)有去除，記得有padding哦*/
}

/*因?yàn)橛胕nput[type="radio"]和input[type="cheakbox"]都不能直接改變它們的樣式，這個(gè)時(shí)候要用到label標(biāo)簽關(guān)聯(lián)，然后隱藏input標(biāo)簽，直接給label標(biāo)簽樣式就好了。選中l(wèi)abel就是選中了此標(biāo)簽*/
男

  

/*單行文字的時(shí)候*/
white-space: nowrap; /* 強(qiáng)制不換行 */
overflow:hidden; /*內(nèi)容超出寬度時(shí)隱藏超出部分的內(nèi)容 */ 
text-overflow:ellipsis;/* 當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記(...) ，需與overflow:hidden;一起使用*/
/*多行文字的時(shí)候*/
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* 2行 */
-webkit-box-orient: vertical;

HTML：
    

        
        
        
        
    
 方法一： 
     div > span :not(:first-child) {
        margin-left:10px
     }
 方法二：兄弟元素選擇器
     div > span + span {
        margin-left:10px
     }
 HTML：
     

        
        

        
        
    
  方法：
    div > * :not(:first-child) {
        margin-left:10px
    }
    

$(document).ready(function(){
    //限制字符個(gè)數(shù)
    $(“.zxx_text_overflow”).each(function(){
        var maxwidth=23;
        if($(this).text().length>maxwidth){
            $(this).text($(this).text().substring(0,maxwidth));
            $(this).html($(this).html()+’…’);
        }
    });
});

-moz-user-select: none; /* 火狐 */
-webkit-user-select: none; /* webkit瀏覽器 */
-ms-user-select: none; /* IE10 */
-khtml-user-select: none; /* 早期瀏覽器 */
user-select: none;

vertical-align: 30%;
vertical-align: middle;

div{
    width:400px;
    height:300px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-150px 0 0 -200px;
}

1. 把表格的sytle的table-layout: fixed;
(就是表格固定寬度，就是表格既要自適應(yīng)他外面的容器，也不要撐出去)
2. 然后設(shè)置td的word-wrap: break-word;
3. table邊框線合并為一條：border-collapse: collapse;

body{
    background: url("../img/jxs-banner.png") no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
}

-webkit-tap-highlight-color:rgba(0,0,0,0) 
//webkit是蘋(píng)果瀏覽器引擎，tap點(diǎn)擊，highlight背景高亮，color顏色，顏色用數(shù)值調(diào)節(jié)。

問(wèn)題產(chǎn)生的原因：chrome瀏覽器對(duì)光標(biāo)高度的設(shè)置原則為，當(dāng)沒(méi)有內(nèi)容的時(shí)候光標(biāo)的高度=input的line-height的值，當(dāng)有內(nèi)容時(shí)，光標(biāo)從input的頂端到文字的底部。

方法1：將line-height的值設(shè)置為跟字體大小一致；如果高度達(dá)不到，用padding去撐；
方法2：對(duì)chrome不設(shè)置line-height，它會(huì)自動(dòng)文字居中，對(duì)ie進(jìn)行hack設(shè)置line-height的值以保證文字垂直居中；這里要注意一下，如果在reset的樣式文件中有設(shè)置line-height等值，請(qǐng)進(jìn)行l(wèi)ine-height的重置，可以用line-height:normal。具體可以看看騰訊好萊塢頁(yè)面的搜索框。

// 在js中寫(xiě)的返回鍵
onclick = "history.go(-1)";

// 強(qiáng)制刷新頁(yè)面
window.location.reload(true);

// 只顯示20個(gè)字
function LimitNum(txt,idName) {
    var str = txt;
    str = str.substr(0,20) + "..." ;
    var id=document.getElementById(idName);
    id.innerText=str;
}   

假設(shè)有很多個(gè)更多和收起功能需要展示在同一個(gè)頁(yè)面
// 遍歷所有的更多按鈕
$(".more").each(function(){
      $(this).click(function(){
      // 當(dāng)點(diǎn)擊當(dāng)前的更多按鈕時(shí)，找到上N級(jí)的，或者是同級(jí)，反正是要展開(kāi)的div切換類(lèi)去實(shí)現(xiàn)展開(kāi)或收回
        $(this).parent().prev().toggleClass("show_more");
        // 首先在每個(gè)更多按鈕中加一個(gè)自定義的屬性status = "true"
        if($(this).attr("status") == "true"){
            // 當(dāng)?shù)谝淮吸c(diǎn)擊當(dāng)前更多的時(shí)候會(huì)展開(kāi)，“更多”的按鈕文本會(huì)變成“收起”文本。
          $(this).html("收起 ∧");
             // 在賦值給status為false
          $(this).attr("status","false");
        }else{
          $(this).html("更多 ∨");
          $(this).attr("status","true");
        }
      });
  });
  

$(".menu").on("click", function(e){
  $("#menuBox").toggle();
  $(document).on("click", function(){
      $("#menuBox").hide();
  });
  e.stopPropagation();
}); 
$("#menuBox").on("click", function(e){
       e.stopPropagation();
 });
或

$("body").click(function(e) {
   if(e.target.id != "btn" && e.target.id != "overlay")
      if ( $("#overlay").is(":visible") ) {
         $("#overlay").hide();
      }
})   

var doc = document,
    domList = doc.getElementsByTagName("input"),
    checkBoxList = [],
    len = domList.length;
while (len--) {
    if (domList[len].type === "checkbox") {
        checkBoxList.push(domList[len]);
    }
}

$("div.content *").not(".keep"); 
// 表示content類(lèi)的div下除keep類(lèi)以外的所有元素；另外，注意*表示所有元素

    
    
    
        
        
        
    
    
    

        

            

                
姓名
                
年齡
                
備注
                
名言
            
            

                
zhangsan
                
14
                
這部分內(nèi)容一一一會(huì)被省略一部分哦，看不了完整了咯，這里才是完整的，哈哈哈哈哈哈哈哈查看更多
                
努力讓自己變更好
            
            

                
zhangsan
                
14
                
這部分內(nèi)容二二二會(huì)被省略一部分哦，看不了完整了咯，這里才是完整的，哈哈哈哈哈哈哈哈查看更多
                
天道酬勤
            
            

                
zhangsan
                
14
                
這部分內(nèi)容三三三會(huì)被省略一部分哦，看不了完整了咯，這里才是完整的，哈哈哈哈哈哈哈哈查看更多
                
心如止水
            
        
    
    
    
    
    
    
    

$(window).scroll(function(){  
    if ($(window).scrollTop()>100){  
        $("#below").fadeIn(600);  
    }  else  {  
        $("#below").fadeOut(600);  
    }  
});  
$("#below").click(function(){  
    $("body,html").animate({scrollTop:0},1000);  
    return false;  
});

解決思路：我們要阻止頁(yè)面滾動(dòng)，那么何不將其固定在視窗（即 position: fixed），這樣它就無(wú)法滾動(dòng)了，當(dāng)蒙層關(guān)閉時(shí)再釋放。 當(dāng)然還有一些細(xì)節(jié)要考慮，將頁(yè)面固定視窗后，內(nèi)容會(huì)回頭最頂端，這里我們需要記錄一下，同步 top 值。
示例代碼：
let bodyEl = document.body
let top = 0
function stopBodyScroll (isFixed) {
  if (isFixed) {
    top = window.scrollY
    bodyEl.style.position = "fixed"
    bodyEl.style.top = -top + "px"
  } else {
    bodyEl.style.position = ""
    bodyEl.style.top = ""
    window.scrollTo(0, top) // 回到原先的top
  }
}

請(qǐng)把$("input").attr("checked","true")
換成
$("input").prop("checked","true");

$("#copyBtn").on("click",function(event){
    var link = $(event.currentTarget).prev("input");
    link.select();
    document.execCommand("Copy");
    layer.msg("復(fù)制成功，快去告訴你的小伙伴吧~");
})

下載jquery.qrcode.min.js，引入文件

var uri = $("#copyLinkText").attr("data-weixin");
    $("#wxCode").qrcode(uri);
    
    function toUtf8(str) {    
        var out, i, len, c;    
        out = "";    
        len = str.length;    
        for(i = 0; i < len; i++) {    
            c = str.charCodeAt(i);    
            if ((c >= 0x0001) && (c <= 0x007F)) {    
                out += str.charAt(i);    
            } else if (c > 0x07FF) {    
                out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));    
                out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));    
                out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));    
            } else {    
                out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));    
                out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));    
            }    
        }    
        return out;    
    }   
  // 微信二維碼中間加logo圖，給二維碼添加一個(gè)自定義的logo，會(huì)讓你的二維碼看上去更專(zhuān)業(yè)，默認(rèn)的Jquery.Qrcode是不支持添加自定義Logo的，這里比較簡(jiǎn)單的實(shí)現(xiàn)方案就是，針對(duì)每個(gè)二維碼添加一個(gè)img標(biāo)簽，讓img在二維碼區(qū)域相對(duì)居中顯示即可。
  
  //控制Logo圖標(biāo)的位置
  var margin = ($("#qrCodeDiv").height() - $("#qrCodeIco").height()) / 2; 
  $("#qrCodeIco").css("margin", margin);

$(".share_weibo").on("click",function(){
    var weibo_url = "http://service.weibo.com/share/share.php?";
    var p = {
        url: uri += "?f=3",
        title: desc,
        /*分享標(biāo)題(可選)*/
        // pic: item.Cover,
        /*分享圖片的路徑(可選)*/
        searchPic: "true"
    };
    var s = [];
    for (var i in p) {
        s.push(i + "=" + encodeURIComponent(p[i] || ""));
    }
    weibo_url += s.join("&");
    window.open(weibo_url);
});

$(".share_qzone").on("click",function(){
        var qzone_url = "http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?";
        var p = {
            url: uri += "?f=4",
            showcount: "1",
            /*是否顯示分享總數(shù),顯示："1"，不顯示："0" */
            desc: desc,
            /*默認(rèn)分享理由(可選)*/
            summary: "分享注冊(cè)送現(xiàn)金紅包啦！快來(lái)注冊(cè)吧~",
            /*分享摘要(可選)*/
            title: "信誠(chéng)恒通新用戶注冊(cè)",
            /*分享標(biāo)題(可選)*/
            site: "信誠(chéng)恒通",
            /*分享來(lái)源 如：騰訊網(wǎng)(可選)*/
            // pics: item.Cover,
            /*分享圖片的路徑(可選)*/
            style: "203",
            width: 98,
            height: 22
        };
        var s = [];
        for (var i in p) {
            s.push(i + "=" + encodeURIComponent(p[i] || ""));
        }
        qzone_url += s.join("&");
        window.open(qzone_url);
    });

Vue.http.headers.common["X-CSRF-TOKEN"] = document.querySelector("meta[name=csrf-token]").getAttribute("content");
    

JS:
    //發(fā)送驗(yàn)證碼函數(shù)
    function sendsms(e) {
        /*發(fā)送驗(yàn)證碼功能*/
        countdown(e); //若發(fā)送驗(yàn)證碼成功，則調(diào)用倒計(jì)時(shí)函數(shù)
    }
    //倒計(jì)時(shí)函數(shù)
    var time = 60;

    function countdown(e) {
        if (time == 0) {
            //e.setAttribute("disabled",false);         對(duì)沒(méi)有disbaled屬性的span標(biāo)簽，此方法無(wú)效
            e.setAttribute("onclick", "sendsms(this)");
            $(".send-code").html("獲取驗(yàn)證碼");
            time = 60;
        } else {
            //e.attr("disabled",true);                  對(duì)沒(méi)有disbaled屬性的span標(biāo)簽，此方法也無(wú)效
            //e.setAttribute("onclick", "");            這樣寫(xiě)也可以
            e.removeAttribute("onclick");
            $(".send-code").html(time + "秒后重新獲得");
            time--;
            setTimeout(function () {
                countdown(e)
            }, 1000)
        }
    }  
    
 HTML:
 
 獲取驗(yàn)證碼  

    
{{item.title}}

new Vue({
    el:".list",
    data:{
        current:0,
        items:[
            {title:"item1"},
            {title:"item2"},
            {title:"item3"},
            {title:"item4"}
        ]
    },
    methods:{
        addClass:function(index){

            this.current=index;
        }
    }
})

    
    添加

.test-1::-webkit-scrollbar {/*滾動(dòng)條整體樣式*/
    width: 10px;     /*高寬分別對(duì)應(yīng)橫豎滾動(dòng)條的尺寸*/
    height: 1px;
}
.test-1::-webkit-scrollbar-thumb {/*滾動(dòng)條里面小方塊*/
    border-radius: 10px;
     -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #535353;
}
.test-1::-webkit-scrollbar-track {/*滾動(dòng)條里面軌道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 10px;
    background: #EDEDED;
}