前端小干货（基础篇）

①：谷歌字体

谷歌浏览器作为前端工程师最喜欢的浏览器，无异于他的各方面兼容做的及其牛逼，这里我就不点名某i厂（做出的东西自己都嫌弃~），谷歌的默认字体大小是12px，最小也不能小于12px，但是某些时候我们需要10px或者更小的字体，解决方案有-webkit-transform:scale(0.8);

②：body页面宽高100%

:root{height:100%;width:100%}
body{width:100%;height:100%}

一些同学直接设置body{width:100%;height:100%}，发现宽度有100%，高度却没有，因为body不是根元素，由于html没有设置height:100%，所以body的height无法显示100%

body{width:100vw;height:100vh;}

vw和vh是新推出来的单位，指把页面分为100等份，可以取值0-100，也相当于百分比，但是不需要管父级元素，这个单位针对浏览器，任何元素设置这个单位都是相对于浏览器

③：特殊值判断

var a = /^123$/g;
var b = /^123$/g;
console.log(a == b,a === b)

答案都是false，正则表达式就算两个一模一样，也不相等

var arr = [1,2,3]
var arr1 = [1,2,3]
var obj = {a : 1}
var obj1 = {a : 1}
console.log(arr == arr1 ,obj1 == obj)
console.log(arr === arr1 ,obj1 === obj)

答案都是false，数组也相当于对象，对象类型在进行判断是否相同依据的是地址，而不是值，就算值不同，只要地址一样，那么判断也为true

Math.min() > Math.max()

答案都是true，因为Math.min() 返回 Infinity, 而 Math.max()返回 -Infinity

④em和rem的区别

首先，他们都是相对长度单位，em相对于父元素，rem相对于根元素。

⑤关于储存 cookie、sessionStorage和localStorage

1、存储内容是否发送到服务器端：当设置了Cookie后，数据会发送到服务器端，造成一定的宽带浪费；web storage,会将数据保存到本地，不会造成宽带浪费；

2、数据存储大小不同：Cookie数据不能超过4K,适用于会话标识；web storage数据存储可以达到5M;

3、数据存储的有效期限不同：cookie只在设置了Cookid过期时间之前一直有效，即使关闭窗口或者浏览器； sessionStorage,仅在关闭浏览器之前有效；localStorage,数据存储永久有效；

4、作用域不同：cookie和localStorage是在同源同窗口中都是共享的；sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面

⑥link 和@import

1、 link属于HTML标签，而@import是CSS提供的;

2、页面被加载的时，link会同时被加载，而@import被引用的CSS会等到引用它的CSS文件被加载完再加载;

3、 import只在IE5以上才能识别，而link是HTML标签，无兼容问题;

4、link方式的样式的权重 高于@import的权重.

⑦巧用横排

在滚动轮播图里，需要把包裹图片的容器横向排列

div{
	width: 100px;
	height: 100px;
	border: 1px solid;
}

<div class="all">
	<div class="child"></div>
	<div class="child"></div>
	<div class="child"></div>
	<div class="child"></div>
</div>

在一个宽高定死的父容器如何让.child横向排列,不如巧妙运用一个文字样式，让文本不换行,同时把子元素当成一行文本，形成元素不换行

.all{
	white-space: nowrap;
}
.child{
	display: inline-block;
}

⑧关于使用display:inline-block后会出现盒子中间的间隙

在html结构中，换行会占用一个字符位大小(浏览器默认12px)，解决方案：
(1)行内块盒子多的情况下在父级元素上加font-size：0px，然后在行内块盒子中恢复字体大小
(2)使用在 <!-- -->注释换行

⑨关于div盒子塌陷

当两个div上下排列并且两个div均有上下margin，网页效果会显示一个margn失效，因为元素正常情况遵循文本文档流，文档流规范指出会计元素会上下间距塌陷，此时只需要让这两个div遵循BFC规范即可，在div的css中加上over-flow:auto(属性值除了hidden都可以)