2020-09-02 html RGB and CMYK + css grid layout + JS input type selector returns DOM elements + soft skills http3

2020-09-02 Source of the topic: http://www.h-camel.com/index.html

[html] Does HTML use RGB colors or CMYK colors? why?

RGB color mode, three primary colors of red, green and blue. Commonly used in web design

CMYK has also become a printing color mode, a color mode that relies on reflection, which requires an external light source to be seen. Commonly used printing and printing scenes

[css] Have you ever used grid layout? Talk about your understanding of it

Using the grid layout is very simple, you only need to define the container (container): display: grid, and set the size of the columns (grid-template-columns) and rows (grid-template-rows), and then use grid-column and grid- row defines the location of the container's child elements (grid-item items). Similar to the flexbox layout, the order of the items is not important at the beginning, and can be placed anywhere in the container, which also makes it very easy to rearrange your items through media queries. Imagine that when you define the layout of the entire page, you only need a few lines of CSS to rearrange the page to adapt to various screen widths. How amazing it is!

.container {
    display: grid;
    grid-template-columns: 100px 100px auto 100px 100px;
    grid-template-rows: 25% 100px auto;
    grid-column-gap: 10px;
    grid-row-gap: 15px;
    // grid-gap：<grid-row-gap> <grid-column-gap>;
    // justify-items: start | end | center | stretch（默认）; 对齐方式
}

Set the container to a grid layout, 3 rows with a width of 25% 100px auto; 5 columns with a width of 100px 100px auto 100px 100px, and the column spacing is 10px. The row spacing is 15px. The spacing is only used between network cells and cannot be used. At the edge of the container.

Transfer from https://www.jianshu.com/p/d183265a8dad

[js] Write a js method, enter the specified type of selector (id, class, tagName) to return the matching DOM section, requiring compatibility and performance

function getDom(selector) {
    var reg = /^(#)?(\.)?(\w+)$/img;
    var regResult = reg.exec(selector);
    var result = [];
    //如果是id选择器
    if (regResult[1]) {
        console.log("id")
    }
    //如果是class选择器
    else if (regResult[2]) {
        console.log("class")
    }
    //如果是标签选择器
    else if (regResult[3]) {
        console.log("tagname")
    }
}

[Soft skills] Tell me about your understanding of http3. What problems does it solve?

HTTP3 optimizes and improves efficiency through a lower transport layer, and uses TCP protocol to achieve handshake, but the handshake method is different from http2.

HTTP protocol https://www.jianshu.com/p/dd9719c4c2c1