共计 2981 个字符，预计需要花费 8 分钟才能阅读完成。
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
