2020-08-04 Source of the topic: http://www.h-camel.com/index.html
[html] js generally accustomed to write in </body>before, but there are exceptions do? Tell me
The execution method of html files is top-down. When css is introduced, the program will still execute downwards. When js is introduced, the thread will be interrupted, and the program will continue to execute downwards after the js is loaded. So under normal circumstances, the js script will be placed in </body>the last position before, so that dom will not take longer to load js when it is generated. However, some js scripts that need to access the dom element are placed before the body. Since the dom element has not been rendered, an error or invalidity will be reported.
Then the principle is: the js of the page effect implementation class is placed before the body, and the js that needs to access the dom attribute such as action, interaction, and event-driven can be placed </body>before the body .
[css] Use flex to implement an adaptive nine-official grid
<!DOCTYPE html>
<html>
<style>
.blockDiv{
width: 100%;
display:flex;
flex-wrap: wrap;
}
.block{
width: calc(calc(100% / 3) - 10px);
margin:5px;
height:50px;
box-sizing: border-box;
border:1px solid #000;
}
</style>
<body>
<div class="blockDiv">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</body>
</html>
You can take a look at this in WeChat development https://blog.csdn.net/saber123321/article/details/81988352
There are several commonly used flex properties:
1. Flex arrangement direction flex-direction: row|row-reverse|column|column-reverse; Horizontal starting point left|Horizontal starting point right|Vertical starting point up|Vertical starting point down;
2. flex wrap flex-wrap: nowrap|wrap|wrap-reverse; no wrap|wrap, the first line is on top|wrap, the first line is on the bottom;
3. The horizontal arrangement of flex justify-content: flex-start|flex-end|center|space-between|space-around; left alignment|right alignment|horizontal center alignment|equal space alignment
4. The vertical arrangement of flex align-items: flex-start | flex-end | center | baseline | stretch; top alignment | bottom alignment | vertical center alignment | text baseline | full container (no height set)
5. The flex property is shorthand for flex-grow enlargement ratio, flex-shrink reduction ratio and flex-basis occupied space, the default value is 0 1 auto respectively. The last two attributes are optional
flex:none; == flex: 0 0 auto;
flex:auto; == flex: 1 1 auto;
[js] What is the difference between Array(3) and Array(3, 4)?
let arr1 = Array(3) // Array(3) defines an empty array of length 3
let arr2 = Array(3,4)// arr2 = [3,4]
[Soft skills] Do you know what hard coding is? When will hard coding be used?
The difference between hard coding and soft coding is: soft coding can be determined and modified at runtime; while hard coding cannot be changed.
In computer programs or text editing, hard coding refers to the method of replacing variable variables with a fixed value. After compiling in this way, it is very difficult to change this variable in the future.
For example: let a=2,b=2;
Hard code: if(a==2) return false;
Not hard-coded if(a==b) return true;