踩坑:在移动端中 盒子或者按钮 按住时候会有一个正方形阴影
div {
//该属性能够设置点击链接的时候出现的高亮颜色 将其设置为透明色就ok好了
-webkit-tap-highlight-color: transparent;
}
踩坑:icon字体图片与文字对不齐
方法一: 可以使用 position:relative 相对定位 改变top值 进行对齐
方法二:
//父元素设置
.par_box{
display: table;
}
//子元素设置
.child{
vertical-align: middle;
display: table-cell;
}
方法三:使用自身偏移
//向上偏移一点
transform: translate(0, 10%);
//向下偏移一点
transform: translate(0, -10%);
踩坑:获取html跟节点的字体大小 (可能会用于计算页面的rem值)
getComputedStyle(window.document.documentElement)['font-size']
踩坑:PC的input输入框 type=number 时候隐藏右边的上下加减箭头
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
-webkit-appearance: none !important;
margin: 0;
}
input[type="number"]{-moz-appearance:textfield;}
踩坑:禁止长按出现复制
现在很多App都是用的Web+App 或者H5打包的页面 所以在某些<li>标签的单击事件中 长按会调用系统默认的事件
解决这种情况只需要在<body>标签中添加以下代码:
oncontextmenu='return false' 禁止右键
ondragstart='return false' 禁止拖动
onselectstart ='return false' 禁止选中
onselect='document.selection.empty()' 禁止选中
oncopy='document.selection.empty()' 禁止复制
onbeforecopy='return false' 禁止复制
onmouseup='document.selection.empty()'
<body leftmargin=0 topmargin=0 oncontextmenu='return false' ondragstart='return false' onselectstart ='return false' onselect='document.selection.empty()' oncopy='document.selection.empty()' onbeforecopy='return false' onmouseup='document.selection.empty()'>
</body>
contenteditable
该属性会使标签会变成可编辑状态 一般用于富文本
<div contenteditable="true"></div>
calc
这是一个 css
属性,可以计算 css
的值。可以计算不同单位的差值。
div {
width: calc(100% - 50px);
}
解析连接 url
可以通过创建 a
标签,将url赋值到a标签的 href
属性上,可以获取到协议,pathname
,origin
等 location
对象上的属性
// 创建a标签
const aa = document.createElement('a');
// 给a标签赋值href路径
aa.href = '/ddddb.php';
// 访问aEle中的属性
aa.protocol; // 获取协议
aa.pathname; // 获取path
aa.origin;
aa.host;
aa.search;
评论