刷面经笔记2019.02.10

1.描述一下渐进增强和优雅降级

优雅降级(graceful degradation)：一开始就构建站点的完整功能，然后针对浏览器测试和修复。

渐进增强(progressive enhancement)：一开始只构建站点的最少特性，然后不断针对各浏览器追加功能。

 

2.为什么利用多个域名来请求网络资源会更有效？

动静分离请求，使用不同的服务器处理请求，提高效率；

突破浏览器的并发限制，同一时间针对同一域名下的请求有一定的数量限制。

节约主域名的连接数，从而提高客户端网络带宽的利用率，优化页面响应。

 

3.HTML5有哪些新特性、移除了哪些元素？

1）绘画标签canvas；

2）用于媒介回放的video和audio元素；

3）本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失；

4）sessionStorage的数据在浏览器关闭后自动删除；

5）语义化更好的内容元素，比如article、footer、header、nav、section；

6）表单控件，calendar、data、time、email、url、search；

7）webworker、websocket、Geolocation；

移除的元素：

1）纯表现的元素：basefont、big、center、font、s、strike、tt

2）对可用性产生负面影响的元素：frame、frameset、noframes

 

4.display:none;与visibility:hidden;的区别？

相同点：它们都能让元素不可见‘

不同点：

display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；

visibility:hidden;不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见；

display:none;是非继承属性，子孙节点的消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；

visibility:hodden;是继承属性，子孙节点的消失由于继承了hidden，通过设置visibility:visible;可以让子孙节点显示；

修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘；

读屏器不会读取display:none;元素内容;会读取visibility:hidden;元素内容；

 

5.CSS去掉inline-block元素间隙的几种方法？

间隙是怎么来的：间隙是由换行或者回车导致的；只要把标签写成一行或者标签没有空格，就不会出现间隙；

去除方法：

方法一：

元素间的间隙出现的原因，是元素标签之间的空格，把空格去掉间隙就会消失

<div class="itlike">
  <span>lhh</span><span>lhh</span>
</div>

方法二：

利用HTML注释标签

<div class="demo">
    <span>lhh</span><!-- 
    --><span>lhh</span>
</div>

方法三：

取消标签闭合

<div class="demo">
    <span>lhh
    <span>lhh
    <span>lhh
    <span>lhh
</div>

方法四：

在父容器上使用font-size:0;可以消除间隙

<div class="demo">
    <span>lhh</span>
    <span>lhh</span>
    <span>lhh</span>
    <span>lhh</span>
</div>
.demo {font-size: 0;}

 

6.input标签的type种类

button、checkbox、file、hidden、image、password、radio、reset、submit、text