HTML/CSS/JS 基础知识备忘录

基础知识 备忘录

margin折叠常规认知：

1. margin折叠只会发生在块级元素
2. 浮动元素的margin不与任何margin发生折叠
3. 设置了属性overflow 且值不为visible的块级元素，不与子元素发生折叠现象
4. 根元素的margin不与其他任何元素发生折叠现象

JS与原生交互方法（要与原生沟通好数据格式）

// 判断当前是IOS设备或者Android设备
let isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); 
// 传参格式跟原生沟通即可
if (isIOS) {
   window.webkit.messageHandlers.pageToH5.postMessage({ 'url': '1' });
} else {
   window.andView.pageToH5(JSON.stringify({ 'url': '1' }));
}

IOS对应：window.webkit.messageHandlers
Android对应：window.andView

iframe中子页面找寻父页面中的某个元素

$(window.parent.document).contents().find("#frame").attr("src",_url);

文字保持两行，多余的内容显示为省略号

-webkit-line-clamp数值为具体几行

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient: vertical;

正则获取地址栏参数

function getParam(name) {
    const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    let r = window.location.search.substr(1).match(reg);
    if (r != null) return decodeURI(r[2]);
    return null
}

.is(':visible')判断元素显示/隐藏

ios下去除自动识别数字为电话影响用户体验

<meta name="format-detection" content="telephone=no">