查漏补缺（五）

查漏补缺（五）

box-sizing属性

适用场景：

.wrapper{
    
	width: 300px;
	height: 200px;
}
.wrapper div{
    
	float: left;
	width: 50%;
	padding: 10px;
	//两个盒子浮动，width各占一半，但是由于有padding，子容器的宽度已经超出父容器的一半，此时子容器会折行
	//box-sizing: content-box;
	//使用border-box属性自动调整
	box-sizing: border-box;
}
<div class="wrapper">
	<div>A</div>
	<div>B</div>
</div>

1. content-box（默认值）：设定一个盒子模型的宽/高度，如果这个盒子有border、padding，不会影响设定的宽/高度;
2. border-box：设定一个盒子模型的宽/高度，如果这个盒子有border、padding，那么这个盒子现在的宽高度为：设定宽/高度-border-padding；
3. inherit：继承父元素的box-sizing

DOM Tree与render Tree的区别

html经过解析生成DOM Tree，在构建DOM Tree时会渲染render Tree，渲染器计算节点样式信息。父节点比子节点先创建render Tree，销毁时子节点比父节点先销毁render Tree。
如果元素设置display: none属性不会创建相应的render Tree，但是visibility：hidden会创建
DOM Tree与html元素一一对应，render Tree没有header和隐藏元素

装箱与拆箱

• 装箱：js中的基本数据类型不是对象，按理说没有方法，但是例如字符串还可以调用很多相应的字符串方法，这是因为js内部会把基本数据类型转换为对应的引用数据类型，在实例上调用对应的方法，然后自动销毁这个对象
• 拆箱：将引用类型对象转换为对应的值类型对象，通过valueOf()、toString()方法拆箱
• 什么时候会进行拆箱装箱转换：基本数据类型数据和引用数据类型数据要进行转换的情况下会进行装箱/拆箱操作，例如：双等号、全等号

比较操作符（==）

比较操作符会进行自动类型转换

1. 对象类型与基本数据类型比较，对象类型会转换成基本数据类型（拆箱，valueOf）对象转换后还是对象，数组转换后还是数组；
2. 字符串类型与数字类型比较，字符串会转换为数字类型；
3. 布尔类型与其他类型比较，布尔类型会转换为数字类型的0、1与其他类型进行比较；
4. null==undefined，此外二者不再等于任何基本数据类型
5. NaN == NaN为false

全等于（===）

既比较值（地址）又比较类型

1. 如果类型不相同，false
2. null === null为true
3. undefined === undefined为true
4. 引用数据类型既比较值也比较地址还比较类型
5. true === true为true
6. false === false为true
7. Number类型比较值，如果这个值是NaN，NaN与任何的值不相等
8. 字符串既比较值也比较类型

parseInt

根据字符串开头格式解析这个字符串，解析规则如下：

1. 以“0x”开头，将其余部分解析为十六进制整数；
2. 以“0”开头，将其余部分解析为八进制或十六进制整数；
3. 以“1-9”开头，解析为十进制整数

XSS

1. 跨站脚本攻击，利用网页开发时留下的漏洞插入script代码并执行进行攻击；
2. XSS攻击需要服务器对接口进行防护

content-type

客户端实际返回的内容类型

1. application/x-www-form-urlencoded：post最常见的提交方式，以key1=value1&key2=value2的格式；
2. multipart/form-data：post数据提交方式，form表单提交ectyped定义，form上传必须改为这个值；
3. application/json：向后台发送数据格式必须为json字符串，传递复杂数据时，将数据用JSON.stringify()转化为字符串，一定会触发cors预检查;
4. application/xml 和 text/xml：xml格式的数据