刷前端面经笔记（二）

rottengeek 发布于2019-08-23 15:07 / 2669人阅读

摘要：但这会带来高度塌陷的问题，所以要清除浮动。核心内置类，会尝试先于例外的是，利用的是转换。安全性请求可被缓存，请求保存在浏览器的历史记录中则不能被缓存。与相比，的安全性较差，因为发送的数据是的一部分。

1.实现三栏布局（左右两边固定宽度，中间自适应）

1)浮动布局
左右两边固定宽度，并分别设置float:left和float:right。（但这会带来高度塌陷的问题，所以要清除浮动。清除浮动的方式有：
a. 给父级盒子设置height；
b.给父级盒子设置overflow:hidden；
c.在父级盒子结束前的盒子添加clear:both；
d.父级盒子也设置浮动；
e.父级div定义伪类：after和zoom，

.clear::after{display:block;clear:both;content:"";visibility:hidden;height:0;} 
.clear{zoom:1;}

2)绝对定位布局
左中右三个盒子都设置position:absolute;然后分别设置定位
3)flex布局
父盒子设置display:flex;位于中间的子盒子设置flex:1
4)表格布局
父盒子设置display:table;左中右三个盒子设置display:table-cell;左右两个盒子分别设置宽度；
5)网格布局
父盒子设置display:grid; grid-template-columns:300px auto 300px;

2.== 和 === 的区别

===为恒等符：当等号两边的值为相同类型的时候，直接比较等号两边的值，值相同则返回true，若等号两边的值类型不同时直接返回false。

==为等值符：当等号两边的值为相同类型时比较值是否相同，类型不同时会发生类型的自动转换，转换为相同的类型后再作比较。
a、如果一个是null、一个是undefined，那么相等。
b、如果一个是字符串，一个是数值，把字符串转换成数值再进行比较。
c、如果任一值是 true，把它转换成 1 再比较；如果任一值是 false，把它转换成 0 再比较。
d、如果一个是对象，另一个是数值或字符串，把对象转换成基础类型的值再比较。对象转换成基础类型，利用它的toString或者valueOf方法。 js核心内置类，会尝试valueOf先于toString；例外的是Date，Date利用的是toString转换。那些不是JavaScript语言核心中的对象则通过各自的实现中定义的方法转换为原始值。
e、任何其他组合，都不相等。

3.transition和animation

transition
1）语法
transition是一个复合属性，可设置四个过渡属性，简写方式如下：
transition{ transition-property transition-duration transition-timing-function transition-delay}
transition-property:是用来指定当元素其中一个属性改变时执行transition效果，值有none（没有属性改变）、all（默认值，所有属性改变），indent（某个属性名，一条transition规则，只能定义一个属性的变化，不能涉及多个属性，如果要设置多个属性时，需分别设置，中间以逗号隔开）【当其值为none时，transition马上停止执行，当指定为all时，则元素产生任何属性值变化时都将执行transition效果】;
transition-duration:过度时间，是用来指定元素转换过程的持续时间，单位为s(秒)或ms(毫秒)；
transition-timing-function:时间函数，根据时间的推进去改变属性值的变换速率，值ease（逐渐变慢）、linear（匀速）、ease-in（加速）、ease-out（减速）、ease-in-out（加速然后减速）、cubic-bezier：（自定义一个时间曲线）；
transition-delay:延迟，指定一个动画开始执行的时间，也就是当改变元素属性值后多长时间开始执行transition效果，单位为s（秒）或ms（毫秒）；
2）触发方式
伪类触发：:hover,:focus,:checked,:active
js触发：toggleClass
3）以下情况下，属性值改变不能产生过渡效果
a.background-image，如url(a.jpg)到url(b.jpg)（与浏览器支持相关，有的浏览器不支持）等
b.float浮动元素
c.height或width使用auto值
d.display属性在none和其他值（block、inline-block、inline）之间变换
e.position在static和absolute之间变换
transition示例:




 BOX1
 BOX2

animation
1）语法
animation{ animation-name animation-duration animatino-timing-function animation-delay animation-iteration-count animation-direction animtion-play-state animation-fill-mode}
animation-name：用来调用@keyframes定义好的动画，与@keyframes定义的动画名称一致；
animation-duration：指定元素播放动画所持续的时间；
animation-timing-function：和transition中的transition-timing-function 中的值一样。根据上面的@keyframes中分析的animation中可能存在多个小动画，因此这里的值设置是针对每一个小动画所在所在时间范围内的属性变换速率；
animation-delay：定义在浏览器开始执行动画之前的等待的时间、这里是指整个animation执行之前的等待时间，而不是上面所说的多个小动画；
animation-iteration-count：定义动画的播放次数，通常是整数，默认是1,若为infinity，动画将无限多次的播放；
animation-direction：主要用来设置动画播放次数，其主要有两个值：normal:默认值，动画每次训话都是按顺序播放；alternate:动画播放在第偶数次向前播放，第奇数次想反方向播放（animation-iteration-count取值大于1时设置有效）
animation-play-state：属性用来控制元素动画的播放状态。主要有两个值：running:可以通过该值将暂停的动画重新播放，这里的重新播放不是从元素动画的开始播放，而是从暂停的那个位置开始播放；paused:暂停播放。
animation-fill-mod：　默认情况下，动画结束后，元素的样式将回到起始状态，animation-fill-mode属性可以控制动画结束后元素的样式。主要具有四个属性值：none（默认，回到动画没开始时的状态。）,forwards（动画结束后动画停留在结束状态）,backwords（动画回到第一帧的状态）,both（根据animation-direction轮流应用forwards和backwards规则）。
animation示例:

4.事件冒泡的事件捕获

事件冒泡，事件会从最内层的元素开始发生，一直向上传播，直到document对象；
事件捕获则跟事件冒泡相反，事件会从document对象开始发生，直到最具体的元素；

5.GET和POST的区别

1.发送方式：GET请求数据放在url上，即HTTP的协议头中；而POST把数据放在HTTP的包体中。
2.大小的限制：GET传的参数有长度的限制，因为浏览器对url的长度有限制；而POST理论上是没有限制的。
3.安全性：GET请求可被缓存，请求保存在浏览器的历史记录中；POST则不能被缓存。与POSＴ相比，GET的安全性较差，因为发送的数据是URL的一部分。

GPU云服务器云服务器家面经岗面经面经分享大厂面经

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101546.html

刷前端面经笔记（一）

摘要：协商缓存从缓存数据库中取出缓存的标识，然后向浏览器发送请求验证请求的数据是否已经更新，如果已更新则返回新的数据，若未更新则使用缓存数据库中的缓存数据。 1.CSS的盒子模型包含元素内容content、内边距padding、边框border、外边距marginbox-sizing:border-box;content-box;inherit;1) content-box:总宽度=mar...

刘德刚 2019-08-23 15:07 评论0 收藏0
刷前端面经笔记（十二）

摘要：以下递归函数存在栈溢出的风险，请问如何优化解答请实现一个计算最大公约数的函数在这里编写代码解答数组去重如果数组中有排除用实现斐波那契数列函数返回第个斐波那契数。父类我的名字是我今年岁原型继承构造函数继承组合继承组合继承优化 1.以下递归函数存在栈溢出的风险，请问如何优化？ function factorial(n){ return n*factorial(n-1) } 解答： ...

Rocko 2019-08-23 15:18 评论0 收藏0
刷到就是赚到！八月阿里 Android 高级岗面经（年薪百万）

摘要：前段时间，前同事跳槽，机缘巧合下面了阿里，本来凭着试一试的态度，却不料好事成双，拿到了，而且薪资也了。面就没啥东西可聊的，基本上就是对此次面试的一个评价定薪等等一些之内的话题。如果是现场面试，记得关注当天的天气，提前查一下路线。 ...

aisuhua 2021-09-26 09:55 评论0 收藏0
18年求职面经及总结

摘要：年求职面经及总结我的求职之路差不多走到尽头了感觉真是精疲力尽了把这大半年的经历和面试总结写下来希望能给和我一样在求职路上煎熬的人一点帮助先说背景微电子科学与工程专业学过两门和相关的课程语言和单片机这个专业的唯一好处就是大部分人并不知道这个专 18年求职面经及总结我的求职之路差不多走到尽头了,感觉真是精疲力尽了.把这大半年的经历和面试总结写下来,希望能给和我一样在求职路上煎熬的人一点帮...

zhangwang 2019-08-22 11:07 评论0 收藏0
18年求职面经及总结

摘要：年求职面经及总结我的求职之路差不多走到尽头了感觉真是精疲力尽了把这大半年的经历和面试总结写下来希望能给和我一样在求职路上煎熬的人一点帮助先说背景微电子科学与工程专业学过两门和相关的课程语言和单片机这个专业的唯一好处就是大部分人并不知道这个专 18年求职面经及总结我的求职之路差不多走到尽头了,感觉真是精疲力尽了.把这大半年的经历和面试总结写下来,希望能给和我一样在求职路上煎熬的人一点帮...

fjcgreat 2019-08-01 17:38 评论0 收藏0