前端开发常见笔试/面试题总结 -- HTML / CSS篇

室友同为前端开发,最近在他找工做的时候,讨论到了常见的前端笔试题和面试题,今天就来总结一下以前校招和社招时频繁遇到的面试题。css

iframe 有哪些缺点?

  1. 页面看起来较杂乱,不易管理,布局不佳,易分散用户注意力
  2. 搜索引擎的检索程序没法解读这种页面,不利于SEO
  3. 移动设备兼容性差
  4. 会增长http请求,对服务器形成负担
  5. 会阻塞主页面的Onload事件
  6. 和主页面共享链接池,而浏览器对相同域的链接有限制,因此会影响页面并行加载

cookie和localStorage、seesionStorage的区别是什么?

共同点是都保存在浏览器端,区别以下:html

  1. cookies是为了标识用户身份而存储在本地的数据,会随http请求一同发送到服务器,而localStorage和sessionStorage仅在本地保存,不会自动把数据发给服务器
  2. cookie保存的数据不超过4k,而localStorage和sessionStorage保存的数据可达到5M
  3. cookie在过时以前一直有效,即便窗口或者浏览器关闭。localStorage始终有效,窗口和浏览器关闭也一直保存,用做长久数据保存,sessionStorage仅在浏览器窗口关闭以前有效。
  4. cookie数据在全部同源窗口都共享。localStorage也是在全部同源窗口都共享,而sessionStorage不在不一样的浏览器共享,即便同一页面

多个标签页如何实现通讯?

  1. localStorage:在window全局对象上添加监听事件 window.onstorage = (e) => { console.log(e); }
  2. webSocket协议
  3. SharedWorker:webWorker只针对当前页面,而SharedWorker则是多个标签共享的worker

HTML5如何实现文件离线储存?

在head中加入manifest属性,它会请求manifest文件,第一次访问时,浏览器会根据manifest文件的内容下载相应的资源,并进行离线存储。若是已经访问过而且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面。前端

实现不使用 border 画出 1px 高的线

为了在不一样浏览器的标准模式与怪异模式下都能保持一致,可用如下方法:
一、使用divweb

<div style="width: 100%; height: 1px; background-color: black" />

二、使用hr,不建议直接使用size属性,由于新的标准里已经废弃直接使用标准的方式面试

<hr style="height: 1px" />

如何实现垂直居中?

  1. 绝对定位:浏览器

    main {
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate( -50%, -50% );
       }
  2. flexbox布局:服务器

    display: flex, justify-content: center, align-items: center
  3. box布局:cookie

    box-align: center; box-pack: center

什么是标准模式和怪异模式?如何应对?

标准模式又称严格模式,浏览器使用 W3C 的标准解析渲染页面
怪异模式又称混杂模式,浏览器都按照本身的方式解析渲染页面,在不一样的浏览器网页会显示不一样的样式session

最好的方法就是添加了文档类型声明,好比<!DOCTYPE html>,浏览器会用W3C的标准来渲染网页布局

如何解决两个元素的重叠问题(外边距合并)?

外边距合并(叠加):当两个垂直(不包含水平)外边距相遇时,它们将造成一个外边距。合并后的外边距的高度取外边距高度中的较大者。

  • 一上一下会合并;
  • 一内一外也会合并;
  • 自身(没有边框或填充时)的margin-top和margin-bottom也会合并

方法:能够用BFC的方式解决,所谓的BFC就是css布局的一个概念,是一块区域,一个环境。

  • margin穿透:能够将父级元素设置为一个独立的BFC,子级元素的margin值就不会溢出父级,咱们这里对父级元素应用样式overflow: hidden
  • margin重叠:也就是两个平级的元素发生重叠的情形,咱们能够将两个div套上一个BFC的外壳,这样两个BFC的内部元素就不会互相影响了

在页面上实现一个圆形的可点击区域

  1. SVG方式:同理相似的用<area>的方式也能够
  2. CSS方式:border-radius: 50%
  3. JS方式:先绘制一个正方形,js检测鼠标位置是否在圆上

常见的SEO方法有哪些?

  1. 页面布局, 重要的东西要提早。
  2. 文章关键词的分布( 在面包屑以及侧边栏适当的调用文章标题来提升关键词密度)
  3. 文章内容能够在源码中写在侧边栏的前面, 以后用float: right浮动到右边便可
  4. 图片处理( 图片作压缩, 调用图片用div + css来调用, 同时添加alt属性。)
  5. 图片添加alt属性,( 搜索引擎蜘蛛没法抓取图片内容)
  6. 页面的大小控制
  7. 将脚本放在底部
相关文章
相关标签/搜索