1.盒子模型分为多少个区域？标准浏览器下，给元素设置width\height，设置的是盒模型的哪个区域，怎么改？盒模型区域：标准浏览器下的content（内容）padding（内边距）border（边框）margin（外边距）（对W3C定义的CSS2.1规范提供优秀支持并能完美渲染的浏览器。）：设置的宽度/height是内容区域的宽度和高度。更改方式：设置box-sizing值为border-box，此时设置的width/height值包括contnt+pandding+border例如：.test{width:100px;高度：100px；填充：10px；边框：5px实心#000；边距：10px；box-sizing:border-box;}2.实现方式如下布局方法一：Felx布局flex详解.father{width:420px;高度：300px；边框：1px纯红色；填充：090px；显示：弹性；证明内容：空格之间；对齐项目：中心；}.父亲>.孩子{宽度：98px；高度：98px；边框：1px实心#ccc；background-color:#e1e1e1;}方法二：grid布局grid详解.father{width:420px;高度：300px；边框：1px纯红色；显示：网格；网格模板列：33.33%33.33%33.33%；证明项目：中心；对齐项目：居中；}.father>.child{宽度：98px；高度：98px；边框：1px实心#ccc；background-color:#e1e1e1;}方法三：display:inlie-block;.father{width:420px;高度：300px；边框：1px纯红色；文本对齐：居中；}。父亲>.孩子{宽度：98px；高度：98px；边框：1px实心#ccc；背景色：#e1e1e1；显示：内联块；边距：100px10px0；位置应该写成132.father{width:420px;高度：300px；边框：1px纯红色；填充：040px；}.father>.child{宽度：98px；高度：98px；边框：1px实心#ccc；背景色：#e1e1e1；}.child:nth-child(1){margin-top:100px;float:left;}.child:nth-child(2){margin-top:100px;浮动：对；}.child:nth-child(3){margin:100pxauto0;}3、如何在移动端实现1px的margin？1、你为什么要做这个？比如我们平时写列表的底边，直接border-bottom:1pxsolid#666;这时候设计师就会过来说，做的线太粗了，没有按照设计稿做。.2.实际原因：对于不同分辨率的手机，我们在style文件中写的1pxframe的粗细看起来不一样，因为也是写成1px，但是具体设备像素不代表的设备不一样。比如在设备像素比为2（分辨率750*1334）的iphone6上，我们写1px代表设备上2个设备像素，dpr为3的设备代表3个设备像素。我们写1px的初衷是为了表示最小单位，但是在dpr为2和3的设备上显然是不行的，所以我们需要在dpr2的设备上scale0.5，在dpr3的设备上scale0.33;3。实现：li::before{content:'';显示：块；宽度：100%；高度：1px；背景色：红色；变换：scaleY(.5)；变换原点：00；位置：绝对；顶部：0；left:0;}4.如果要实现一个元素的四个边？4.callapplybind的区别：三个都是用来改变方向的this:varyear=2020,place='北京';varcompany={name:'Youbei',slogan:'唱好歌，逗人开心！',age:8,say:function(year,place){console.log(`${year}year${this.age}岁${this.name}在${place}says:${this.slogan}`)}}vardev1={name:'DevelopmentA',slogan:'今晚加班玩得开心',age:'60',}company.say(year,place);//20208岁游贝在北京说：唱好歌，结交有趣的人！1、call的第一个参数改变了this的方向，后面的参数一个一个传入；company.say.call(dev1,year,place);//2020年60岁开发商A在北京说：今晚加班真开心anassignedcompany.say.apply(dev1,[year,place]);//2020年60岁的开发者A在北京说：今晚加班很开心3.bind第一个参数改这个，并且return改成this指向的函数不会执行这个函数；varfn=company.say.bind(dev1);fn(2022,'上海');//2022年，60岁的开发者A在上海说：今晚加班Happy5.写下面的代码输出什么？一=100;函数演示（e）{参数[0]=2；函数e(){}console.log(e);如果(a){变量b=123;一个=10;变种;安慰。日志（b）；函数c(){};变种C;f=123;控制台日志（c）；}变种;演示（1）；控制台日志（一）；控制台日志（f）；//2undefinedfunctionc(){}100123知识点：1.变量和函数的提升2.如果不满足条件，{}里面的变量还是会提升。3、函数提升优先级高于变量提升，声明同名变量时不会被覆盖，但会被变量赋值覆盖（不会重复提升，但会被重新赋值)4.作用域链6.下面代码的输出是什么，为什么，如果不想这样输出，怎么解决？varobj={name:'优贝',age:9,}varobj1=obj;obj1.name='美团';obj1.age=7;console.log(obj.name,obj.age);//美团7如果你不想这样输出，你必须复制一个对象，不要在两个对象之间共享相同的引用；(对象拷贝)方法：Object.assign(target,source)varobj={name:'优贝',age:9,}varobj1=Object.assign({},obj);obj1.name='美团';obj1.age=7;console.log(obj.name,obj.age);问题：Object.assign是浅拷贝，即如果源对象中某些key对应的值是对象类型，只会拷贝这个对象类型数据的引用，也就是说，多个地方都会共享一个存储空间，一个地方变了，其他地方在取值的时候也变了。varobj={name:'优贝',age:9,others:[1,2],}varobj1=Object.assign({},obj);obj1.name='美团';obj1.age=7;obj1.others[2]=3;console.log(JSON.stringify(obj1));//{"name":"meituan","age":7,"others":[1,2,3]}console.log(JSON.stringify(obj));//{"name":"youbei","age":9,"others":[1,2,3]}解决：深圳贝方式1：functiondeepCopy（源）{如果（！isObject（源））返回源；让target=Array.isArray(source)?[]:{};for(varkinsource){if(soucre.hasOwnProperty(k)){if(typeofsource[k]=='object'){target[k]=deepCopy(source[k]);}else{target[k]=source[k]}}}returntarget;}functionisObject(obj){returntypeofobj==='object'&&obj!==null}varobj1=deepCopy(obj);obj1.name='美团';obj1.age=7;obj1.others[2]=3;console.log(JSON.stringify(obj1));console.log(JSON.stringify(obj))//{"name":"meituan","age":7,"others":[1,2,3]}//{"name":"youbei","age":9,"others":[1,2]}方法二：varobj={name:'youbei',age:9,others:[1,2],}varobj1=JSON.parse(JSON.stringify(obj));obj1.name='美团';obj1.age=7;obj1.others[2]=3;console.log(JSON.stringify(obj1));console.log(JSON.stringify(obj));//{"name":"meituan","age":7,"others":[1,2,3]}//{"name":"youbei","age":9,"others":[1,2]}7.png、gif、jpg、webp等图片的优缺点及使用场景？还有哪些格式？1.png是透明图片，大部分是异形图片，其中可以作为一些图标，按钮，或者一些小角标...2.gif是动画会更生动，更吸引用户，但是图片会比较大，加载会比较慢。3.jpg是使用最多的，一般是一些当前活动的头图。4.webP提供无损和有损压缩能力，同时支持有损情况下的透明通道。无损WebP比PNG小26%；有损WebP比JPEG小25%~34%；有损WebP也支持透明通道，大小通常是相应PNG的1/3左右。同时，Google在2014年提出了动态WebP，以扩展WebP以支持动画功能。动态WebP支持比GIF更丰富的色彩，同时占用空间更小，更适应移动网络的动画播放。缺点是兼容性不好。5.其他格式如bmpsvgpcxtiftgaexifraw...8.移动端的适配这三种适配
