web开发网页时可以拿起就用的小技巧总结~

前言

本文主要给大家总结了自己在日常网页制作的时候遇到问题的一些解决技巧，分享出来供大家参考学习，下面话不多说了，感兴趣的朋友们下面来一起看看详细的介绍：

总结如下：

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

       content-box：在规定一个框的宽高之外给这个框加内边距和边框。

       border-box：（textarea和select默认值）在规定的一个框的宽高之内给这个框加内边距和边框。

  
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;

二、美化input框

input[type=text]::-ms-clear,::-ms-reveal{display:none;}
input::-ms-clear,::-ms-reveal{display:none;}
input{  
      
    outline: none;  
       
}

三、美化textarea文本域

textarea{
    
    
    outline: none;
    
    resize: none;
    
}

四、改变placeholder的字体颜色大小

input::-webkit-input-placeholder{
    
  font-size:14px;
  color: #333;
}
input:-moz-placeholder {
    
    font-size:14px;
    color: #333;
}
input::-moz-placeholder {
    
    font-size:14px;
    color: #333;
} 
input:-ms-input-placeholder {
    
    font-size:14px;
    color: #333;
}

五、美化select

select::-ms-expand{
    display: none;
}
select{  
    
    border: solid 1px #333;
        
    
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
        
  
  background: url("小箭头图片路径") no-repeat right center transparent;
        
  
    padding-right: 14px;
        
  
  outline: none;
}

六、美化button按钮

button{
    
    border: none;
    
    background: #333;
    
}

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

男

八、多出文字用省略号表示

white-space: nowrap; 
overflow:hidden; / *内容超出宽度时隐藏超出部分的内容 */ 
text-overflow:ellipsis;

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

-moz-user-select: none; 
-webkit-user-select: none; 
-ms-user-select: none; 
-khtml-user-select: none; 
user-select: none;

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

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

十一、滚动条样式

*::-webkit-scrollbar {
    
    width: 5px;
    
    height: 5px;
}
*::-webkit-scrollbar-thumb{
    
    border-radius: 6px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
    background-color: #1AA094;
}
*::-webkit-scrollbar-track {
    
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background-color: #f2f2f2;
}

十二、JS技巧

// 在js中写的返回键
 = 'history.go(-1)';

// 强制刷新页面
window.location.reload(true);

//本地存储(存)
window.localStorage.setItem("userName", data.userName);

//获取本地存储数据
window.localStorage.getItem("userName");

//数据转json
JSON.stringify(data);

//刷新父页面
parent.location.reload();

总结

    以上就是这篇手记文章的内容了，更多内容逐渐更新~ 希望内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家~