资讯专栏INFORMATION COLUMN

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

endiat / 3084人阅读

摘要:室友同为前端开发,最近在他找工作的时候,讨论到了常见的前端笔试题和面试题,今天就来总结一下之前校招和社招时频繁遇到的面试题。合并后的外边距的高度取外边距高度中的较大者。

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

iframe 有哪些缺点?

页面看起来较杂乱,不易管理,布局不佳,易分散用户注意力

搜索引擎的检索程序无法解读这种页面,不利于SEO

移动设备兼容性差

会增加http请求,对服务器造成负担

会阻塞主页面的Onload事件

和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面并行加载

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

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

cookies是为了标识用户身份而存储在本地的数据,会随http请求一同发送到服务器,而localStorage和sessionStorage仅在本地保存,不会自动把数据发给服务器

cookie保存的数据不超过4k,而localStorage和sessionStorage保存的数据可达到5M

cookie在过期之前一直有效,即使窗口或者浏览器关闭。localStorage始终有效,窗口和浏览器关闭也一直保存,用作长久数据保存,sessionStorage仅在浏览器窗口关闭之前有效。

cookie数据在所有同源窗口都共享。localStorage也是在所有同源窗口都共享,而sessionStorage不在不同的浏览器共享,即使同一页面

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

localStorage:在window全局对象上添加监听事件 window.onstorage = (e) => { console.log(e); }

webSocket协议

SharedWorker:webWorker只针对当前页面,而SharedWorker则是多个标签共享的worker

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

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

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

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

2、使用hr,不建议直接使用size属性,因为新的标准里已经废弃直接使用标准的方式


如何实现垂直居中?

绝对定位:

   main {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate( -50%, -50% );
   }

flexbox布局:

   display: flex, justify-content: center, align-items: center

box布局:

   box-align: center; box-pack: center

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

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

最好的方法就是添加了文档类型声明,比如,浏览器会用W3C的标准来渲染网页

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

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

一上一下会合并;

一内一外也会合并;

自身(没有边框或填充时)的margin-top和margin-bottom也会合并

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

margin穿透:可以将父级元素设置为一个独立的BFC,子级元素的margin值就不会溢出父级,我们这里对父级元素应用样式overflow: hidden

margin重叠:也就是两个平级的元素发生重叠的情形,我们可以将两个div套上一个BFC的外壳,这样两个BFC的内部元素就不会互相影响了

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

SVG方式:同理类似的用的方式也可以

CSS方式:border-radius: 50%

JS方式:先绘制一个正方形,js检测鼠标位置是否在圆上

常见的SEO方法有哪些?

页面布局, 重要的东西要提前。

文章关键词的分布( 在面包屑以及侧边栏适当的调用文章标题来提高关键词密度)

文章内容可以在源码中写在侧边栏的前面, 之后用float: right浮动到右边即可

图片处理( 图片做压缩, 调用图片用div + css来调用, 同时添加alt属性。)

图片添加alt属性,( 搜索引擎蜘蛛无法抓取图片内容)

页面的大小控制

将脚本放在底部

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/106716.html

相关文章

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

    摘要:室友同为前端开发,最近在他找工作的时候,讨论到了常见的前端笔试题和面试题,今天就来总结一下之前校招和社招时频繁遇到的面试题。合并后的外边距的高度取外边距高度中的较大者。 室友同为前端开发,最近在他找工作的时候,讨论到了常见的前端笔试题和面试题,今天就来总结一下之前校招和社招时频繁遇到的面试题。 iframe 有哪些缺点? 页面看起来较杂乱,不易管理,布局不佳,易分散用户注意力 搜索引...

    dongxiawu 评论0 收藏0
  • 前端文档收集

    摘要:系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法 随笔分类 - HTML5 HTML5中40个最重要的技术点 常用meta整理 网页性能管理详解 HTML5 ...

    jsbintask 评论0 收藏0
  • 前端文档收集

    摘要:系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法 随笔分类 - HTML5 HTML5中40个最重要的技术点 常用meta整理 网页性能管理详解 HTML5 ...

    ?xiaoxiao, 评论0 收藏0
  • 前端文档收集

    摘要:系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法 随笔分类 - HTML5 HTML5中40个最重要的技术点 常用meta整理 网页性能管理详解 HTML5 ...

    muddyway 评论0 收藏0
  • 前端资源系列(4)-前端学习资源分享&前端面试资源汇总

    摘要:特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 本以为自己收藏的站点多,可以很快搞定,没想到一入汇总深似海。还有很多不足&遗漏的地方,欢迎补充。有错误的地方,还请斧正... 托管: welcome to git,欢迎交流,感谢star 有好友反应和斧正,会及时更新,平时业务工作时也会不定期更...

    princekin 评论0 收藏0

发表评论

0条评论

endiat

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<