Web前端面试题大集锦之HTML+CSS篇

当前位置：首页 > 面试技巧 > 正文

分享到：

Web前端面试题大集锦之HTML+CSS篇

时间：2021-03-15 14:53 　来源：千锋武汉校区　作者：lemon

如今初级前端的工作，已经接近饱和，并且供过于求的状态，企业需要的更多的是基础牢固，至少会一门的后端技能的前端开发工程师。已经不再是以前所说的切图仔，美工。前端开发岗位已经在很多大企业属于独立的，需要专业技能的岗位。

你想知道自己的技术水平与高薪匹不匹配吗？下面千锋武汉Web前端培训小编分享了一些Web前端的面试题，限时一小时，你看看自己能够答出多少道！

HTML

Doctype作用？严格模式与混杂模式如何区分？它们有何意义?

HTML5 为什么只需要写 <!DOCTYPE HTML>？

行内元素有哪些？块级元素有哪些？空(void)元素有那些？

页面导入样式时，使用link和@import有什么区别？

介绍一下你对浏览器内核的理解？

常见的浏览器内核有哪些？

html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

简述一下你对HTML语义化的理解？

HTML5的离线储存怎么使用，工作原理能不能解释一下？

浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

请描述一下 cookies，sessionStorage 和 localStorage 的区别？

iframe有那些缺点？

Label的作用是什么？是怎么用的？（加 for 或包裹）

HTML5的form如何关闭自动完成功能？

如何实现浏览器内多个标签页之间的通信? (阿里)

webSocket如何兼容低浏览器？(阿里)

页面可见性（Page Visibility）API 可以有哪些用途？

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

实现不使用 border 画出1px高的线，在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。

网页验证码是干嘛的，是为了解决什么安全问题？

tite与h1的区别、b与strong的区别、i与em的区别？

u=2660013812,702775733&fm=26&gp=0

CSS

介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

CSS选择符有哪些？哪些属性可以继承？

CSS优先级算法如何计算？

CSS3新增伪类有那些？

如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

display有哪些值？说明他们的作用。

position的值relative和absolute定位原点是？

CSS3有哪些新特性？

请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？

用纯CSS创建一个三角形的原理是什么？

一个满屏品字布局如何设计?

常见兼容性问题？

li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？

为什么要初始化CSS样式。

absolute的containing block计算方式跟正常流有什么不同？

CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？

position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？

对BFC规范(块级格式化上下文：block formatting context)的理解？

CSS权重优先级是如何计算的？

请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式

移动端的布局用过媒体查询吗？

使用 CSS 预处理器吗？喜欢那个？

CSS优化、提高性能的方法有哪些？

浏览器是怎样解析CSS选择器的？

在网页中的应该使用奇数还是偶数的字体？为什么呢？

margin和padding分别适合什么场景使用？

抽离样式模块怎么写，说出思路，有无实践经验？[阿里航旅的面试题]

元素竖向的百分比设定是相对于容器的高度吗？

全屏滚动的原理是什么？用到了CSS的那些属性？

什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？）

::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用。

如何修改chrome记住密码后自动填充表单的黄色背景？

你对line-height是如何理解的？

设置元素浮动后，该元素的display值是多少？（自动变成display:block）

怎么让Chrome支持小于12px 的文字？

让页面里的字体变清晰，变细用CSS怎么做？（-webkit-font-smoothing: antialiased;）

font-style属性可以让它赋值为“oblique” oblique是什么意思？

position:fixed;在android下无效怎么处理？

如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

display:inline-block 什么时候会显示间隙？(携程)

overflow: scroll时不能平滑滚动的问题怎么处理？

有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。

png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）

style标签写在body后与body前有什么区别？

以上千锋武汉Web前端培训小编仅介绍了部分Web前端面试题。如果想要在众多竞争者中脱颖而出，除了专业技能还需要掌握一些求职面试的技巧，在面试过程中争取更多的主动权。你也可以来千锋武汉Web前端培训班免费试听两周，亲身感受教学效果，满意后进行系统深入的学习进阶！

武汉Web前端培训机构哪家好？如何选择？

武汉Web前端培训班哪家好？具体怎么选？

武汉Web前端培训怎么学？如何成为Web前端工程师？

Web前端开发者想找到好工作，离不开一份完美的简历！

30道Web前端面试题，你能答出多少道？

上一篇：千锋武汉Java面试宝典之JVM篇（附答案）
下一篇：Web前端面试题大集锦之JavaScript篇

热点排行

开班信息

Python培训班--------------------------------
06.15抢座
HTML5大前端班--------------------------------
06.29抢座