1. 盒模型分成哪几个区域？规范浏览器下，给元素设置width\height,是设置的盒模型哪个区域，怎么改？
盒模型区域： content(内容) padding(内边距) border（边框）margin(外边距)
规范浏览器下（对W3C所定义的CSS2.1标准提供了优良反对并能完满出现的浏览器。）：设置的width/height是content区域的宽高。
怎么改： 设置box-sizing值为border-box,此时设置的width/height值包含contnt+ pandding + border
例如：
.test{ width: 100px; height: 100px; padding: 10px; border: 5px solid #000; margin: 10px; box-sizeing:border-box;}2.实现上面布局的形式
形式1： felx布局 flex详解
.father{ width: 420px; height: 300px; border: 1px solid red; padding: 0 90px； display: flex; justify-content: space-between; align-items: center;}.father>.child{ width: 98px; height: 98px; border: 1px solid #ccc; background-color: #e1e1e1;}形式2： grid布局 grid详解
.father{ width: 420px; height: 300px; border: 1px solid red; display: grid; grid-template-columns: 33.33% 33.33% 33.33%; justify-items: center; align-items: center;}.father>.child{ width: 98px; height: 98px; border: 1px solid #ccc; background-color: #e1e1e1;}
形式3：display:inlie-block;
.father{ width: 420px; height: 300px; border: 1px solid red; text-align: center;}.father>.child{ width: 98px; height: 98px; border: 1px solid #ccc; background-color: #e1e1e1; display: inline-block; margin: 100px 10px 0; }形式4：float这里的子元素写代码的地位要写成 1 3 2
.father{ width: 420px; height: 300px; border: 1px solid red; padding: 0 40px; }.father>.child{ width: 98px; height: 98px; border: 1px solid #ccc; background-color: #e1e1e1; }.child:nth-child(1){ margin-top: 100px; float: left;}.child:nth-child(2){ margin-top: 100px; float: right;}.child:nth-child(3){ margin: 100px auto 0;}3.如何实现挪动端1px边？
1.为什么要这么做？
例如平时咱们写列表的底边，间接border-bottom:1px solid #666;
这时候设计会过去说做进去的线太粗了，没按设计稿做。。。
2.理论起因：不同分辨率的手机，咱们在款式文件中写的1px的边框看起来的厚度都不一样，因为同样是写的1px，然而在不必设施示意的具体设施像素不一样。比方在设施像素比为2的iphone6（分辨率750*1334）上，咱们写1px 代表的是设施上的2个设施像素，在dpr为3的设施上代表的又是3个设施像素，咱们写1px的本意呢是想要示意最小的一个单位，而在dpr为2和3的设施上显然没有做到，所以在dpr为2 的设施上咱们须要scale0.5 ，在dpr3的设施上咱们要scale 0.33;
3.实现：
li::before{ content:''; display: block; width: 100%; height: 1px; background-color: red; transform: scaleY(.5); transform-origin:0 0; position: absolute; top: 0; left: 0;}4.如果要实现一个元素的四条边？
4.call apply bind 区别
同： 三者都用来扭转this指向
异：
var year = 2020,place='北京'; var company = { name:'优贝', slogan:'唱好听的歌，交乏味的人!', age:8, say:function(year,place){ console.log(`${year}年${this.age}岁的${this.name}在${place}说：${this.slogan}`) } } var dev1 = { name:'开发甲', slogan:'今晚加班好开心', age:'60', } company.say(year,place);//2020年8岁的优贝在北京说：唱好听的歌，交乏味的人!1.call 第一个参数扭转this 指向，前面的参数一个一个传参进去；
company.say.call(dev1,year,place); //2020年60岁的开发甲在北京说：今晚加班好开心2.apply 第一个参数扭转this指向，前面的参数以数组的模式传进去，然而应用时还是一个一个赋值的。
company.say.apply(dev1,[year,place]);//2020年60岁的开发甲在北京说：今晚加班好开心3.bind 第一个参数扭转this,并且返回被扭转this指向的函数，并不会执行此函数；
var fn = company.say.bind(dev1); fn(2022,'上海'); //2022年60岁的开发甲在上海说：今晚加班好开心5.写出上面代码一次输入什么？
a = 100; function demo(e){ arguments[0]=2; function e(){} console.log(e); if(a){ var b = 123; } a=10; var a; console.log(b); function c(){}; var c; f =123; console.log(c); } var a ; demo(1); console.log(a); console.log(f); // 2 undefined function c(){} 100 123知识点：
1.变量、函数的晋升
2.条件不成立，{}外面的变量依旧会晋升。
3.函数晋升优先级高于变量晋升，且不会被同名变量申明时笼罩，然而会被变量赋值后笼罩（不会反复晋升，但会从新赋值）
4.作用域链
6.以下代码输入什么，为什么，如果不想这样输入，要怎么解决？
var obj = { name:'youbei', age:9,}var obj1 = obj;obj1.name='meituan';obj1.age = 7;console.log(obj.name,obj.age);//meituan 7