Leak detection and vacancy filling (V)

Leak filling （ 5、 ... and ）

box-sizing attribute

Applicable scenario ：

.wrapper{
    
	width: 300px;
	height: 200px;
}
.wrapper div{
    
	float: left;
	width: 50%;
	padding: 10px;
	// Two boxes float ,width Each half , But because of padding, The width of the child container has exceeded half of that of the parent container , At this time, the sub container will fold 
	//box-sizing: content-box;
	// Use border-box Attribute auto adjustment 
	box-sizing: border-box;
}
<div class="wrapper">
	<div>A</div>
	<div>B</div>
</div>

1. content-box（ The default value is ）： Set the width of a box model / Height , If this box has border、padding, It will not affect the set width / Height ;
2. border-box： Set the width of a box model / Height , If this box has border、padding, Now the width and height of this box is ： Set the width / Height -border-padding;
3. inherit： Inheriting from the parent element box-sizing

DOM Tree And render Tree The difference between

html After parsing, generate DOM Tree, In the build DOM Tree Render when render Tree, The renderer calculates node style information . The parent node is created before the child node render Tree, When destroying, the child node is destroyed before the parent node render Tree.
If the element is set to display: none Property does not create the corresponding render Tree, however visibility：hidden Will create
DOM Tree And html Elements correspond one to one ,render Tree No, header And hidden elements

Boxing and UnBoxing

• Packing ：js The basic data type in is not an object , There is no way , But for example, string can also call many corresponding string methods , This is because js Internally, the basic data type will be converted to the corresponding reference data type , Call the corresponding method on the instance , Then automatically destroy the object
• Unpacking ： Convert the reference type object to the corresponding value type object , adopt valueOf()、toString() How to unpack
• When will unpacking and packing conversion be carried out ： Basic data type data and reference data type data will be boxed if they need to be converted / Unpacking operation , for example ： Double equal sign 、 All in one

Comparison operator （==）

The comparison operator performs automatic type conversion

1. Comparison between object type and basic data type , The object type is converted to the basic data type （ Unpacking ,valueOf） After object conversion, it is still an object , After array conversion, it is still an array ;
2. Compare string type with number type , String will be converted to numeric type ;
3. Boolean types are compared to other types , Boolean types are converted to numeric types 0、1 Compare with other types ;
4. null==undefined, In addition, they are no longer equal to any basic data type
5. NaN == NaN by false

All equal to （===）

Existing comparative value （ Address ） And compare types

1. If the types are different ,false
2. null === null by true
3. undefined === undefined by true
4. Reference data types compare values, addresses, and types
5. true === true by true
6. false === false by true
7. Number Type comparison value , If the value is NaN,NaN Not equal to any value
8. Strings compare both values and types

parseInt

Parse the string according to the format at the beginning of the string , The parsing rules are as follows ：

1. With “0x” start , Parse the rest into hexadecimal integers ;
2. With “0” start , Parse the rest into octal or hexadecimal integers ;
3. With “1-9” start , Resolve to decimal integer

XSS

1. Cross-site scripting attacks , Exploit the loopholes left by web development to insert script Code and execute to attack ;
2. XSS The attack requires the server to protect the interface

content-type

The content type actually returned by the client

1. application/x-www-form-urlencoded：post The most common way to submit , With key1=value1&key2=value2 The format of ;
2. multipart/form-data：post Data submission method ,form Form submission ectyped Definition ,form Upload must be changed to this value ;
3. application/json： The format of sending data to the background must be json character string , When passing complex data , Use the data as JSON.stringify() Convert to string , It must trigger cors Pre inspection ;
4. application/xml and text/xml：xml Formatted data