web前端面试题

这几天在准备面试了，开始刷面试题

https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions/Questions-and-Answers

1.行内元素，块级元素和空元素。

   行内元素：1.可以在排列在同一行。 
            2.设置宽高和内外边距对它都没有效果。
            常见：img、span、a、input、select。em、i、small....

   块级元素：1.总是排列在新行，独占一行。
            2.块级元素可以包含行内元素和块级元素。
            常见：div、p、h1-6、ul、li、ol、table、tbody、tr、td、form...

   转换：display：block

   空元素：br、hr、img、link、meta...
         area/base/col/command/embed....

   注意：img、input属于行内替换元素.height/width/padding/margin均可用，这些元素往往没有实际的内容,即是一个空元素

2.列举不同的清除浮动的技巧，并指出它们各自适用的使用场景

1.clear:both;//添加新元素

2.overflow:hidden;//加在父级元素上

3.:after方法和:before方法.//作用于浮动元素的父级

3.HTML5 为什么只需要写 ？

HTMl5不基于SGML（标准通用标识语言），所以不需要对DTD引用（文档类型定义），但是需要doctype来规范浏览器的行为。

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

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

(1). link属于XHTML标签，除了加载css外，还可以定义RSS，定义rel连接属性，@import只能用于加载css
(2). 页面被加载时，link会同时被加载，@import会等页面加载完在加载。
(3). import是css2.1提出的，只在ie5以上才被识别，link是XHTML提出的，没有兼容性问题。

5.对浏览器内核的理解？

主要分为两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎

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

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

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

6.四大浏览器内核

1.Trident：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
  特点：这个引擎被设计成一个软件组件，使其他软件开发人员很容易将网页浏览功能添加到他们自行开发的应用程序里，它的缺点是其对真正的网页标准支持不是很好，存在许多bug。它也有一定的局限性，那就是它只能被应用于Windows平台。

2.Gecko：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
  特点：一套由自由型开放源代码、以c++编写的排版引擎，它原本由网景通讯公司开发，现在由Mozilla基金会维护，它也是最流行的排版引擎之一，流行程度仅次于Trident。它提供了一个丰富的应用程序接口以供互联网相关的应用程序使用，其缺点是消耗内存资源多。它不像Trident那样局限，它可以跨平台在Windows、Linux、MacOS上都可以使用。

3. Presto内核：Opera7及以上。      [Opera内核原为：Presto，现为：Blink;]
   特点：它是由Opera Software开发的网页浏览器排版引擎，它实际上是一个动态内核，它的特点是渲染速度的优化达到了极致，它是目前公认网页浏览速度最快的浏览器内核，而代价是牺牲了网页的兼容性。它的不足之处是它是一个商业引擎，在很大程度上限制了它的发展。它同样可以跨平台使用。

4. Webkit内核：Safari,Chrome等。   [ Chrome的：Blink（WebKit的分支）]
   特点：它是一个开放源代码的浏览器引擎，它是一种用来让网页浏览器绘制网页的排版引擎，被用于苹果的Safari。其优点是有清晰的源码结构，渲染速度快，缺点是兼容性不好。

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

html5的新特性：语义化的新标签，
             新表单元素，现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
             绘画 canvas;
             用于媒介回放的 video 和 audio 元素;
             本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
             sessionStorage 的数据在浏览器关闭后自动删除;
             新的技术webworker, websocket, Geolocation;
移除的元素：
      纯表现的元素：basefont，big，center，font, s，strike，tt，u;
      对可用性产生负面影响的元素：frame，frameset，noframes；
HTML5新标签的浏览器兼容问题：
      1.ie678支持用document.creatElement动态创建标签，创建后添加基础样式。
      2.使用html5shiv插件
区分 HTML 和 HTML5：DOCTYPE声明\新增的结构元素\功能元素

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

用正确的标签做正确的事，htnl语义化使页面内容结构更加清晰，拍于搜索引擎解析，即使没有css的样式也可以很好的表现出文档格式，便于阅读。

9.对BFC的理解

BFC:  块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level Box参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关

BFC的生成:
        既然上文提到BFC是一块渲染区域，那这块渲染区域到底在哪，它又是有多大，这些由生成BFC的元素决定，CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。
      float的值不为none；
      overflow的值不为visible；
      display的值为inline-block、table-cell、table-caption；
      position的值为absolute或fixed；

看到有人把display：table也认为可以生成BFC，其实这里的主要原因在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-cell生成了BFC。

浏览器对于BFC这块区域的约束规则如下：

    生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部，俩个相邻子元素之间垂直距离取决于元素margin特性。在BFC中相邻的块级元素外边距会折叠。
     生成BFC元素的子元素中，每一个子元素的外边距和包含块的左边界相接触，（对于从右到左的格式化，右外边距和右边界相接触），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）

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

触发：没有DOCTYPE'意味着触发怪异模式',依据旧式的CSS规则渲染网页。
     有DOCTYPE'意味着触发严格模式'，依据标准的CSS规则渲染网页。

css

1.盒模型

两种：w3c盒子模型、ie盒子模型

区别：ie盒子模型content部分把 border 和 padding计算了进去

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

    1.id选择器（ # myid）
    2.类选择器（.myclassname）
    3.标签选择器（div, h1, p）
    4.相邻选择器（h1 + p）
    5.子选择器（ul > li）
    6.后代选择器（li a）
    7.通配符选择器（ * ）
    8.属性选择器（a[rel = "external"]）
    9.伪类选择器（a:hover, li:nth-child）

  *   可继承的样式： font-size font-family color, UL LI DL DD DT;

  *   不可继承的样式：border padding margin width height ;

3.CSS优先级算法

  *   优先级就近原则，同权重情况下样式定义最近者为准;
  *   载入样式以最后载入的定位为准;

  优先级为:
    同权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
    !important >  id > class > tag
    important 比 内联优先级高
4个等级的定义如下：
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表类，伪类和属性选择器，如.content，权值为10。
第四等：代表类型选择器和伪元素选择器，如div p，权值为1。

4.如何居中div？

1.水平居中：给div设置一个宽度，然后添加margin:0 auto属性

 div{
    width:200px;
    margin:0 auto;
  }

2.让绝对定位的div居中

 div {
    position: absolute;
    width: 300px;
    height: 300px;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: pink; /* 方便看效果 */
 }

3.水平垂直居中一

 确定容器的宽高 宽500 高 300 的层
 设置层的外边距

 div {
    position: relative;     /* 相对定位或绝对定位均可 */
    width:500px;
    height:300px;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -250px;      /* 外边距为自身宽高的一半 */
    background-color: pink;     /* 方便看效果 */

  }

4.水平垂直居中二

 未知容器的宽高，利用 `transform` 属性

 div {
    position: absolute;     /* 相对定位或绝对定位均可 */
    width:500px;
    height:300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: pink;     /* 方便看效果 */

 }

5.水平垂直居中三

 利用 flex 布局
 实际使用时应考虑兼容性

 .container {
    display: flex;
    align-items: center;        /* 垂直居中 */
    justify-content: center;    /* 水平居中 */

 }
 .container div {
    width: 100px;
    height: 100px;
    background-color: pink;     /* 方便看效果 */
 }  

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

    block           块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
    none            缺省值。象行内元素类型一样显示。
    inline          行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
    inline-block  默认宽度为内容宽度，可以设置宽高，同行显示。
    list-item       象块类型元素一样显示，并添加样式列表标记。
    table           此元素会作为块级表格来显示。
    inherit         规定应该从父元素继承 display 属性的值。

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

    absolute
    生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。
    fixed （老IE不支持）
    生成绝对定位的元素，相对于浏览器窗口进行定位。
    relative
    生成相对定位的元素，相对于其正常位置进行定位。
    static
    默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。
    inherit
    规定从父元素继承 position 属性的值。

7.CSS3有哪些新特性？

新增各种CSS选择器  （: not(.input)：所有 class 不是“input”的节点）
圆角          （border-radius:8px）
多列布局        （multi-column layout）
阴影和反射   （Shadow\Reflect）
文字特效        （text-shadow、）
文字渲染        （Text-decoration）
线性渐变        （gradient）
旋转          （transform）
缩放,定位,倾斜,动画,多背景
例如:transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

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

  把上、左、右三条边隐藏掉（颜色设为 transparent）
  #demo {
    width: 0;
    height: 0;
    border-width: 20px;
    border-style: solid;
    border-color: transparent transparent red transparent;
  }

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

  简单的方式：
    上面的div宽100%，
    下面的两个div分别宽50%，
    然后用float或者inline使其不换行即可

10.css多列等高如何实现？

  利用padding-bottom|margin-bottom正负值相抵；
  设置父容器设置超出隐藏（overflow:hidden），这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，
  当它里面的任 一列高度增加了，则父容器的高度被撑到里面最高那列的高度，
  其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。
  [多列等高](http://www.cnblogs.com/2050/archive/2012/07/31/2616460.html)

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

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

  * 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

  * IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。

    浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}

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

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

    首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
    接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

    css
        .bb{
            background-color:red;/*所有识别*/
          background-color:#00deff\9; /*IE6、7、8识别*/
          +background-color:#a200ff;/*IE6、7识别*/
          _background-color:#1e0bd1;/*IE6识别*/
        }


  *  IE下,可以使用获取常规属性的方法来获取自定义属性,
     也可以使用getAttribute()获取自定义属性;
     Firefox下,只能使用getAttribute()获取自定义属性。
     解决方法:统一通过getAttribute()获取自定义属性。

  *  IE下,even对象有x,y属性,但是没有pageX,pageY属性;
     Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。

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

  *  Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
     可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

  超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了
  解决方法是改变CSS属性的排列顺序:
  L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

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

li之间的空格和换行会引起空白间隔，设置字符大小为0，就没有空格了

13.为什么要初始化CSS样式。

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

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

14.absolute的containing block(容器块)计算方式跟正常流有什么不同？

  无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：
  1、若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；
  2、否则,则由这个祖先元素的 padding box 构成。
  如果都找不到，则为 initial containing block。

  补充：
  1. static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分）
  2. absolute: 向上找最近的定位为absolute/relative的元素
  3. fixed: 它的containing block一律为根元素(html/body)，根元素也是initial containing block

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

如果元素的display为none,那么元素不被渲染,position,float不起作用,
如果元素拥有position:absolute;或者position:fixed;属性，那么元素将为绝对定位,float不起作用.
如果元素float属性不是none,元素会脱离文档流,根据float属性值来显示.有浮动,绝对定位,inline-block属性的元素,margin不会和垂直方向上的其他元素margin折叠.

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

对于普通元素visibility:collapse;会将元素完全隐藏,不占据页面布局空间,与display:none;表现相同. 
如果目标元素为table,visibility:collapse;将table隐藏,但是会占据页面布局空间. 
仅在Firefox下起作用,IE会显示元素,Chrome会将元素隐藏,但是占据空间.

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

（W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）
   一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。
   不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。

18.请解释一下为什么需要清除浮动？清除浮动的方式

清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示

  1、父级div定义height；不推荐使用，只建议高度固定的布局时使用 
  2、结尾处加空div标签 clear:both 
  3、父级div定义 伪类:after 和 zoom 
  4.父级div定义 overflow:hidden。不能和position配合使用，因为超出的尺寸的会被隐藏。 
  5.父级div定义 overflow:auto 。必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度 。内部宽高超过父级div时，会出现滚动条。 
  6.父级div 也一起浮动。所有代码一起浮动，就变成了一个整体 
  7.父级div定义 display:table 不推荐使用，只作了解。 
  8.结尾处加标签 clear:both 


  通过分析发现，除了clear：both用来闭合浮动的，其他代码无非都是为了隐藏掉content生成的内容，这也就是其他版本的闭合浮动为什么会有font-size：0，line-height：0。

19.什么是外边距合并？

  外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
  合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

20.zoom:1的清除浮动原理?

  Zoom属性是IE浏览器的专有属性，它可以设置或检索对象的缩放比例。解决ie下比较奇葩的bug。
  譬如外边距（margin）的重叠，浮动清除，触发ie的haslayout属性等。

  当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。

  Zoom属是IE浏览器的专有属性，火狐和老版本的webkit核心的浏览器都不支持这个属性。然而，zoom现在已经被逐步标准化，出现在 CSS 3.0 规范草案中。

  目前非ie由于不支持这个属性，它们又是通过什么属性来实现元素的缩放呢？
  可以通过css3里面的动画属性scale进行缩放。

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

  关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）；
  如果规则拥有 ID 选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）；
  提取项目的通用公有样式，增强可复用性，按模块编写组件；增强项目的协同开发性、可维护性和可扩展性;
  使用预处理工具或构建工具（gulp对css进行语法检查、自动补前缀、打包压缩、自动优雅降级）；

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

  margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。
  margin用于布局分开元素使元素与元素互不相干；
  padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段

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

  单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）

  双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法，
  比如:first-line、:first-letter、:before、:after等，
  而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。

  想让插入的内容出现在其它内容前，使用::before，否者，使用::after；
  在代码顺序上，::after生成的内容也比::before生成的内容靠后。
  如果按堆栈视角，::after生成的内容会在::before生成的内容之上

24.如果需要手动写动画，你认为最小时间间隔是多久，为什么？

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

25.display:inline-block 什么时候会显示间隙？(携程)
26.style标签写在body后与body前有什么区别？
27.什么是CSS 预处理器 / 后处理器？

  - 预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，
    还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。

  - 后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的
    是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

还要看弹性盒模型的知识