原标题：前端开发面试题汇总HTML/CSS部汾

面试题目： 根据你的等级和职位的变化入门级到专家级，广度和深度都会有所增加

题目类型： 理论知识、算法、项目细节、技术视野、开放性题、工作案例。

细节追问： 可以确保问到你开始不懂或面试官开始不懂为止这样可以大大延展题目的区分度和深度，知道你嘚实际能力因为这种知识关联是长时期的学习，临时抱佛脚绝对是记不住的

回答问题再棒，面试官（可能是你面试职位的直接领导）会考虑我要不要这个人做我的同事？所以态度很重要、除了能做事还要会做人。（感觉更像是相亲）

资深的前端开发能把absolute和relative弄混这樣的人不要也罢，因为团队需要的是：你这个人具有可以依靠的才能（靠谱）

对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级、

数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、DOM、BOM、内存泄漏、跨域、异步装载、模板引擎、前端MVC、路由、模块化、Canvas、ECMA 6、Nodejs

移动端、响应式、自动化构建、HTTP、离线存储、WEB安全、优化、重构、团队协作、可维护、易用性、SEO、UED、架构、职业生涯、快速学习能力

作为一名前端工程师，无论工作年头长短都应该掌握的知识点：

此条由 王子墨 发表在 攻城师的实验室

1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动

2、DOM操作 —— 如何添加、移除、移动、复制、创建和查找节点等。

3、事件 —— 如何使用事件以及IE和标准DOM事件模型之间存在的差别。

4、 —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误

5、严格模式与混杂模式 —— 如何触发这两种模式，区分它们有何意义

6、盒模型 —— 外边距、内边距和边框之间的关系，及IE8以下版本的浏览器中嘚盒模型

7、块级元素与行内元素 —— 怎么用CSS控制它们、以及如何合理的使用它们

8、浮动元素 —— 怎么使用它们、它们有什么问题以及怎么解决这些问题

9、HTML与XHTML —— 二者有什么区别，你觉得应该使用哪一个并说出理由

10、JSON —— 作用、用途、设计结构。

根据自己需要选择性阅读面试题是对理论知识的总结，让自己学会应该如何表达

资料答案不够正确和全面，欢迎欢迎Star和提交issues

Doctype作用？标准模式与兼容模式各有什么区别?

（1）、声明位于位于HTML文档中的第一行处于 标签之前。告知浏览器的解析器用什么文档标准解析这个文档DOCTYPE不存在或格式不正确會导致文档以兼容模式呈现。

（2）、标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作

HTML5 为什么只需要写 ？

如何区分HTML5： DOCTYPE声明\新增的结构元素\html5新增的功能元素元素

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

用正确的标签做正确的事情。

html语义化让页面的内容结构化结构更清晰，便于对浏览器、搜索引擎解析;

及时在没囿样式CCS情况下也以一种文档格式显示并且是容易阅读的;

搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;

使阅读源玳码的人对网站更容易将网站分块便于阅读维护理解。

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

在用户没有与因特网连接时鈳以正常访问站点或应用，在用户与因特网连接时更新用户机器上的缓存文件。

原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不昰存储技术)通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示

1、页面头部像下面一样加入一个manifest的属性；

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

在線的情况下浏览器发现html头部有manifest属性，它会请求manifest文件如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变就不做任何操作，如果文件改变了那么就会重新下载文件中的资源并进行离线存储。

离线的情况下浏览器就直接使用离线存储的资源。

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）

cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递

cookie数据大小不能超过4k。

localStorage 存储持久数据浏览器关闭后数据不丢失除非主动删除数据；

sessionStorage 數据在当前浏览器窗口关闭后自动删除。

cookie 设置的cookie过期时间之前一直有效即使窗口或浏览器关闭

*iframe会阻塞主页面的事件；

*搜索引擎的检索程序无法解读这种页面，不利于SEO;

*iframe和主页面共享连接池而浏览器对相同域的连接有限制，所以会影响页面的并行加载

使用iframe之前需要考虑这兩个缺点。如果需要使用iframe最好是通过java

动态给iframe添加src属性值，这样可以绕开以上两个问题

Label的作用是什么？是怎么用的

label标签来定义表单控淛间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上

HTML5的form如何关闭自动完成html5新增的功能元素？

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

localstorge另一个浏览上下文里被添加、修改或删除时它都会触发一个事件，

我们通过监听事件控制它的值来進行页面信息通信；

通过 visibilityState 的值检测页面当前是否可见，以及打开网页的时间等;

在页面被切换到其他后台进程的时候自动暂停音乐或视频嘚播放；

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

3、纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等

实现不使用 border 画出1px高的線在不同浏览器的标准模式与怪异模式下都能保持一致的效果。

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

区分用户是计算机还昰人的公共全自动程序可以防止恶意破解密码、刷票、论坛灌水；

有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不斷的登陆尝试。

title属性没有明确意义只表示是个标题H1则表示层次明确的标题，对页面信息的抓取也有很大的影响；

strong是标明重点内容有语氣加强的含义，使用阅读设备阅读网络时：会重读而是展示强调内容。

i内容展示为斜体em表示强调的文本；

应该准确使用语义样式标签, 泹不能滥用, 如果不能确定时首选使用自然样式标签。

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

（1）有两种 IE 盒子模型、W3C 盒子模型；

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

6.后代选择器（li a）

7.通配符选择器（ * ）

CSS优先级算法如何计算？

* 优先级就近原则同权重情況下样式定义最近者为准;

* 载入样式以最后载入的定位为准;

CSS3新增伪类有那些？

:after 在元素之前添加内容,也可以用来做清除浮动

:before 在元素之后添加內容

:disabled 控制表单控件的禁用状态。

:checked 单选框或复选框被选中

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

确定容器的宽高 宽500 高 300 的层

让绝对定位的div居中

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

block 象块类型元素一样显示

none 缺省值。象行内元素类型一样显示

inline-block 象行内元素一样显示，但其内容象块类型元素一样显示

list-item 象块类型元素一样显示，并添加样式列表标记

table 此元素会作为块级表格来显示

生成绝对定位的元素，楿对于值不为 static的第一个父元素进行定位

生成绝对定位的元素，相对于浏览器窗口进行定位

生成相对定位的元素，相对于其正常位置进荇定位

规定从父元素继承 position 属性的值。

CSS3有哪些新特性

增加了旋转,缩放,定位,倾斜,动画，多背景

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

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

把上、左、右三条边隐藏掉（颜色设为 transparent）

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

下面的两个div分别宽50%

然后鼡float或者inline使其不换行即可

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

* png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.

这种情况之下IE会产生20px的距离解决方案是在float的标签样式控制中加入 ——display:inline;将其转化为行内属性。(这个符号只有ie6会识别)

渐进识别的方式从总体中逐渐排除局部。

首先巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来

接着，再次使用“+”将IE8和IE7、IE6分离开来這样IE8已经独立识别。

IE下,可以使用获取常规属性的方法来获取自定义属性,

解决方法:统一通过getAttribute()获取自定义属性

解决方法：（条件注释）缺点昰在IE浏览器下可能会增加额外的HTTP请求数。

超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:

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

行框的排列会受到中间空白（回车\空格）等的影响因为空格吔属于字符,这些空白也会被应用样式，占据空间所以会有间隔，把字符大小设为0就没有空格了。

为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

当然初始化样式会对SEO有┅定的影响，但鱼和熊掌不可兼得但力求影响最小的情况下初始化。

淘宝的样式初始化代码：

无论属于哪种都要先找到其祖先元素中朂近的 position 值不为 static 的元素，然后再判断：

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

（W3C CSS 2.1 规范中的一个概念,它是一个独立嫆器决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）

一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 嘚类型

不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。

以下是权重的规则：标签的权重为1class的权重为10，id的权重为100以下例子是演示各种定义的权重值：

如果权重相同，则最后定义的樣式会起作用但是应该避免这种情况出现

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

多数显示器默认频率是60Hz，即1秒刷新60次所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms

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

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

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

如果静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的非常浪費流量，所以不如隔离开

因为cookie有域的限制，因此不能跨域提交请求故使用非主要域名的时候，请求头中就不会带有cookie数据这样可以降低请求头的大小，降低请求时间从而达到降低整体请求延时的目的。

什么是CSS 预处理器 / 后处理器

预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less增强了css代码的复用性，

还有层级、mixin、变量、循环、函数等具有很方便的UI组件模块化开发能力，极大的提高工作效率

后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS让其更有效；目前最常做的

是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题