常见的前端面试题

最新推荐文章于 2024-08-11 18:00:00 发布

小小樟鱼

最新推荐文章于 2024-08-11 18:00:00 发布

阅读量793

点赞数 1

分类专栏： javascript 文章标签：前端面试题

javascript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1、怎么清除浮动

父级div定义height
使用空标签清除浮动clear：both；（增加无意义的标签）
父级div定义伪类:after和zoom（：after{display：block；clear：both；content：“ ”；visibility：hidden；}）
父级div定义overflow:hidden
父级div定义overflow:auto
父级div也浮动，需要定义宽度
父级div定义display:table
结尾处加br标签clear:both

2、常用那几种浏览器测试？有哪些内核(LayoutEngine)?

浏览器：IE，Chrome，FireFox，Safari，Opera。
内核：Trident，Gecko，Presto，Webkit

3、说下行内元素和块级元素的区别？行内块元素的兼容性使用？（IE8以下）

行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。
块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行
兼容性：display:inline-block;*display:inline;*zoom:1;

4、css的display：none和visibility:hidden区别

display:none使用后，元素的宽度，高度都会丢失，视为不存在不加载；

元素原来占据的空间位置不保留；
产生回流和重绘
visibility:hidden:视觉上的不可见，但是保留占据的空间，还具有宽度和高度；

5、box-sizing常用的属性有哪些？分别有什么作用？

box-sizing: 1.content-box 2.border-box 3.inherit;
content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。
border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

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

<!DOCTYPE>告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作

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

HTML5不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。

而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

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

     （1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS,定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
     （2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
     （3）import是CSS2.1提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;
9、介绍一下你对浏览器内核的理解？

主要分成两部分：渲染引擎(layoutengineer或RenderingEngine)和JS引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎则：解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

10、Html5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML 和 HTML5？

（Q1）HTML5现在已经不是 SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加。
    (1)绘画 canvas;
    (2)用于媒介回放的 video和audio元素;
    (3)本地离线存储 localStorage长期存储数据，浏览器关闭后数据不丢失;
    (4)sessionStorage 的数据在浏览器关闭后自动删除;
    (5)语意化更好的内容元素，比如 article、footer、header、nav、section;
    (6)表单控件，calendar、date、time、email、url、search;
    (7)新的技术webworker, websocket, Geolocation;
(Q2)
    IE8/IE7/IE6支持通过document.createElement方法产生的标签，
    可以利用这一特性让这些浏览器支持HTML5新标签，
    浏览器支持新标签后，还需要添加标签默认的样式。
    当然也可以直接使用成熟的框架、比如html5shim;


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

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

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

即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;

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

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

12、各个浏览器中css表现的差异性

（1）IE6对margin:0 auto;不会正确的进行解析

解决办法：在父元素中使用text-align:center,在元件中使用text-align:left

（2）无法设置微高(一般小于10px)：

说明:当设置元素高度小于10px时，IE6和IE7不受控制，超出设置的高度

产生原因:IE不允许原件的高度小于字体的高度

解决办法1:设置字体大小:font-size:0;

解决办法2:给超出高度的标签设置overflow:hidden

解决办法3:设置行高line-height小于你设置的高度

（3）子元件撑破父元件

原因:父元件设置了overflow:auto属性,子元件会从父元件中撑破出来

解决办法:父元件中设置position:relative;

13、CSS3的flex布局布局

flex的作用是能够按照设置好的规则来排列容器内的项目，而不必去计算每一个项目的宽度和边距。甚至是在容器的大小发生改变的时候，都可以重新计算，以至于更符合预期的排版。

（1） display：flex|inline-flex；flex：相当于block；inline-flex：相当于inline-block

（2） flex-direction（流动布局的主轴方向）：row（默认）； row-reverse：行反方向；column：列方向； column-reverse：列方向相反

（3） flex-wrap如果轴线放不下，应该如何换行。nowrap（默认）：不换行；wrap：换行，第一行在上方；wrap-reverse:换行，第一张在下方。

（4） flex-flow（“flex-direction”和“flex-wrap”属性的缩写），row nowrap为其默认属性值，分别表示flex-direction和flex-wrap属性。

（5） justify-content（主轴方向内容对齐方式）；

flex-srart（默认）：与主轴起始方向对齐；flex-end：向主轴终点方向对齐。

center：向主轴中点方向对齐。

space-between：起始位置向主轴起始方向对齐，终点位置向主轴终点方向对齐，其余位置向主轴中点方向对齐。

space-around：与space-between类似，只是起始位置和终点位置保留一半空白。

（6） align-content（多个主轴沿侧轴方向的内容堆栈对齐方式）

flex-start：多个主轴沿侧轴起始方向对齐；flex-end：多个主轴沿侧轴终点方向对齐。

center：多个主轴沿侧轴中点方向对齐；space-between：第一个主轴沿主轴起始方向对齐，末尾主轴沿主轴终点方向对齐，其他主轴均匀分布对齐。

space-around：与space-between类似，只是侧轴起始位置和侧轴终点位置保留一半空白；stretch（默认）：伸缩多个主轴，保持侧轴方向统一距离。

（7） align-items（侧轴方向的内容对齐方式）

flex-srart：与侧轴起始方向对齐；flex-end：向侧轴终点方向对齐。

center：向侧轴中点方向对齐；baseline：在侧轴上保持基线对齐，以第一个项目的基线为准。

stretch（默认）：在侧轴方向拉伸每个项目，使每个项目保持相同的起始位置和终点位置。

（8）项目属性 order(排序，项目按照order值从小到大排列)

flex-grow(空白空间分配比例) flex-shrink(项目空间的分配比例)

14、BFC

block-level box:display属性为 block, list-item, table的元素，会生成 block-levelbox。并且参与 blockfomatting context；

inline-level box:display属性为 inline, inline-block, inline-table的元素，会生成inline-level box。并且参与inline formatting context；

BFC(Blockformatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-levelbox参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。在页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

BFC布局规则：

内部的Box会在垂直方向，一个接一个地放置。

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

每个元素的margin box的左边，与包含块borderbox的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

BFC的区域不会与float box重叠。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

计算BFC的高度时，浮动元素也参与计算

哪些元素会生成BFC：

根元素

float属性不为none

position为absolute或fixed

display为inline-block, table-cell, table-caption, flex, inline-flex

overflow不为visible

应用：自适应的两栏布局，清除内部浮动，防止margin重叠

 
  <!DOCTYPE html> 
 
  <html> 
 
  <head> 
 
  <meta charset="UTF-8"> 
 
  <title></title> 
 
  <style type="text/css"> 
 
  #box{overflow: auto;width: 100%;} 
 
  #up{width: 100%;height:auto;background: #333;float: left;}/*float不为none的时候*/ 
 
  #s_box_up{width: 50px;height: 50px;background: blue;margin-bottom: 50px;} 
 
  #down{width: 100%;height: auto;background: #666;float: left;}/*float不为none的时候*/ 
 
  #s_box_down{width: 50px;height: 50px;background: green;margin-top: 100px;} 
 
  </style> 
 
  </head> 
 
  <body> 
 
  <div id="box"> 
 
  <div id="up"> 
 
  <div id="s_box_up"> 
 
  </div> 
 
  </div> 
 
  <div id="down"> 
 
  <div id="s_box_down"> 
 
  </div> 
 
  </div> 
 
  </div> 
 
  </body> 
 
  </html>

15、src与href的区别

href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

16、什么是CSSHack?

一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。

IE浏览器Hack一般又分为三种，条件Hack、属性级Hack、选择符Hack

// 1、条件Hack

<!--[if IE]>

<style>

.test{color:red;}

</style>

<![endif]-->

// 2、属性Hack

.test{

color:#090\9; /*For IE8+ */

*color:#f00; /* For IE7 andearlier */

_color:#ff0; /* For IE6 andearlier */

}

// 3、选择符Hack

* html.test{color:#090;} /* For IE6 and earlier*/

* + html.test{color:#ff0;} /* For IE7 */

17、一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

图片懒加载：在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。

如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。

如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。

如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。

如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

18、简述readonly与disabled的区别

1、Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，

2、但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去（readonly接受值更改可以回传，disable接受改但不回传数据）。

19、css有个content属性吗？有什么作用？有什么应用？

css的content属性专门应用在 before/after 伪元素上，用来插入生成内容。最常见的应用是利用伪类清除浮动。

//一种常见利用伪类清除浮动的代码

.clearfix:after {

content:".";//这里利用到了content属性

display:block;

height:0;

visibility:hidden;

clear:both; }

.clearfix { *zoom:1; }

after伪元素通过 content在元素的后面生成了内容为一个点的块级素，再利用clear:both清除浮动。

　那么问题继续还有，知道css计数器（序列数字字符自动递增）吗？如何通过css content属性实现css计数器？

css计数器是通过设置counter-reset、counter-increment两个属性、及counter()/counters()一个方法配合after / before 伪类实现。

20、标签上title与alt属性的区别是什么?

alt 当图片不显示是用文字代表。

title 为该属性提供信息

21、常用的布局，什么是响应式布局？

1. 固宽布局：各个模块是固定宽度

特点：设计简单，不会受到图片等固定宽度内容的影响。对比高分辨率的用户，固定宽度会留下很多空白，屏幕小出现滚动条。

2. 流动布局使用百分比的方式自适应不同的分辨率

特点：对用户友好，能够部分自适应用户的设置。网页周围的空白区域在所有分辨率和显示器下都是相同，视觉上美观。设计者需要进行不同的测试，准备不同的对应素材

3. 弹性布局使用em作为单位，em是相对单位，随用户字体大小变化而改变

特点：页面中所有元素可以随着用户的偏好缩放，需要花更多的事件测试，让布局适合所有的用户

4. 栅格化布局，也分为固定式栅格，流式栅格

在网页设计中，我们把宽度为“W”的页面分割成n个网格单元“a”，每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如下：W =（a*n）+（n-1）*I，由于a+i=A，因此可得：(A×n) – i = W。注：最左右边没有边距(margin-left,marign-right)。

特点：可以提高网页的规范性和可用性。在栅格系统下，页面模块的尺寸标准化。整个网站的各个页面布局一致，增加页面的相似度。

5. 响应式布局

允许页面宽度自动调整，利用媒体查询根据不同的宽度设置不同的样式，液态布局，自适应媒体（图片，视频）。

（1）运行页面宽度自动调整：在网页头部加入一张viewport元标签

<metaname=”viewport”content=”width=device-width,initial-scale=1.0”>

网页的宽度默认等于屏幕宽度，原始缩放比例是1，即网页初始大小占屏幕面积的100%

（2）利用媒体查询设置不同的样式

<linkrel=”stylesheet” type=”text/css” href=”site.css”media=”screen”/>

<linkrel=”stylesheet” type=”text/css”href=”print.css”media=”print”>

screen:使用于计算机彩色屏幕

print：使用与打印预览模式下查看的内容或打印机打印的内容