踩坑

各种细节

伪类与伪元素的区别（css选择器中写有具体的）？@import与导入css的区别？cookie、sessionstorage、localstorage的区别？取值？null跟undefined的区别？如何让内联元素支持宽高？什么时候清浮动？方法？如何隔行变色？预编译？sort方法将数组排序？利用正则将字符串去空格？json对象与json字符串之间的互相转换?js中||与&&的区别？js中! 与！！的区别各种东西转为布尔值

伪类与伪元素的区别（css选择器中写有具体的）？

伪类：选择dom上有的元素。只有一个： 伪元素：选择dom树没有的内容。css3开始以：：开头。css1、css2可以使用一个：，容易与伪类混淆

@import与导入css的区别？

@import先加载完html，再导入css文件 < link>先导入文件，再加载html文件 @import只能导入css文件，而< link>可以导入各种文件

cookie、sessionstorage、localstorage的区别？取值？

cookie可以自行设定生命周期，但是存储大小只有4k sessionstorage浏览器关闭就消失，存储大小超5M（敏感性账号一次性登录） localstorage不会消失，只有自己手动清理，存储大小超5M（久了不处理会导致卡顿）

Localstorage获取方法：window.localStorage Sessionstorage获取方法：window.sessionStorage 两个storage都有的方法 setItem (key, value) —— 保存数据，以键值对的方式储存信息。 getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。 removeItem (key) —— 删除单个数据，根据键值移除对应的信息。 clear () —— 删除所有的数据 key (index) —— 获取某个索引的key

null跟undefined的区别？

null： 对象为空 undefined：变量未定义或未初始化

如何让内联元素支持宽高？

display设置为块级元素/内联块元素加上浮动（因为会脱离文档流）加上定位，绝对定位/固定定位（因为会脱离文档流）

什么时候清浮动？方法？

清浮动：需要撑起父级宽高的时候 清浮动方法：

直接给父级宽度给父级加 overflow：hidden在父级最下面加上：< br clear=“both”>clear在css中清浮动： .box::after{ content: ""; display: block; /* display: table; 为了兼容低版本浏览器 */ clear: both; } 最后把这个类加给需要清浮动元素的父级

如何隔行变色？

:nth-child(2n) 此元素父级下的第几个子元素

span:nth-child(2n) { color: red; } <span>123</span> <span>123</span> <span>123</span> <span>123</span> <span>123</span>

预编译？

变量声明前置，函数声明前置

add(); var a = 1; var b = 2; function add() { console.log(a+b) } 打印结果：NaN。 预编译：因为声明变量跟声明函数前置，但是变量定义未前置 所以调用add()方法时，a和b都是undefined。两个undefined相加所以是NaN var a = 1; var b = 2; function add() { console.log(a+b) } add(); 打印结果：3 因为add()方法调用时，变量已经赋值了

sort方法将数组排序？

var arr = [2, 1, 3, 66, 22, 33, 11, 2]; arr.sort(function (n1, n2) { return n1 - n2; //从小到大排序。从大到小则为n2-n1 }) console.log(arr) 打印结果：[1, 2, 2, 3, 11, 22, 33, 66]

利用正则将字符串去空格？

var str = " 我吃 西红柿 "

json对象与json字符串之间的互相转换?

JSON.stringify 转为json字符串 (json字符串：对象被双引号包起来了，键也会被包起来) JSON.parse 转为json对象 （json对象：就是对象） var s = '{"a":"111","b":"bbb"}' json字符串 var s = { json对象 "a":"111", "b":"bbb" }

js中||与&&的区别？

&& （前面正确才用后面的） 只要"&&“前面为false，无论”&&“后面是true还是false，都返回”&&“前面的值； 只要”&&“前面为true，无论”&&“后面是true还是false，都返回”&&"后面的值。 console.log(0 && 10) //打印0 前面为false，打印前面的 console.log(10 && 10) //打印10 前面为true，打印后面的 || （前面不对才用后面的） 只要"||“前面为true，无论”||“后面是true还是false，都返回”||“前面的值； 只要”||“前面为false，无论”||“后面是true还是false，都返回”||"后面的值。 console.log(0 || 10) //打印10 前面为false，打印后面的 console.log(10 || 10) //打印10 前面为true，打印前面的

js中! 与！！的区别

共同点：都是转为布尔值区别：！是反向转为布尔值；！！有两个反向，就是正向转为布尔值

各种东西转为布尔值

数字类型：非零数字转为true，0和NaN转为false 字符串类型： 非空字符串转为true，空字符串转为false null：转为false undefined：转为false object：转为true