直通互联网大厂前端面试系列(一)——HTML/CSS

传送门

  • 直通互联网大厂前端面试系列(零)——目录总纲
  • 直通互联网大厂前端面试系列(一)——HTML/CSS
  • 直通互联网大厂前端面试系列(二)——JS / ES6+
  • 直通互联网大厂前端面试系列(三)——网络基础
  • 直通互联网大厂前端面试系列(四)——主流框架
  • 直通互联网大厂前端面试系列(五)——算法

写在前面

HTMLCSS,这二者关系可谓非常密切了。面试中考到的HTML不多,因为太基础了。后面的问题答得上来的,HTML基础肯定不会差,后面的问题答不上来的,你只答上来HTML也没有用。所以我们把HTML和CSS合成一个主题来讲,在讲CSS时顺带着就把HTML讲了。
另外,CSS是一个需要积累的技能,有经验的人真的可以从你手写的一段代码里看出你的经验,面试时自己有多少经验就说多少,千万不要撒谎

长期如何学习

如果你有1个月以上的准备时间,建议按照如下几点去做,并一直做下去:

  • 高标准要求自己,前文说CSS(包括HTML)是需要积累的技能,所以在平时业务当中,多花时间思考,用最少!最少!最少的代码去实现UI,时间久了你会惊讶于别人代码的糟糕和自己代码的简洁。其最直接的收益,便是开发新需求的速度比别人快,写的代码bug比别人少。我已经不知道见过多少10多层的div配上10多层的样式了,维护起来简直是噩梦,希望你不要变成你讨厌的人。BTW,你知道只用一个div就能实现一个太极图吗?
  • 至少熟练一种框架,这基本上已经是前端招聘的标配了,大厂更不用说,一定会考到原理层面的。传统的Bootstrap;React系的Ant-DesignMaterial-UI;Vue系的Elementiview;Angular系的Angular Material,这些提到的至少要熟练运用一个,其他的至少要听说过。如何界定“熟练运用”?后续我计划出一套完整的UI,如果你能很顺利的把它用任意框架100%还原,那就算熟练!不顺利的,等完成后,也可以勉强算熟悉了。
  • FormTable组件越熟练越好。2B项目就不用说了,即使是2C项目也需要后台页面。所以对于这两个组件的熟练程度,直接影响你的工作效率。一定要多用,多思考,越熟练越好。

短期如何突击

如果离面试还有一周以上的时间,建议花1-2天时间来研究一下以下知识点:

  • 盒子模型及相关知识点
  • 选择器优先级
  • 水平垂直居中
  • 浮动与清除浮动
  • flex布局
  • H5新特性
  • CSS动画
  • CSS预处理器

子曰:“思而不学则殆”。每个知识点都够讲很久,而且说实话,光看这些概念,能记住多少?又能理解多少?换个问法你还听得出来吗?所以还是那句话,带着问题去学习是效率最高的方法。另外,在复习这些概念的时候,结合下一节的内容一起,绝对可以起到事半功倍的效果。

临阵如何磨枪

实战永远是成为一个战士捷径,下面就是我们实战刷题时间了。子曰:“学而不思则罔”。所以即使是刷题,我们也要有思考的刷题,要与上一节的知识点对号入座,查漏补缺,才是最有效率的刷题方法,直接上题:

请说出3个H5新增的块元素,并介绍他们的应用场景

追问:

  • 行内元素和块元素的区别
  • 请介绍下display: inline-block;的特点,另外display还有什么其他值?
  • 请说出3个CSS浏览器前缀
请介绍下盒子模型

追问:

  • box-sizing都有哪些值?他们的宽高分别如何计算?
  • 什么是边界塌陷(或边界重叠)?
  • 什么是BFC(格式化上下文)?如何实现?参考资料
  • 多个inline元素之间会有空隙,为什么?如何解决?参考资料
请实现三列布局,要求:背景色分别为red、green、blue;左右各定宽200px;中间随屏幕大小变化;内容互不遮挡;方法越多越好 参考资料

追问:

  • 浮动会出现什么问题,如何清除浮动?参考资料
  • 如何实现中间部分最先加载?
  • 如何保证三列等高,并随着最高的一列变化?参考资料
  • position都有哪些值?是针对包裹元素定位吗?
一个220x220的元素A,一个20x20的元素B,B中有一个文字“C”,字体大小15px。要求,A在屏幕中央,B在A中央,文字“C”在B中央,中央即为水平垂直都居中。不限方法,越多越好 参考资料

追问:

  • 若A的宽度随屏幕宽度变化,并满足左右边距各20px,如何实现?
  • 若A的高度等于A宽度的50%,如何实现?参考资料
  • 若B的宽度不确定,如何实现?高度也不确定呢?
CSS的选择器有哪些?优先级高低如何判断?

追问:

  • 优先级相同时会发生什么?
  • 列举几条常用的CSS reset,是否了解normalize.css?
  • 如何做到一个list中奇数和偶数行的背景色不一样?
  • 如何做到一个list的第一行没有上边框?
请描述一下浏览器从开始解析HTML到渲染结束都经历了什么?参考资料

追问:

  • 浏览器解析CSS是从左开始还是从右?为什么?
  • 什么是reflow和repaint?
  • HTML的解析会因为什么阻塞?静态文件引用如何放置合理?
  • 为什么要用语义化标签?
如何适配移动端? 参考资料

追问:

  • 除了px还有什么单位?都如何计算?
  • 如何实现0.5px的边框?参考资料
  • 如何禁止用户缩放?
  • 如何禁止用户全选文字内容?

你可能感兴趣的:(直通互联网大厂前端面试系列(一)——HTML/CSS)