2020-08-15 Replaceable and non-replaceable elements of html + table-cell of css + key value sorting in JS objects + two download links of ios and android of soft skills merge into one QR code

2020-08-15 Subject source: http://www.h-camel.com/index.html

[html] Which tags of html elements are non-replaceable elements? What are replaceable elements?

1. Replaceable element: Replaced element means that the label will be replaced. Including img object video textarea input, some elements can be replaced under certain circumstances, audio canvas

Professional definition: A content is not controlled by the CSS visual formatting model. The CSS rendering model does not consider the rendering of this content, and the element itself generally has an element of inherent size (width, height, aspect ratio), which is called replacement element.

2. Non-replaceable elements: non-replaceable elements, then the remaining elements are non-replaceable elements.

[css] What are the application scenarios for using display: table-cell?

1. Multi-line text is vertically centered, the parent element is set to display: table; the child element is set to 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. Equal height layout, the final height of the cell under the same table-row is equal to the highest value among all cells.

<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;
}

Then, the height of table-row, the height of all cells will be unified to 100px

3. Adaptive two-column layout, fixed width on the left, adaptive width on the right

<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. Constant width layout

<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] Write a method to sort the keys in the object

In the array sorting, the sort() method, but this is a bitwise comparison, you need to deal with sort( (ab) =>{retrun ab}); sort in ascending order.

To sort according to the key value in the object, the key attribute value can be used as the sort parameter.

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"));

[Soft skills] There are two download links for ios and android, how to merge them into one QR code?

Generation tool https://www.hotapp.cn

1. When scanning the iOS system device

If it is a WeChat scan, because the intermediate page is used in the first step, you cannot jump directly to the App Store at this time, so you need to give a prompt page to prompt the user to click on the browser in the upper right corner to open the App Store download page

If it is scanned by other apps other than WeChat, jump directly to the App Store download page

2. When scanning on Android system devices

If it is WeChat scan

You can jump to the app download page

Or you can give a prompt page to prompt the user to click on the browser in the upper right corner to open and download the APK

If it is scanned by other apps other than WeChat, jump directly to start downloading AP

Link: https://www.jianshu.com/p/7f6b40185cf4