1. box-sizing：允许以特定的方式去定义匹配某个区域的特定元素。

content-box：在规定一个框的宽高之外给这个框加内边距和边框。border-box：（textarea和select默认值）在规定的一个框的宽高之内给这个框加内边距和边框。/*看个人习惯而用，但一般标签默认属性是content-box，除textarea,select*/    -moz-box-sizing: content-box;    -webkit-box-sizing: content-box;   box-sizing: content-box;

2. 美化input框

/*在IE10+浏览器中, 使用css即可隐藏input文本输入框右侧的叉号*/input[type=text]::-ms-clear,::-ms-reveal{display:none;}input::-ms-clear,::-ms-reveal{display:none;}input{  /*去除点击出现轮廓颜色*/  outline: none;  -webkit-appearance: none; /*去除系统默认的样式，苹果手机上的阴影*/  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*点击高亮的颜色*/  /*padding已在重置样式中去除，如果没有去除，记得有padding哦*/    }

3. 美化textarea文本域

textarea{    /*别忘了文本域的box-sizing属性值是border-box;所有的边框和padding都是在你固定的宽高的基础上绘制*/     /*去除点击出现轮廓颜色*/      outline: none;          /*如果有需要，去掉右下角的可拉伸变大小的图标和功能*/      resize: none;      /*padding已在重置样式中去除，如果没有去除，记得有padding哦*/}

4. 改变placeholder的字体颜色大小

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;}

5. 美化select

/*清除ie的默认选择框样式清除，隐藏下拉箭头*/select::-ms-expand { display: none; }select {  /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/  border: solid 1px #333;  /*将默认的select选择框样式清除*/  appearance:none;  -moz-appearance:none;  -webkit-appearance:none;  /*在选择框的最右侧中间显示小箭头图片*/  background: url("小箭头图片路径") no-repeat right center transparent;  /*为下拉小箭头留出一点位置，避免被文字覆盖*/  padding-right: 14px;  /*去除点击出现轮廓颜色*/  outline: none;}

6. 美化button按钮

button{    /*本身有2px的边框，一般的button都不需要边框*/    border: none;    /*本身有的背景色，可以用其他颜色取代*/    background: #333;    /*padding已在重置样式中去除，如果没有去除，记得有padding哦*/}

7. 美化单选框、多选框或者是上传文件按钮

/*因为用input[type="radio"]和input[type="cheakbox"]都不能直接改变它们的样式，这个时候要用到label标签关联，然后隐藏input标签，直接给label标签样式就好了。选中label就是选中了此标签*/男

8. 多出文字用省略号表示

/*单行文字的时候*/white-space: nowrap; /* 强制不换行 */overflow:hidden; /*内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ，需与overflow:hidden;一起使用*//*多行文字的时候*/overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2; /* 2行 */-webkit-box-orient: vertical;

9. 选择器-选择非第一个子元素

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

10. jQuery限制字符字数的方法

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

11. css页面点击文字出现蓝色底色去掉方法

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

12. 在遇见图标的垂直位置很难调整的时候可以用这个属性

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

13. 如何让一个div在页面中上下左右居中

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

14. css中设置table中的td内容自动换行，边框线合并为一条

1. 把表格的sytle的table-layout: fixed;(就是表格固定宽度，就是表格既要自适应他外面的容器，也不要撑出去)2. 然后设置td的word-wrap: break-word;3. table边框线合并为一条：border-collapse: collapse;

15. css让背景居中并充满整个屏幕

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

16. H5页面点击按钮的时候，屏幕总会闪动一下

-webkit-tap-highlight-color:rgba(0,0,0,0) //webkit是苹果浏览器引擎，tap点击，highlight背景高亮，color颜色，颜色用数值调节。

17. 解决苹果手机上input输入框的光标高度变化问题

问题产生的原因：chrome浏览器对光标高度的设置原则为，当没有内容的时候光标的高度=input的line-height的值，当有内容时，光标从input的顶端到文字的底部。方法1：将line-height的值设置为跟字体大小一致；如果高度达不到，用padding去撑；方法2：对chrome不设置line-height，它会自动文字居中，对ie进行hack设置line-height的值以保证文字垂直居中；这里要注意一下，如果在reset的样式文件中有设置line-height等值，请进行line-height的重置，可以用line-height:normal。具体可以看看腾讯好莱坞页面的搜索框。

18. js

// 在js中写的返回键onclick = 'history.go(-1)';// 强制刷新页面window.location.reload(true);

19. 判断用户使用的是手机还是电脑访问页面，并跳转到相应页面

20. 判断用户使用的是苹果手机还是安卓

21. cjs实现字数限制，超出部分省略号

// 只显示20个字function LimitNum(txt,idName) {    var str = txt;    str = str.substr(0,20) + '...' ;    var id=document.getElementById(idName);    id.innerText=str;}

22. jq实现点击更多展开，点击收起缩回

假设有很多个更多和收起功能需要展示在同一个页面// 遍历所有的更多按钮$('.more').each(function(){      $(this).click(function(){      // 当点击当前的更多按钮时，找到上N级的，或者是同级，反正是要展开的div切换类去实现展开或收回        $(this).parent().prev().toggleClass('show_more');        // 首先在每个更多按钮中加一个自定义的属性status = "true"        if($(this).attr('status') == 'true'){            // 当第一次点击当前更多的时候会展开，“更多”的按钮文本会变成“收起”文本。          $(this).html('收起 ∧');             // 在赋值给status为false          $(this).attr('status','false');        }else{          $(this).html('更多 ∨');          $(this).attr('status','true');        }      });  });

23. jquery 点击元素以外任意地方隐藏该元素的方法

$(".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();      }})

24. 取到页面中所有的checkbox怎么做

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

25. jquery 如何选取除某个元素外的所有元素

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

26. 一个多处查看更多和收起的实例

                
                                
    
        
     
                  
       
                        
姓名
                        
年龄
                        
备注
                        
名言
                   
                   
                        
zhangsan
                        
14
                        
这部分内容一一一会被省略一部分哦，看不了完整了咯，这里才是完整的，哈哈哈哈哈哈哈哈查看更多
                        
努力让自己变更好
                   
                   
                        
zhangsan
                        
14
                        
这部分内容二二二会被省略一部分哦，看不了完整了咯，这里才是完整的，哈哈哈哈哈哈哈哈查看更多
                        
天道酬勤
                   
                   
                        
zhangsan
                        
14
                        
这部分内容三三三会被省略一部分哦，看不了完整了咯，这里才是完整的，哈哈哈哈哈哈哈哈查看更多
                        
心如止水
                   
              
     
        
    
                

27. 点击按钮置顶

$(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;  });

28. 禁止蒙层底部页面跟随滚动

解决思路：我们要阻止页面滚动，那么何不将其固定在视窗（即 position: fixed），这样它就无法滚动了，当蒙层关闭时再释放。 当然还有一些细节要考虑，将页面固定视窗后，内容会回头最顶端，这里我们需要记录一下，同步 top 值。示例代码：let bodyEl = document.bodylet top = 0function 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  }}

30. 为什么CheckBox明明是checked="checked"也不显示选中状态

请把$('input').attr('checked','true')换成$('input').prop('checked','true');

31. 点击复制按钮复制链接

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

32. 自动生成微信二维码

下载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图，给二维码添加一个自定义的logo，会让你的二维码看上去更专业，默认的Jquery.Qrcode是不支持添加自定义Logo的，这里比较简单的实现方案就是，针对每个二维码添加一个img标签，让img在二维码区域相对居中显示即可。    //控制Logo图标的位置  var margin = ($("#qrCodeDiv").height() - $("#qrCodeIco").height()) / 2;   $("#qrCodeIco").css("margin", margin);

33. 分享到微博

$('.share_weibo').on('click',function(){    var weibo_url = "http://service.weibo.com/share/share.php?";    var p = {        url: uri += '?f=3',        title: desc,        /*分享标题(可选)*/        // 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);});

34. 分享到QQ空间

$('.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',            /*是否显示分享总数,显示：'1'，不显示：'0' */            desc: desc,            /*默认分享理由(可选)*/            summary: '分享注册送现金红包啦！快来注册吧~',            /*分享摘要(可选)*/            title: '信诚恒通新用户注册',            /*分享标题(可选)*/            site: '信诚恒通',            /*分享来源 如：腾讯网(可选)*/            // 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);    });

35. vue设置header头

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

36. 换行，不换行，字间距

37. 获取验证码及其验证码倒计时

JS:    //发送验证码函数    function sendsms(e) {        /*发送验证码功能*/        countdown(e); //若发送验证码成功，则调用倒计时函数    }    //倒计时函数    var time = 60;    function countdown(e) {        if (time == 0) {            //e.setAttribute('disabled',false);         对没有disbaled属性的span标签，此方法无效            e.setAttribute("onclick", "sendsms(this)");            $(".send-code").html("获取验证码");            time = 60;        } else {            //e.attr('disabled',true);                  对没有disbaled属性的span标签，此方法也无效            //e.setAttribute("onclick", '');            这样写也可以            e.removeAttribute("onclick");            $(".send-code").html(time + "秒后重新获得");            time--;            setTimeout(function () {                countdown(e)            }, 1000)        }    }       HTML:  获取验证码

38. 单页面和多页面应用

39. vue怎么实现点击li，li增加一个class，其他的li去掉这个class

    
    
     
{
   {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;        }    }})

40. vue $refs的基本用法

    
    
         
     添加
    

41. css设置滚动条样式

.test-1::-webkit-scrollbar {/*滚动条整体样式*/    width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/    height: 1px;}.test-1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/    border-radius: 10px;     -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);    background: #535353;}.test-1::-webkit-scrollbar-track {/*滚动条里面轨道*/    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);    border-radius: 10px;    background: #EDEDED;}