2020-08-15 html的可替换不可替换元素 + css的table-cell + JS的对象中的key值排序 + 软技能的ios和android两个下载连接合并为一个二维码

2020-08-15 题目来源：http://www.h-camel.com/index.html

[html] html元素哪些标签是不可替换元素？哪些是可替换元素？

1.可替换元素：置换元素 是指标签会被代替。 包括 img object video textarea input，某些元素在特定情况下可替换，audio canvas

专业定义：一个内容不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。

2.不可替换元素：非置换元素，那么剩下的元素就是不可替换元素。

[css] 使用display: table-cell有什么应用场景呢？

1.多行文本垂直居中， 父元素设置display: table; 子元素设置为display: table-cell; vertical-align: center; body { background: #ccc; } div{ display: table; text-align: center; margin: 100px auto; background: #fff; } p{ display: table-cell; vertical-align: middle; width: 500px; height: 200px; }

<div>
    <p>
        hello world <br />
        hello world <br />
        hello world <br />
        hello world
    </p>
</div>

2.等高布局，同一table-row下的cell最终高度等于所有单元格中最高值。

<div class="table-cell" id="cell1">cell1</div>
<div class="table-cell" id="cell2">cell2</div>
<div class="table-cell" id="cell3">cell3</div>
<div class="table-cell" id="cell4">cell4</div>

.table-cell {
    display: table-cell;
}

#cell1 {
    height: 50px;
}

#cell2 {
    height: 60px;
}

#cell3 {
    height: 80px;
}

#cell4 {
    height: 100px;
}

那么，table-row的高度，所有单元格的高度会被统一为 100px

3.自适应两栏布局， 左侧固定宽度，右侧自适应宽度

<div id="container">
<div id="left">content goes here...</div>
<div id="right">content goes here...</div>
</div>

#left {
    float: left;
    width: 150px;
}

#right {
    display: table-cell;
    width: 9999px;
}

#container {
    overflow: auto;
}

4.等宽布局

<div id="container">
<div class="cell">content goes here...</div>
<div class="cell">content goes here...</div>
<div class="cell">content goes here...</div>
</div>

#container {
    display: table;
    table-layout: fixed;
    width: 450px;
}

.cell {
    display: table-cell;
}

[js] 写一个方法对对象中的key进行排序

在数组排序中sort()方法，但这是按位进行比较的，需要处理 sort( (a-b) =>{retrun a-b}); 升序排列。

想要按照对象中的key值进行排序，key属性值作为sort入参即可。

var arr = [];   //一个存储对象的数组   两个属性  分别为key  value
//排序函数
  function compare(str) {
    return function(obj1, obj2) {
        var value1 = obj1[str];
        var value2 = obj2[str]
        if (value1 < value2) {
            return 1;
        } else if (value1 > value2) {
            return -1;
        } else {
            return 0;
        }
    }
}

arr.sort(compare("key"));

[软技能] 有ios和android两个下载链接，如何把它们合并成一个二维码？

生成工具 https://www.hotapp.cn

1.在iOS系统设备扫描时

如果是微信扫描，因为第一步里使用了中间页面，此时无法直接跳转到App Store了，所以需要给出提示页面，提示用户点击右上角浏览器，以打开App Store下载页面

如果是微信以外的其他App扫描，直接跳转到App Store下载页面

2.在Android系统设备扫描时

如果是微信扫描

可以跳转到应用宝下载页面

或者可以给出提示页面，提示用户点击右上角浏览器打开，下载APK

如果是微信以外的其他App扫描，则直接跳转开始下载AP

链接：https://www.jianshu.com/p/7f6b40185cf4