刷前端面经笔记（二）

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

<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的一部分。