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

传送门

• 直通互联网大厂前端面试系列（零）——目录总纲
• 直通互联网大厂前端面试系列（一）——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浏览器前缀

请介绍下盒子模型

追问：

• 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的边框？参考资料
• 如何禁止用户缩放？
• 如何禁止用户全选文字内容？