1、移动端点击默认背景颜色
-webkit-tap-highlight-color:transparent;
移动端meta标签快捷键
meta:vp 按tab
2、<p contenteditable='true'>这是一段可以编辑的文字</p>
3、字符串函数
1>全局下的-符号 替换成/ str.replace(/-/g,'/')
2>全局下的换行符转化成<br> str.replace(/\n/g,'<br>')
3>str.substring(开始位置,结束位置) 负数另说 eg:var str='name=testhhh';str.substring(0,str.indexOf('=')) 结果为:键值name
4>substr()和substring的区别:
eg: str='www.baidu.com'
str.substring(1,5) 从第一个字符到第五个字符之前 返回‘ww.b’
str.substr(1,5) 从第二个字符开始,截取五个字符 返回‘ww.ba’
5>slice()和substring()区别:
一个参数时 str.slice(3) 从第四个开始,截取到最后 返回‘baidu.com’
6>split()
eg:str="https://baidu.com?id=2"
str.split("?") 以?为分隔线,分割返回为数组
4、地址栏常用
1>location.href 当前url
2>location.search eg:?name=test 当前url的参数部分
3>location.search.slice(1) 同上eg 则为参数部分 不包含?
4>location.hash eg:#code 锚点
5、本地存储
1>存储到本地 localStorage.setItem('key值','value值')
2>获取本地存储key的value值 localStorage.getItem('key值')
6、CSS
1>input的placeholder颜色
input::-webkit-input-placeholder{color:#eee}
2>文本溢出显示省略号 ***宽高必须设
单行文本溢出显示省略号:{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
多行文本溢出显示省略号:{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
3>div盒子内纯数字、英文自动换行 word-break:break-word;
4>select去除默认箭头,并换为某图片
select{
/*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/
border: solid 1px #000;
outline: none;
/*很关键:将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
/*在选择框的最右侧中间显示小箭头图片*/
background: url(../images/bottoman.png) no-repeat 96.9%;
/*为下拉小箭头留出一点位置,避免被文字覆盖*/
padding-right: 14px;
}
/*清除ie的默认选择框样式清除,隐藏下拉箭头*/
.distpicker select::-ms-expand,.zcdist select::-ms-expand { display: none; }
5>左右模块宽度为50%,加上边框会掉下去
解:给左右模块加box-sizing:border-box
6>如何让Chrome浏览器支持小于12px的文字
span {font-size:12px;display:inline-block;-webkit-transform:scale(0.8)
6>pre标签换行对齐
white-space:pre-wrap; /* css3.0 */
white-space:-moz-pre-wrap; /* Firefox */
white-space:-pre-wrap; /* Opera 4-6 */
white-space:-o-pre-wrap; /* Opera 7 */
word-wrap:break-word; /* Internet Explorer 5.5+ */
text-align: justify;