前端面试题汇总（一）

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不存在或格式不正确会导致文档以兼容模式呈现。
• 标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作

7、HTML5为什么只需要写 ？

• 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>

<meta charset="UTF-8">