# HTML5/CSS3 高频经典面试题
2023 最新
汇总了 2023 年各互联网大厂以及中小型创业公司基础阶段的最新高频面试题
- 有关答案解析会陆续更新，为确保每一个面试题的答案解析都是最佳实践和有竞争力的回答，需要一点点时间 ！
- 面试题是检验自己学习成果和查缺补漏的最好方式之一，同时也是了解企业对求职者技能要求的风向标 。
- 希望正在学习或找工作的同学少走弯路 ！
有兴趣的同学，可在评论区尝试着练习先给出自己的答案，我会给出建议和意见，每天进步一点点 ！一起加油 ^_^
# HTML/HTML5 标签
Interview questions
1、说说你对 HTML 语义化的理解 ？HTML5 新增了哪些语义化标签 ？（字节、百度，阿里，腾讯、京东，小米）
2、DOCTYPE 是干嘛的，都有哪些属性（字节）
3、meta 标签是干什么的，都有什么属性和作用（字节，58，商汤）
4、你了解哪些 HTML5 新特性（快手）
5、HTML 文档结构解释下（创业公司）
6、form 表单的属性说一说（字节）
7、说一下 href 和 src 的区别（字节）
8、script 标签放在 head 那里怎么解决加载问题（百度，阿里，腾讯、京东，小米、创业公司）
9、了解过不同图片格式的区别吗（京东）
10、精灵图的原理和优缺点？（广联达）
11、“ data- *” 属性的作用是什么 ？
HTML/HTML5 基础
1、Canvas 和 SVG 有什么区别 ？
2、HTML 中的 void 元素是什么 ？
3、HTML5 与之前的版本相比有哪些优势 ？
4、HTML5 规范的重要目标是什么 ？
5、旧浏览器如何支持 SVG？
6、HTML5 中的内联元素和块级元素分别有哪些 ？
# CSS 布局
Interview questions
1、什么是 CSS 盒模型 ？说说你的理解及实践经验（腾讯、广联达、字节、快手、小红书）
2、margin 和 padding 的区别 ？
3、margin 纵向重叠问题 ？
4、margin 负值问题
5、你了解哪些布局方式 ？（百度、快手）
6、BFC 的理解，产生 BFC 的场景，清除浮动最佳实践（滴滴、广联达、商汤、货拉拉、字节、小红书）
7、单行文本省略，多行文本省略分情况实现（按行数或高度两种情况，面试官提醒注意分情况！）（小米）
8、以下代码中第二个子元素的高度是多少 ？
<div class="container">
<div style="height: 100px"></div>
<div style="min-height: 10px"></div>
</div>
<style>
.container {
display: flex;
}
.container > div {
width: 100px;
}
</style>
# Flex 弹性布局，Grid 布局
Interview questions
1、说一下你对 flex 布局的理解，以及其中属性的默认值？（百度、58、快手、字节）
2、flex 布局设置水平垂直居中（字节）
3、flex 实现两栏布局（百度）
4、flex 怎么实现我 1 在最左边，2 3 在最右边（创业公司）
5、如何解决flex布局 7 个元素使用space-between最后一行两边分布的问题？（广联达）
6、flex 实现 8 个元素分两行排列 每行 4 个平均分布（知乎）
7、写三栏布局，要求用尽可能多的方式实现（flex 版本，圣杯布局，双飞翼布局）（小米）
8、如何用 css 实现两栏布局（字节）
9、Grid 布局（小米）
10、flex 画色子
# CSS 响应式布局
Interview questions
1、响应式布局如何实现，原理（小米、58、字节、商汤）
2、CSS 单位 px rem em vw vh 的区别和联系（58、字节）
3、如果窗口尺寸调整，vw，vh 会产生变化吗（字节）
4、rem 怎么实现页面等比例放大/缩小，怎么设计（创业公司）
# CSS 定位
Interview questions
1、CSS 定位 position 有几种属性，以及应用场景，最新的有没有了解过（小米、字节、广联达）
2、absolute 和 relative 分别依据什么去定位 ？（字节）
# 元素、文字水平垂直居中
Interview questions
1、水平垂直居中的方式（创业公司、58、字节、蚂蚁金服、小米）
2、一个容器内部有一些文字，如何让多行文字垂直居中（百度）
# CSS 画图形
Interview questions
1、CSS 画一个三角形（多种方法实现）
2、CSS 如何画一个梯形 （腾讯）
3、CSS 绘制爱心
4、CSS 绘制五角星
5、CSS 绘制长长的指向
6、CSS 绘制徽章缎带
7、CSS 绘制弧形尾箭头
8、CSS 绘制无限图形
9、CSS 绘制鸡蛋
10、CSS 绘制六角星
11、CSS 画一个太极图
12、RSS 订阅
13、CSS 怎么画一个大小为父元素面积一半的正方形（知乎）
# CSS3 动画
Interview questions
1、css3 的动画了解多少 （广联达）
2、所有 css3 的动画都能用 GPU 加速么 （广联达）
3、说一下 transform 先平移在旋转和先旋转再平移有什么区别（字节）
4、怎么让 Chrome 支持小于 12px 的文字 ？
5、CSS3 如何实现 0.5px 的细线 ？
6、如果需要手动写动画，你认为最小时间间隔是多久，为什么 ？
# CSS 属性相关
Interview questions
1、说说你最不熟悉的 3 个 css 属性（网易）
2、overflow: hidden 、 display：none、visibility: hidden 有什么区别 ？（字节）
3、隐藏一个元素的方式有哪些 ？（小米）
4、CSS：background 的属性（字节）
5、min-width、max-width、width 的包含(优先级)关系（小红书）
6、display 和 visibility 的区别，那么这两个在浏览器渲染的的过程中有什么区别呢？（字节）
7、描述 块级元素 和 行内元素 的区别（小米、字节）
8、line-height 继承问题 ？
9、什么是 z-index，它是如何工作的 ？
# CSS 综合
Interview questions
1、CSS 选择器权重和优先级，important 的缺点（知乎、小米、字节、小红书、商汤）
2、类选择器和伪类的区别及优先级？（字节）
3、伪类、伪元素（小红书）
4、css 样式隔离，怎么解决样式隔离（知乎、京东）
5、第二个子元素的高度是多少（字节）
6、浏览器如何确定哪些元素与 CSS 选择器匹配 ？
7、CSS 在浏览器底层是如何工作的 ？
8、为什么我们更推荐外部 CSS 或 Javascript 而不是内联 ？
9、CSS 有什么缺点 ？
10、Reset 与 Normalize CSS 的区别？它们有何不同 ？
11、CSS 优化、提高性能的方法有哪些 ？
大厂最新技术学习分享群
微信扫一扫进群，获取资料
X