传送门
- 直通互联网大厂前端面试系列(零)——目录总纲
- 直通互联网大厂前端面试系列(一)——HTML/CSS
- 直通互联网大厂前端面试系列(二)——JS / ES6+
- 直通互联网大厂前端面试系列(三)——网络基础
- 直通互联网大厂前端面试系列(四)——主流框架
- 直通互联网大厂前端面试系列(五)——算法
写在前面
HTML、CSS,这二者关系可谓非常密切了。面试中考到的HTML不多,因为太基础了。后面的问题答得上来的,HTML基础肯定不会差,后面的问题答不上来的,你只答上来HTML也没有用。所以我们把HTML和CSS合成一个主题来讲,在讲CSS时顺带着就把HTML讲了。
另外,CSS是一个需要积累的技能,有经验的人真的可以从你手写的一段代码里看出你的经验,面试时自己有多少经验就说多少,千万不要撒谎。
长期如何学习
如果你有1个月以上的准备时间,建议按照如下几点去做,并一直做下去:
- 高标准要求自己,前文说CSS(包括HTML)是需要积累的技能,所以在平时业务当中,多花时间思考,用最少!最少!最少的代码去实现UI,时间久了你会惊讶于别人代码的糟糕和自己代码的简洁。其最直接的收益,便是开发新需求的速度比别人快,写的代码bug比别人少。我已经不知道见过多少10多层的div配上10多层的样式了,维护起来简直是噩梦,希望你不要变成你讨厌的人。BTW,你知道只用一个div就能实现一个太极图吗?
- 至少熟练一种框架,这基本上已经是前端招聘的标配了,大厂更不用说,一定会考到原理层面的。传统的
Bootstrap
;React系的Ant-Design
、Material-UI
;Vue系的Element
、iview
;Angular系的Angular Material
,这些提到的至少要熟练运用一个,其他的至少要听说过。如何界定“熟练运用”?后续我计划出一套完整的UI,如果你能很顺利的把它用任意框架100%还原,那就算熟练!不顺利的,等完成后,也可以勉强算熟悉了。 Form
和Table
组件越熟练越好。2B项目就不用说了,即使是2C项目也需要后台页面。所以对于这两个组件的熟练程度,直接影响你的工作效率。一定要多用,多思考,越熟练越好。
短期如何突击
如果离面试还有一周以上的时间,建议花1-2天时间来研究一下以下知识点:
- 盒子模型及相关知识点
- 选择器优先级
- 水平垂直居中
- 浮动与清除浮动
- flex布局
- H5新特性
- CSS动画
- CSS预处理器
子曰:“思而不学则殆”。每个知识点都够讲很久,而且说实话,光看这些概念,能记住多少?又能理解多少?换个问法你还听得出来吗?所以还是那句话,带着问题去学习是效率最高的方法。另外,在复习这些概念的时候,结合下一节的内容一起,绝对可以起到事半功倍的效果。
临阵如何磨枪
实战永远是成为一个战士捷径,下面就是我们实战刷题时间了。子曰:“学而不思则罔”。所以即使是刷题,我们也要有思考的刷题,要与上一节的知识点对号入座,查漏补缺,才是最有效率的刷题方法,直接上题:
请说出3个H5新增的块元素,并介绍他们的应用场景
追问:
- 行内元素和块元素的区别
- 请介绍下display: inline-block;的特点,另外display还有什么其他值?
- 请说出3个CSS浏览器前缀
请介绍下盒子模型
追问:
请实现三列布局,要求:背景色分别为red、green、blue;左右各定宽200px;中间随屏幕大小变化;内容互不遮挡;方法越多越好 参考资料
追问:
一个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的边框?参考资料
- 如何禁止用户缩放?
- 如何禁止用户全选文字内容?