知道这些面试题，面试bigu---盖率99%（上篇）

前端开发精要

最新推荐文章于 2025-08-05 15:36:59 发布

转载最新推荐文章于 2025-08-05 15:36:59 发布 · 282 阅读

本文深入探讨前端领域的核心技能，包括HTML5新标签功能、CSS3特性、弹性盒布局技巧、跨浏览器兼容性策略，以及面试常见问题解答。

今年互联网行业发生了很多事情，996、251...数字背后的故事不由地让人脊背发凉。“我到底能做多久？”“前端还值得吗？”由此产生的各种思考，估计很多人也问过自己。

现在年关将近，可能有很多前端都在考虑换工作可能也会有很多忧虑，

让人稍微放心的是，前端前景不错，发展已不再局限于前端，还涉及到后端、人工智能领域及物联网等多个层面。对应薪资也是一路水涨船高，与后端开发的薪资差距明显。

最终决定如何走得更远的关键，其实是能不能持续提升自己。最近小编通过各种途径整理了一份最近面试提问的几率很大的面试题合集，希望对即将面试，或考虑换工作的人有所帮助

这篇文章将分为三部分css和html为一部分，js、jQuery为一部分，vue与性能优化为一部分，今天会先整理css与html

1，弹性盒布局

父级设置display：flex将对象作为弹性伸缩盒显示

采用Flex布局的元素，被称为Flex容器(flex container)，简称“容器”。其所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称“项目”。

容器默认生成两根主轴，水平方向主轴(main axis)和垂直方向交叉轴(cross axis)，默认项目按主轴排列。

设置在容器上的属性有6种

分别为

flex-direction：决定主轴的方向（即项目的排列方向）

flex-wrap：定义换行情况

flex-flow：flex-direction和flex-wrap的简写，默认row nowrap

justify-content：定义项目在主轴上的对齐方式。

align-item：定义在交叉轴上的对齐方式

align-content：定义多根轴线的对齐方式

详细属性值请参阅文档

2，html5新标签与新功能

新标签：

header,footer,article,aside,nav,p,time,progress,

ruby,mark....

新功能：

vidio，audio，canvas，拖放，离线应用，web存储（sessionStorage，localStorage，sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除， localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用），历史状态管理，地理位置，新增input类型（color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week），新增表单元素，WebSocket

3、css3的新特性

属性选择器：[attribute],[attribute=value],[attribute~=value]...

伪类选择器：:first-letter ，:first-line，:first-child....

伪元素选择器：:before，:after

border：border-image，border-radius,box-shadow

背景：background-size,background-origin,background-clip，background-image

渐变：线性渐变（Linear Gradients）径向渐变（Radial Gradients）

background: linear-gradient(direction, color-stop1, color-stop2, ...);

background: radial-gradient(center, shape size, start-color, ..., last-color);

字体：@font-face

转换和变形：transform

过度：transition

动画：animation，@keyframes

媒体查询：@media all and

4，兼容问题：

各浏览器的margin和padding，图片默认的间距，ios和安卓对fixed的解析，特殊样式的兼容（-moz-：firefox，-webkit-：Chrome，-o-：opera，-ms-：ie）

渐进增强和优雅降级

渐进增强观点认为应该关注于内容本身。内容是我们建立网站的诱因，有的网站展示它，有的则收集它，有的寻求、有的操作，还有的网站甚至包含以上的种种，但相同点是他们全都涉及到内容，这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被Yahoo!所采纳并用以构建其“分级式浏览器支持（Graded Browser Support)“策略的原因所在。

优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如IE、Mozilla等）的前一个版本。

在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨（poor,but passable)”的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

5、css选择器的优先级

important(1000)>行内（1000）>id(100)>class(10)>标签（1）>*(0)

6、清除浮动

总结有两种方法

方法一：使用clear属性如添加空白div或使用伪元素，添加clear：both

方法二：形成BFC：如：overflow：hidden，display：inline，position：absolute,float:left

7，引入css的方法

link，@importat，他们的不同之处在于important用在css中并且引入的css在页面加载完之后加载，link用在html中并且引入的css和页面同时加载，

8、盒子模型

包含元素内容（content），内边距（padding），边框（border），外边距（margin），分为标准盒子模型和怪异盒子模型，标准盒子模型：盒子的总宽度=margin+content。怪异盒子模型：盒子的总宽度=margin+contant+padding+border

CSS3中新增的属性：box-sizing模拟了标准盒子模型和IE盒子模型box-sizing:content-box | bordrer-box | padding-box | inherit。

默认值：

content-box:标准盒子模型(border和padding不计算入width之内)

border-box:IE盒子模型(border和padding计算入width之内，其实就是怪异模式了~)

padding-box:padding计算入width内

ie8+浏览器支持content-box和border-box；

ff则支持全部三个值,只有ff支持padding-box

IE浏览器在getComputedStyle得到width/height是按照标准模式计算的，而不论box-sizing的取值

在HTML页面声明 <!DOCTYPE html>即可按照标准模型显示页面内容

9，display:none和visibility:hidden两者的区别

空间占据：display:none隐藏后不占据额外空间，它会产生回流和重绘，而visibility:hidden和opacity:0元素虽然隐藏了，但它们仍然占据着空间，它们俩只会引起页面重绘。

子元素继承：

display:none不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了，皮之不存，毛之安附~~

visibility:hidden 会被子元素继承，可以通过设置子元素visibility:visible 使子元素显示出来

opacity: 0 也会被子元素继承，但是不能通过设置子元素opacity: 0使其重新显示

事件绑定：

display:none 的元素都已经不再页面存在了，因此肯定也无法触发它上面绑定的事件；

visibility:hidden 元素上绑定的事件也无法触发；

opacity: 0元素上面绑定的事件是可以触发的。

过渡动画：

transition对于display肯定是无效的，大家应该都知道；

transition对于visibility也是无效的；

transition对于opacity是有效，大家也是知道的:).

10，position所有属性：

position: relative;相对定位：

1> 不影响元素本身特性（无论区块元素还是内联元素会保留其原本特性）

2> 不会使元素脱离文档流（元素原本位置会被保留，即改变位置也不会占用新位置）

3> 没有定位偏移量时对元素无影响（相对于自身原本位置进行偏移）

4>提升层级（用z-index样式的值可以改变一个定位元素的层级关系，从而改变元素的覆盖关系，值越大越在上面，z-index只能在position属性值为relative或absolute或fixed的元素上有效。）（两个都为定位元素，后面的会覆盖前面的定位）

position: absolute;绝对定位：

1> 使元素完全脱离文档流（在文档流中不再占位）

2> 使内联元素在设置宽高的时候支持宽高（改变内联元素的特性）

3> 使区块元素在未设置宽度时由内容撑开宽度（改变区块元素的特性）

4> 相对于最近一个有定位的父元素偏移（若其父元素没有定位则逐层上找，直到document——页面文档对象）

5> 相对定位一般配合绝对定位使用（将父元素设置相对定位，使其相对于父元素偏移）

6> 提升层级（同相对定位）

position: fixed;固定定位： fixed生成固定定位的元素，相对于浏览器窗口进行定位。

position:static：默认值：默认布局。元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

position: sticky 粘性定位：粘性定位，该定位基于用户滚动的位置。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix 。

position: inherit：规定应该从父元素继承 position 属性的值。

posiyion: initial ：设置该属性为默认值，详情查看CSS initial 关键字

initial 关键字用于设置 CSS 属性为它的默认值。

initial 关键字可用于任何 HTML 元素上的任何 CSS 属性。

11、position:absolute和float属性的异同？

两者的共同点：对行内元素设置float或absolute属性，可以让元素脱离文档流，并且可以设置其宽高。

两者的不同点：float仍会占位置，position会覆盖文档流中的其他元素。

12、如何保持浮层水平垂直居中

1，弹性盒

.parent{　justify-content:center;　align-items:center;　display:flex;}

2，利用定位和margin

　　　.parent{　　　   　 height:400px;           position: relative;           background: red;        }      .children{           width: 200px;           height: 200px;           margin: -100px 0 0 -100px;           background: black;           position: absolute;           top: 50%;           left:50%;      }

3，利用定位和变形

.children{    position: absolute;    top: 50%;    left: 50%;    -webkit-transform: translate(-50%,-50%);    background: black;}

4，display:table-cell

.parent{    width: 400px;    height: 100px;    background: black;    display: table-cell;    vertical-align: middle;    text-align: center;}
.child{    backgroung: red;    display: inline-block}

13，样式的层级关系，选择器优先级，样式冲突，以及抽离样式模块怎么写

样式的层级关系：一个是权重，另一个就是共用样式和私用样式了，比如说两个ul，它们的子元素除了背景色之外都一样，那可以直接用li {}来定义相同的公用样式，用 .ul_1 li {} ， .ul_2 li {} 来定义不相同的样式。可以根据元素之间的差别来选择用哪种方法。推荐用多层级的方式书写css选择器。

选择器优先级：（!important>）id选择器>class选择器（属性选择器/伪类选择器）>标签选择器（伪元素选择器）同类选择符条件下层级越多的优先级越高。优先级就近原则，同权重情况下样式定义最近者为准。载入样式以最后载入的定位为准。

样式冲突：如果同个元素有两个或以上冲突的CSS规则，浏览器有一些基本的规则来决定哪一个非常特殊而胜出。

选择器一样的情况下后面的会覆盖前面的属性。

使用嵌套选择器时：

一组嵌套选择器的实际特性可以计算出来。基本的，使用ID选择器的值是100，使用class选择器的值是10，每个html选择器的值是1。它们加起来就可以计算出特性的值。

p的特性是1（一个html选择器）

div p的特性是2（两个html选择器）

.tree的特性是10（1个class选择器）

div p.tree的特性是1+1+10=12，（两个html选择器，一个class选择器）#baobab的特性是100（1个ID选择器）
body #content .alternative p的特性是112（两个html选择器，一个ID选择器，一个类选择器）

基本上，一个选择器越多特性，样式冲突的时候将显示它的样式。

抽离样式模块：

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

最简单的初始化方法： * {padding: 0; margin: 0;} （强烈不建议）

 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }        body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }        h1, h2, h3, h4, h5, h6{ font-size:100%; }        address, cite, dfn, em, var { font-style:normal; }        code, kbd, pre, samp { font-family:couriernew, courier, monospace; }        small{ font-size:12px; }        ul, ol { list-style:none; }        a { text-decoration:none; }        a:hover { text-decoration:underline; }        sup { vertical-align:text-top; }        sub{ vertical-align:text-bottom; }        legend { color:#000; }        fieldset, img { border:0; }        button, input, select, textarea { font-size:100%; }        table { border-collapse:collapse; border-spacing:0; }

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

HTML 4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。
而 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为。
其中，SGML是标准通用标记语言,简单的说，就是比HTML,XML更老的标准，这两者都是由SGML发展而来的。
BUT，HTML5不是的。

15，什么是FOUC?如何避免

以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC。原因大致为：1，使用import方法导入样式表。2，将样式表放在页面底部3，有几个样式表，放在html结构的不同位置。其实原理很清楚：当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。解决方法：使用LINK标签将样式表放在文档HEAD中。

16，display:inline-block 什么时候不会显示间隙？

解决办法：让水平间隙消失就是在父级上加font-size:0;让垂直间隙消失，就在子元素上加vertical-align:bottom;就不贴代码了，
如果子标签内加上任意文字，则display:inline-block元素不会生成垂直方向有空白！

17.::before 和 :after 中双冒号和单冒号有什么区别？

在 CSS 中伪类一直用 : 表示，如 :hover, :active 等

伪元素在CSS1中已存在，当时语法是用 : 表示，如 :before 和 :after

后来在CSS3中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类

由于低版本IE对双冒号不兼容，开发者为了兼容性各浏览器，继续使使用 :after 这种老语法表示伪元素

综上所述：::before 是 CSS3 中写伪元素的新语法； :after 是 CSS1 中存在的、兼容IE的老语法

18，使用rem的兼容性问题

就是使用动态生成style标签添加计算好的html的font-size并最终添加在head标签里面

(function (doc, win) {        var docEl = doc.documentElement,            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',            recalc = function () {                var clientWidth = docEl.clientWidth;                if (!clientWidth) return;                if(clientWidth>=750){                    docEl.style.fontSize = '100px';                }else{                    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';                }            };
        if (!doc.addEventListener) return;        win.addEventListener(resizeEvt, recalc, false);        doc.addEventListener('DOMContentLoaded', recalc, false);    })(document, window);

19，解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题

针对IE浏览器比较好的解决方案是html5shiv。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。