携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第31天，点击查看活动详情
1.display:none、visibility:hidden和opacity:0之间的区别?
1.空间占据
display:none隐藏后不占据额外空间，它会产生回流和重绘，而visibility:hidden和opacity:0元素虽然隐藏了，但它们仍然占据着空间，它们俩只会引起页面重绘。
2.子元素继承
display:none不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了，皮之不存，毛之安附~~
visibility:hidden 会被子元素继承，可以通过设置子元素visibility:visible 使子元素显示出来
opacity: 0 也会被子元素继承，但是不能通过设置子元素opacity: 0使其重新显示
3.事件绑定
display:none 的元素都已经不再页面存在了，因此肯定也无法触发它上面绑定的事件；
visibility:hidden 元素上绑定的事件也无法触发；
opacity: 0元素上面绑定的事件是可以触发的
4.动画区别
transition对于display肯定是无效的，
transition对于visibility也是无效的
transition对于opacity是有效的
2.h5新增哪些标签？
语义化标签；
丰富input中type类型;
音频（audio）和视频（video）；
拖放API；
地理位置；
canvas画布；
svg；
webWorker；
3.响应式布局怎么做?
百分比布局
利用对属性设置百分比来适配不同屏幕，注意这里的百分比是相对于父元素； 能够设置的属性有width，、height、padding、margin，其他属性比如border、 font-size不能用百分比来设置的,由于没办法对font-size进行百分比设置，所以用的最多就是对图片和大块布局进行百分比设置。
rem布局的原理
rem：相对于根元素(即html元素)font-size计算值的倍数。
如 html的font-size为100px；那么2rem就为200px。
通俗的来讲的话rem就是通过JavaScript来获取页面的宽度，从而动态的计算rem。这样就会使不同分辨率下展现出相同的效果。
4.常见浏览器内核
浏览器内核负责对网页语法进行解析，即内部的渲染引擎，决定网页的显示效果，常见的内核有以下几种：
IE浏览器，微软出品的Trident内核，厂商前缀-ms-；
Chrome，谷歌出品的Webkit内核，已经转向Blink内核，厂商前缀-webkit-；
Firefox，Mozilla出品的Gecko内核，厂商前缀-moz-；
欧朋浏览器，欧朋出品的Presto内核，厂商前缀-o-；
Safari，苹果出品的Webkit，厂商前缀-webkit-；
5.iframe的优缺点
优点
可以解决第三方静态内容加载缓慢的问题；
iframe无刷新文件上传；
iframe跨域通信
缺点
iframe会阻塞主页面的onload事件；
无法被搜索引擎捕获到导致不利于SEO；
增加服务器的http请求；
内存开销大；
