刷面经笔记2019.01.30

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在stativ和absolute之间变换

transition示例:

<style>     #box2{height: 100px;width: 100px;background: blue;}#box2:hover{transform: rotate(180deg) scale(.5, .5);background: red;transition: background 2s ease, transform 2s ease-in 1s;}</style>
</head>
<body><div id="box1">BOX1</div><div id="box2">BOX2</div>
</body>

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示例:

<style>.box{height:100px;width:100px;border:15px solid black;animation: changebox 10s ease-in-out   3 alternate paused;}.box:hover{animation-play-state: running;}@keyframes changebox {10% {  background:red;  }50% {  width:80px;  }70% {  border:15px solid yellow;  }100% {  width:180px;  height:180px;  }}</style><body><div class="box"></div>
</body>

4.事件冒泡的事件捕获

事件冒泡，事件会从最内层的元素开始发生，一直向上传播，直到document对象；

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

5.GET和POST的区别

1.发送方式：GET请求数据放在url上，即HTTP的协议头中；而POST把数据放在HTTP的包体中。

2.大小的限制：GET传的参数有长度的限制，因为浏览器对url的长度有限制；而POST理论上是没有限制的。

3.安全性：GET请求可被缓存，请求保存在浏览器的历史记录中；POST则不能被缓存。与POSＴ相比，GET的安全性较差，因为发送的数据是URL的一部分。

转载于:https://www.cnblogs.com/lhh520/p/10335364.html

刷面经笔记2019.01.30相关推荐

刷面经笔记2019.01.31
1.var的变量提升的底层原理是什么? JS引擎的工作方式是 1)先解析代码,获取所有被声明的变量: 2)然后再执行. 也就是分为预处理和执行这两个阶段. 变量提升:所有用var声明变量的语句都会被提 ...
《惢客创业日记》2019.01.30（周三）一月份的工作总结
马上要过春节了,每一个中国人都将迎来一个全民喜庆的节日,可我,却一点也高兴不起来.因为,这个月的工作进度与当初制定的目标相差甚远,看过日记的小伙伴都知道,这个月又踩了不少的坑.虽然,我和两个小伙已经很 ...
【双评价学习笔记2019】农业生产适宜性评价01·土地资源评价
QQ交流群:607330463 GIS开发技术最强交流群未经允许禁止转载可以参考文章是转载了一位大佬的,欢迎关注他的公众号:https://zhuanlan.zhihu.com/p/78 ...
DayDayUp：2019.12.30吴晓波2020年终秀演讲《预见2020：来海边，拾起信心》读后有感
DayDayUp:2019.12.30吴晓波2020年终秀演讲<预见2020:来海边,拾起信心>读后有感导读:2019年,过的好不好?有人豪情万丈,有人强颜欢笑. 互联网平台带来了方便快 ...
2019.01.12 Presto中国区用户线下Meetup
2019.01.12号,我们邀请Presto原创团队莅临中国,带来关于Presto的最新feature和roadmap动态,也邀请国内的Presto前沿公司兄弟分享实践干货,期待各位朋友的参加: 活动 ...
18天精读掌握《费曼物理学讲义卷一》第14天 2019/6/30
18天精读掌握<费曼物理学讲义卷一> 第14天 2019/6/30 1. 18日掌握<费曼物理学讲义>卷一计划概览 2. 今日学习成果 3. 今日时间表 4.Atimelogg ...
15天精读掌握《高德纳:具体数学》第4天 2019.5.30
15天精读掌握<高德纳:具体数学> 第4天 2019/5.30 1. 15日掌握算法导论计划概览 2. 今日学习成果 3. 今日时间表 4.Atimelogger截图今天是 2年修完清华 ...
分支限界法 01背包c语言,算法笔记分支限界法01背包问题
<算法笔记分支限界法01背包问题>由会员分享,可在线阅读,更多相关<算法笔记分支限界法01背包问题(12页珍藏版)>请在人人文库网上搜索. 1.问题描述给定n种物品和一背包.物 ...
DayDayUp：2019.01.24马云冬季达沃斯论坛(演讲)—Machine will be smarter than human beings, but will never be wiser
DayDayUp:2019.01.24马云冬季达沃斯论坛(演讲)-Machine will be smarter than human beings, but will never be wiser ...
【SRE笔记 2022.9.30 集群知识及Centos基础优化】
SRE笔记 2022.9.30 集群内服务软件集群模板机创建 Linux系统优化用户优化 ssh远程连接效率提升配置yum源常用软件安装安全优化中文字符集(非必要) 时间同步提升命令行安 ...

刷面经笔记2019.01.30

刷面经笔记2019.01.30相关推荐

最新文章

热门文章