【前端】前端面试题整理

文章转载自:http://www.pythonheidong.com/blog/article/981/

• 前端和计算机相关知识
  
  
  • 你能描述一下渐进增强和优雅降级之间的差异吗
    
  • 欣赏器兼容问题
    
  • 如何对网站的文件和资源进行优化?
    
  • 怎么学习前端?怎么接触前端新知识?
    
  • 关于前后端分离
    
  • 关于欣赏器内核(渲染引擎)
    
  • 欣赏器加载文件顺序以及repaint/reflow
    
  • 为什么使用多个域名来存储网络资源会更有效？
    
  • 进程和线程的区别
    
  • 前端开发的优化问题
    
  • Flash，Ajax各自的优缺点，使用中如何取舍？
    
  
  
• CSS
  
  
  • CSS3
    
  • css居中的方式
    
  • 请写一个简单的幻灯效果页面
    
  • 什么是无样式内容闪烁?如何避免?
    
  • display:none和visibility:hidden的区别
    
  • 解释浮动和工作原理
    
  • 清除浮动
    
  • 解释CSS Sprits,以及你要如何使用?
    
  • 你最喜好的图片替换方法是什么?你将如何使用?
    
  • 讨论CSS hacks, 条件引用或其他
    
  • 如何为有功能限制的欣赏器提供网页
    
  • 在书写高效CSS时会有哪些问题需要考虑?
    
  • 如何优化网页的打印样式?
    
  • 描述下你曾经使用过的CSS 预处理的优缺点
    
  • 假如设计中使用了非标准的字体, 你将如何实现?
    
  • 解释下欣赏器是如何判断元素是否匹配某个 CSS 选择器？
    
  • 解释一下你对盒模型的理解，以及如何在 CSS 中告诉欣赏器使用差异的盒模型来渲染你的布局。
    
  • 伪类的用法：
    
  • 描述下"reset"css文件的作用和使用它的好处
    
  • 请解释一下 * { box-sizing: border-box; } 的作用, 并且说明使用它有什么好处？
    
  • block, inline和inline-block的区别
    
  • css动画和js动画的优缺点
    
  • 你用过媒体查询，或针对移动端的布局/CSS 吗？
    
  • 有哪些隐蔽内容的方法(同时还要保证屏幕阅读器可用)
    
  • CSS选择器级别
    
  • alt和title的区别
    
  • 知道bfc吗?
    
  • 行内元素，块级元素，空元素各有哪些？
    
  
  
• html
  
  
  • h5的改进:
    
  • 什么是语义化的html?
    
  • 从前端角度出发谈谈做好seo应该留意什么?
    
  • 文档类型(DOCTYPE)
    
  • 使用XHTML的局限有哪些?
    
  • 假如网页内容需要多语言,要怎么做?
    
  • data-*属性的作用
    
  • 假如把 HTML5 看作做一个开放平台，那它的构建模块有哪些？
    
  • 请描述一下 cookies，sessionStorage 和 localStorage 的区别？
    
  • 欣赏器本地存储与服务器端存储之间的区别
    
  • sessionStorage和页面js数据对象的区别
    
  • canvas和svg的区别?
    
  • href和src的区别
    
  
  
• js
  
  
  
  • ajax, 跨域, jsonp
    
  • apply和call的用法和区别:
    
  • bind函数的兼容性
    
  • 解释下事件代理
    
  • 解释下js中this是怎么工作的?
    
  • 继承
    
  • AMD vs. CommonJS？
    
  • 什么是哈希表?
    
  • 什么是闭包? 闭包有什么作用?
    
  • 伪数组:
    
  • undefined和null的区别, 还有undeclared:
    
  • 事件冒泡机制:　　
    
  • 解释下为什么接下来这段代码不是 IIFE(立即调用的函数表达式)：function foo(){ }();?
    
  • "attribute" 和 "property" 的区别是什么？
    
  • 请指出 document load 和 document ready 两个事件的区别。
    
  • 什么是use strict? 其好处坏处分别是什么?
    
  • 欣赏器端的js包括哪几个部分?
    
  • DOM包括哪些对象?
    
  • js有哪些基本类型?
    
  • 基本类型与引用类型有什么区别?
    
  • 关于js的垃圾收集例程
    
  • ES5中, 除了函数,什么能够产生作用域?
    
  • js有几种函数调用方式?
    
  • 描述事件模型?IE的事件模型是怎样的？事件代理是什么？事件代理中怎么定位实际事件产生的目标？
    
  • js动画有哪些实现方法?
    
  • 还有什么实现动画的方法?
    
  • 面向对象有哪几个特点?
    
  • 如何判断属性来自自身对象还是原型链?
    
  • ES6新特性
    
  • 如何获取某个DOM节点，节点遍历方式
    
  • 用LESS如何给某些属性加欣赏器前缀？
    
  • js异步模式如何实现？
    
  • 事件机制，如何绑定事件处理函数
    
  • 图片预加载
    
  • 假如在同一个元素上绑定了两个click事件, 一个在捕获阶段执行, 一个在冒泡阶段执行. 那么当触发click条件时, 会执行几个事件? 执行顺序是什么?
    
  • js中怎么实现块级作用域?
    
  • 构造函数里定义function和使用prototype.func的区别？
    
  • js实现对象的深克隆
    
  
  
• jquery问题
  
• 一些编程题
  
  
  
  • 匿名函数变量
    
  • this指向
    
  • 定时
    
  • 点击一个ul的五个li元素，分别弹出他们的序号，怎么做？
    
  
  
• js算法题
  
  
  
  • js实现数组去重怎么实现?
    
  • 
    
  
  

一、前端编程

1. 你能描述一下渐进增强和优雅降级之间的差异吗?

答:

• 定义:
  
  
  
  • 优雅降级（graceful degradation): 一开始就构建站点的完整功能，然后针对欣赏器测试和修复
    
  • 渐进增强（progressive enhancement): 一开始只构建站点的最少特性，然后不断针对各欣赏器追加功能。
    
  
  
• 都关注于同一网站在差异设备里差异欣赏器下的表现程度
  
• 区别:
  
  
  
  • “优雅降级”观点认为应该针对那些最高级、最美满的欣赏器来设计网站. 而将那些被认为“过时”或有功能缺失的欣赏器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流欣赏器（如 IE、Mozilla 等）的前一个版本。
    
  • “渐进增强”观点则认为应关注于内容本身。请留意其中的差异：我甚至连“欣赏器”三个字都没提。
    
  
  
• 理解:
  
  
  
  • "优雅降级"就是首先完整地实现整个网站,包括其中的功能和效果. 然后再为那些无法支持所有功能的欣赏器增加候选方案, 使之在旧式欣赏器上以某种形式降级体验却不至于完全失效.
    
  • "渐进增强"则是从欣赏器支持的基本功能开始, 首先为所有设备准备好清晰且语义化的html及完整内容, 然后再以无侵入的方法向页面增加无害于基础欣赏器的额外样式和功能. 当欣赏器升级时, 它们会自动呈现并发挥作用.
    
  
  

　　参考自: 渐进增强、优雅降级  渐进增强和优雅降级
2. 欣赏器兼容问题:

• 问题1   差异欣赏器的标签默认的外补丁和内补丁差异.
  
  
  
  • 即随便写几个标签, 在不加样式控制的情况下, 各自的margin和padding差异较大.
    
  • 解决方法: CCS里:   *{margin:0; padding:0}
    
  
  
• 问题2   块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大　　
  
  
  
  • 会使得ie6后面的一块被顶到下一行.
    
  • 解决方案: 在float的标签样式中加入 display: inline; 将其转化为行内属性
    
  
  
• 问题3  设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
  
  
  
  • IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度
    
  • 解决方案: 给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度
    
  • 原因: ie8之前的欣赏器都会给标签一个最小默认的行高的高度. 即使标签是空的,这个标签的高度还是会达到默认的行高.
    
  
  
• 问题4  行内属性标签，设置display:block后接纳float布局，又有横行的margin的情况，IE6间距bug
  
  
  
  • 解决: 在display:block;后面加入display:inline;display:table;
    
  
  
• 问题5  图片默认有间距
  
  
  
  • 几个img标签放在一起的时候，有些欣赏器会有默认的间距，加了问题一中提到的通配符也不起作用。
    
  • 解决: 使用float属性为img布局
    
  
  
• 问题6  标签最低高度设置min-height不兼容
  
  
  
  • 因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个欣赏器兼容
    
  • 假如我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
    
  
  
• 问题7  透明度的兼容CSS设置
  
  
  
  • 使用hacker
    
    
    
    • IE6认识的hacker是下划线_和*
      
    • IE7,遨游认识的hacker是*
      
    
    
  
  
• 问题8 IE ol的序号全为1, 不递增
  
  
  
  • 解决: li设置样式{display: list-item}
    
  问题9
  

ie6,7不支持display:inline-block

• 解决方法: 设置inline并触法haslayout
  
• display:inline-block; *display:inline; *zoom:1
  

　　参考自: 常见欣赏器兼容性问题与解决方案　　
3. 如何对网站的文件和资源进行优化?

答:

• 文件合并（同上题“假若你有5个差异的 CSS 文件, 加载进页面的最好方式是？”）
  
  
  
  • 减少调用其他页面、文件的数量。一般我们为了让页面生动活泼会大量使用background来加载背景图，而每个 background的图像都会产生1次HTTP请求，要改善这个状况，可以接纳css的1个有效的background-position属 性来加载背景图，我们将需要频繁加载的多个图片合成为1个单独的图片，需要加载时可以接纳：background:url(....) no-repeat x-offset y-offset;的形式加载即可将这部分图片加载的HTTP请求缩减为1个。
    
  • 每个http请求都会产生一次从你的欣赏器到服务器端网络往返过程，并且导致推迟到达服务器端和返回欣赏器端的时间，我们称之为延迟。
    
  
  

• 文件最小化/文件压缩
  
  
  
  • 即将需要传输的内容压缩后传输到客户端再解压，这样在网络上传输的 数据量就会大幅减小。通常在服务器上的Apache、Nginx可以直接开启这个设置，也可以从代码角度直接设置传输文件头，增加gzip的设置，也可以 从 负载平衡设备直接设置。不过需要留意的是，这个设置会略微增加服务器的负担。建议服务器性能不是很好的网站，要慎重考虑。
    
  • js和css文件在百度上搜一个压缩网站就能压缩，但是在实际开发的项目中，使用gulp、webpack等工具可以打包出合并压缩后的文件，小图片可以在打包时转换成base64方式引入，大图片可以被压缩，html文件也是可以被压缩的
    
  
  

• 使用 CDN 托管
  
  
  
  • CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速率和稳固性的瓶颈和环节，使内容传输的更快、更稳固。其目标是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速率。
    
  
  

• 缓存的使用
  
  
  
  • Ajax调用都接纳缓存调用方式，一般接纳附加特征参数方式实现，留意其中的[/code]
    
  
  

11. 如何为有功能限制的欣赏器提供网页?

答: 功能限制的欣赏器, 好比低版本IE, 手机欣赏器, 等会在很多功能上不符合Web标准, 而应对方式主要有:

• 只提供符合Web标准的页面
  
• 提供另一个符合那些欣赏器标准的页面
  
• 兼容: 两种思路:
  
  
  
  • 渐进增强: 提供一个可用的原型，后来再为高级欣赏器提供优化
    
  • 优雅降级: 据高级欣赏器提供一个版本，然后有功能限制的欣赏器只需要一个刚好能用的版本
    
  
  
• 相关技能:
  
  
  
  • Media Query
    
  • CSS hack
    
  • 条件判断除IE外都可识别
    
  
  

　　参考自: 如何为有功能限制的欣赏器提供网页
12. 在书写高效 CSS 时会有哪些问题需要考虑?

答:
　　　　1）reset。参照下题“描述下 “reset” CSS 文件的作用和使用它的好处”的答案。
　　　　2）规范命名。尤其对于没有语义化的html标签，例如div，所赋予的class值要特别留意。
　　　　2）抽取可重用的部件，留意层叠样式表的“优先级”。
13. 如何优化网页的打印样式?

　　针对打印机的样式: @media print{...}
　　参考:如何优化网页的打印样式？  移动端H5知识普及 - CSS3媒体查询
14. 描述下你曾经使用过的 CSS 预处理的优缺点

答: 优点:

• 结构清晰, 便于扩展
  
• 可以方便屏幕欣赏器私有语法差异
  
• 可以轻松实现多重继承
  
• 完全兼容css代码
  

　　参考: 再谈 CSS 预处理器
　　　　  less学习笔记
15. 假如设计中使用了非标准的字体，你该如何去实现？

• 图片替代
  
• web : fonts在线字库
  
• @font-face
  

　　参考: 假如设计中使用了非标准的字体，你该如何去实现？
16. 解释下欣赏器是如何判断元素是否匹配某个 CSS 选择器？

作者：张靖超链接：https://www.zhihu.com/question/24959507/answer/29672263来源：知乎著作权归作者所有，转载请联系作者获得授权。

　　从后往前判断。
　　欣赏器先产生一个元素集合，这个集合往往由最后一个部分的索引产生（假如没有索引就是所有元素的集合）。然后向上匹配，假如不符合上一个部分，就把元素从集合中删除，直到真个选择器都匹配完，还在集合中的元素就匹配这个选择器了。
　　举个例子，有选择器：

1. 　　body.ready #wrapper > .lol233

复制代码

　　先把所有 class 中有 lol233 的元素拿出来组成一个集合，然后上一层，对每一个集合中的元素，假如元素的 parent id 不为 #wrapper 则把元素从集合中删去。 再向上，从这个元素的父元素开始向上找，没有找到一个 tagName 为 body 且 class 中有 ready 的元素，就把原来的元素从集合中删去。
　　至此这个选择器匹配结束，所有还在集合中的元素满足。
　　大体就是这样，不过欣赏器还会有一些奇怪的优化。
　　为什么从后往前匹配因为效率和文档流的解析方向。效率不必说，找元素的父亲和之前的兄弟比遍历所哟儿子快而且方便。关于文档流的解析方向，是因为如今的 CSS，一个元素只要确定了这个元素在文档流之前出现过的所有元素，就能确定他的匹配情况。应用在即使 html 没有载入完成，欣赏器也能根据已经载入的这一部分信息完全确定出现过的元素的属性。
　　为什么是用集合主要也还是效率。基于 CSS Rule 数量远远小于元素数量的假设和索引的运用，遍历每一条 CSS Rule 通过集合筛选，比遍历每一个元素再遍历每一条 Rule 匹配要快得多。17. 解释一下你对盒模型的理解，以及如何在 CSS 中告诉欣赏器使用差异的盒模型来渲染你的布局。

答:
　　盒模型：文档中的每个元素被描绘为矩形盒子，渲染引擎的目标就是判定大小，属性——好比它的颜色、背景、边框方面——及这些盒子的位置。
　　在CSS中，这些矩形盒子用标准盒模型来描述。这个模型描述了一个元素所占用的空间。每一个盒子有四条边界：外边距边界margin edge，边框边界border edge，内边距边界padding edge和内容边界content edge。
　　内容区域是真正包含元素内容的区域，位于内容边界的内部，它的大小为内容宽度或content-box宽及内容高度或content-box高。假如box-sizing为默认值，width、min-width、max-width、height、min-height和max-height控制内容大小。
　　内边距区域padding area用内容可能的边框之间的空白区域扩展内容区域。通常有背景——颜色或图片（不透明图片盖住背景颜色）。
　　边框区域扩展了内边距区域。它位于边框边界内部，大小为border-box宽和border-box高。
　　外边距区域margin area用空白区域扩展边框区域，以分开相邻的元素。它的大小为margin-box的高宽。
　　在外边距合并的情况下，由于盒之间共享外边距，外边距不容易弄清楚。
　　对于非替换的行内元素来说，尽管内容周围存在内边距与边框，但其占用空间（行高）由line-height属性决定。

　　盒子模型分为两类：W3C标准盒子模型和IE盒子模型 （微软确实不喜好服从他家的标准）
　　这两者的关键差异就在于：

• 
  
  
  
  • W3C盒子模型——属性高（height）和属性宽（width）这两个值不包含 添补（padding）和边框（border　　）
    
  • IE盒子模型——属性高（height）和属性宽（width）这两个值包含 添补（padding）和边框（border）
    
  
  

　　我们在编写页面代码的时候应该尽量使用标准的W3C盒子模型（需要在页面中声明DOCTYPE类型）。
　　各欣赏器盒模型的组成结构是一致的，区别只是在"怪异模式"下宽度和高度的计算方式，而“标准模式”下则没有区别。组成结构以宽度为例：总宽度=marginLeft+borderLeft+paddingLeft+contentWidth+paddingRight+borderRight+marginRight（W3C标准盒子模型）。页面在“怪异模式”下，css中为元素的width和height设置的值在标准欣赏器和ie系列(ie9除外)里的代表的含义是差异的（IE盒子模型）。
   　因而解决兼容型为题最简洁和值得保举的方式是：下述的第一条。

• 将页面设为“标准模式”。添加对应的dtd标识
  
• 使用hack或者在外面套上一层wrapper
  

　　参考: 解释一下你对盒模型的理解，以及如何在 CSS 中告诉欣赏器使用差异的盒模型来渲染你的布局。
　　　　　MSDN：盒模型
18. 伪类的用法：

　　参考：CSS中伪类及伪元素用法详解
19. 描述下"reset"css文件的作用和使用它的好处

　　reset.css能够重置欣赏器的默认属性。差异的欣赏器具有差异的样式，重置能够使其统一。好比说ie欣赏器和FF欣赏器下button显示差异，通过reset能够统一样式，显示相同的效果。但是很多reset是没必要的，多写了会增加欣赏器在渲染页面的负担。
　　好比说，
　　　　1）我们不应该对行内元素设置无效的属性，对span设置width和height，margin都不会生效的。
　　　　2）对于absolute和fixed定位的固定尺寸（设置了width和height属性），假如设置了top和left属性，那么bottom和right，margin和float就没有作用。
　　　　3）后面设置的属性将会覆盖前面重复设置的属性。

• 期待能够指出它的负面影响，或者提到它的一个更好的替换者"normalize"   normalize.css是一个可以定制的css文件，它让差异的欣赏器在渲染元素时形式更统一。
  

20. 请解释一下 * { box-sizing: border-box; } 的作用, 并且说明使用它有什么好处？

　　说到 IE 的 bug，在 IE6以前的版本中，IE对盒模型的解析出现一些问题，跟其它欣赏器差异，将 border 与 padding 都包含在 width 之内。而另外一些欣赏器则与它相反，是不包括border和padding的。对于IE欣赏器，当我们设置 box-sizing: content-box; 时，欣赏器对盒模型的解释遵从我们之前认识到的 W3C 标准，当它定义width和height时，它的宽度不包括border和padding；对于非IE欣赏器，当我们设置box-sizing: border-box; 时，欣赏器对盒模型的解释与 IE6之前的版本相同，当它定义width和height时，border和padding则是被包含在宽高之内的。内容的宽和高可以通过定义的“width”和 “height”减去相应方向的“padding”和“border”的宽度得到。内容的宽和高必须保证不能为负，必要时将自动增大该元素border box的尺寸以使其内容的宽或高最小为0。
　　使用 * { box-sizing: border-box; }能够统一IE和非IE欣赏器之间的差异。
21. block, inline和inline-block的区别

答:

• 起新行
  
  
  
  • block元素会独占一行, 多个block元素会各自新起一行. 默认情况下, block元素宽度自动填满其父元素宽度
    
  • inline元素不会独占一行, 多个相邻的行内元素会排列在同一行里, 直到一行排列不下, 才会新换一行, 其宽度随元素的内容而变化
    
  
  
• 设置宽高
  
  
  
  • block元素可以设置width, height属性. 块级元素即使设置了宽度, 仍旧独占一行
    
  • inline元素设置width, height无效
    
  
  
• 内外边距
  
  
  
  • block元素可以设置margin和padding属性
    
  • inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都会产生边距效果. 但是数值方向的 margin/padding-top/bottom不会产生边距效果
    
  
  
• 包含
  
  
  
  • block可以包含inline和block元素,而inline元只能包含inline元素
    
  
  
• 而display: inline-block, 则是将对象呈现为inline对象, 但是对象的内容作为block对象呈现. 之后的内联对象会被排列到一行内. 好比我们可以给一个link(a元素)inline-block的属性, 使其既有block的高宽特性又有inline的同行特性
  

22. css动画和js动画的优缺点

　　CSS3的动画

• 优点：
  
  
  
  • 1.在性能上会轻微好一些，欣赏器会对CSS3的动画做一些优化（好比专门新建一个图层用来跑动画）
    
  • 2.代码相对简单
    
  
  
• 缺点：
  
  
  
  • 1.在动画控制上不够灵活
    
  • 2.兼容性不好
    
  • 3.部分动画功能无法实现（如滚动动画，视差滚动等）
    
  
  

　　JavaScript的动画

• 优点：
  
  
  
  • 1.控制能力很强，可以单帧的控制、变换
    
  • 2.兼容性好，写得好完全可以兼容IE6，且功能强大。
    
  
  
• 缺点：
  
  
  
  • 计算没有css快，另外经常需要依靠其他的库。
    
  
  

　结论

• 所以，不复杂的动画完全可以用css实现，复杂一些的，或者需要交互的时候，用js会靠谱一些~
  

23. 你用过媒体查询，或针对移动端的布局/CSS 吗？

答:
　　通过媒体查询可以为差异大小和尺寸的媒体定义差异的css，适合相应的设备显示；即响应式布局

• @media screen and (min-width: 400px) and (max-width: 700px) { … }
  
• @media handheld and (min-width: 20em), screen and (min-width: 20em) { … }
  

　　参考自: CSS3媒体查询  使用 CSS 媒体查询创建响应式网站  《响应式Web设计实践》学习笔记
24. 有哪些隐蔽内容的方法(同时还要保证屏幕阅读器可用)

答：
　　display:none或者visibility:hidden，overflow:hidden。

• 1.display:none;的缺陷
  
  
  
  • 搜索引擎可能认为被隐蔽的笔墨属于垃圾信息而被忽略
    
  • 屏幕阅读器（是为视觉上有停滞的人设计的读取屏幕内容的程序）会忽略被隐蔽的笔墨。
    
  
  
• 2.visibility: hidden ;的缺陷
  
  
  
  • 隐蔽的内容会占据他所应该占据物理空间
    
  
  
• 3.overflow:hidden;一个比较合理的方法
  
  
  
  • 例：.texthidden { display:block; overflow: hidden; width: 0; height: 0; }
    
    
    
    • 将宽度和高度设定为0，然后超过部分隐蔽，就会弥补上述一、二方法中的缺陷，也达到了隐蔽内容的目标
      
    
    
  
  

25. CSS选择器级别

• 1.假如样式是行内样式（通过Style=””定义），那么a=1
  
• 2.b为ID选择器的总数
  
• 3.c为Class类选择器的数量。
  
• 4.d为类型选择器的数量
  
• 5.属性选择器，伪类选择器和class类选择器优先级一样，伪元素选择器和类型选择器一样
  
  
• 6.!important 权重最高，比 inline style 还要高。
  

　　一般来讲，越详细的级别越高。CSS优先级包含四个级别（文内选择符，ID选择符，Class选择符，元素选择符）以及各级别出现的次数。根据这四个级别出现的次数计算得到CSS的优先级
　　参考： CSS样式选择器优先级
26. img设置属性title和alt的区别?

答:

• Alt是img的特有属性, 或与配合使用，规定图像的替代文本. 假如无法显示图像, 欣赏器将显示替代文本. 用于图片无法加载显示、读屏器阅读图片，可提高图片可 访问性，搜索引擎会重点分析。最长可包含1024个字符,
  
• Title为元素提供附加的提示信息，用于鼠标滑到元素上的时候显示。其值可以比alt属性值设置的更长, 但是有些欣赏器会截断过长的笔墨.
  

　　
27. 知道BFC吗?

答: BFC指的是Block Formatting Context, 它提供了一个环境, html元素在这个环境中按照一定规则进行布局. 一个环境中的元素不会影响到其他环境中的布局. 决定了元素如何对其内容进行定位, 以及和其他元素的关系和相互作用.
　　其中: FC(Formatting Context): 指的是页面中的一个渲染区域, 并且拥有一套渲染规则, 它决定了其子元素如何定位, 以及与其他元素的相互关系和作用.
　　BFC: 块级格式化上下文, 指的是一个独立的块级渲染区域, 只有block-level box参与, 该区域拥有一套渲染规则来约束块级盒子的布局, 且与区域外部无关.

• BFC的生成:
  
  
  
  • 根元素
    
  • float的值不为none
    
  • overflow的值不为visible
    
  • display的值为 inline-block, table-cell, table-caption
    
  • position的值为absolute或fixed
    
  
  
• BFC的约束规则
  
  
  
  • 生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。
    
  • 生成BFC元素的子元素中，每一个子元素做外边距与包含块的左边界相接触，（对于从右到左的格式化，右外边距接触右边界），即使浮动元素也是如此（尽管子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。
    
  • 分解:
    
  • 
    
    • 内部的Box会在垂直方向上一个接一个的放置
      
    • 垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关。）
      
    • 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
      
    • BFC的区域不会与float的元素区域重叠
      
    • 计算BFC的高度时，浮动子元素也参与计算
      
    • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然
      
    
    
  
  
• BFC在布局中的应用
  
  
  
  • 不和浮动元素重叠:
    
    
    
    • 假如一个浮动元素后面跟着一个非浮动元素, 就会产生覆盖
      
    
    
  • 防止margin重叠:
    
    
    
    • 同一个BFC中的两个相邻Box才会发生重叠与方向无关，不过由于上文提到的第一条限制，我们甚少看到水平方向的margin重叠。这在IE中是个例外，IE可以设置write-mode
      
    
    
  • 解决浮动相关问题
    
    
    
    • 父元素: overflow:hidden    IE: zoom:1(hasLayout)
      
    • 根本原因在于创建BFC的元素，子浮动元素也会参与其高度计算，即不会产生高度塌陷问题。实际上只要让父元素生成BFC即可，并不只有这两种方式。
      
    
    
  • 多栏布局
    
    
    
    • 好比左右两栏宽度固定, 中间栏自适应 则中间栏设置 overflow:hidden生成BFC
      
    
    
  
  
• IE中类似概念: hasLayout
  

　　参考: 我对BFC的理解   CSS BFC和IE Haslayout介绍
28. 行内元素有哪些？块级元素有哪些？空元素有哪些？

答：

• 行内元素有：span img input select strong
  
• 块级元素有：div ul ol dl dt dd h1 h2 h3 h4 p...
  
• 常见的空元素：br hr img input link meta  base area command embed keygen param source track wbr....
  

三、html

1. h5的改进:

• 新元素
  
  
  
  • 画布canvas: HTML5  元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成
    
  • 音频audio
    
  • 视频video
    
  • 语义性: article,  nav ,  footer, section, aside, hgroup等.
    
  • 时间time
    
  
  
• 新属性
  
  
  
  • 拖放: draggable   
    <img draggable="true">
    
    
  • 可编辑: contenteditable
    
  
  
• 新事件
  
  
  
  • 拖放 ondrag ondrop
    
  • 关闭页面 onunload
    
  • 窗口大小改变 onresize
    
  
  
• 取消了一些元素: font center等
  
• 新的DOCTYPE声明
  
• 完全支持CSS3
  
• Video和Audio
  
• 2D/3D制图
  
• 本地存储
  
• 本地SQL数据
  
• Web应用
  

　　参考自: 猿教程
2. 什么是语义化的html?

答:

• what?
  
  
  
  • 根据内容的结构（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让欣赏器的爬虫和机器很好地解析。
    
  
  
• why?
  
  
  
  • 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
    
  • 用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
    
  • 有利于SEO：和搜索引擎创建良好沟通，有助于爬虫抓取更多的有效信息：爬虫依靠于标签来确定上下文和各个关键字的权重
    
  • 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
    
  • 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
    
  
  
• how?
  
  
  
  • 尽可能少的使用无语义的标签div和span；
    
  • 在语义不显着时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
    
  • 不要使用纯样式标签，如：b、font、u等，改用css设置。
    
  • 需要强调的文本，可以包含在strong或者em标签中（欣赏器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
    
  • 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
    
  • 表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
    
  • 每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。
    
  
  

　　参考自: 理解HTML语义化

3. 从前端角度出发谈谈做好seo需要考虑什么?

答:

• 语义化html标签
  
• 合理的title, description, keywords;
  
• 重要的html代码放前面
  
• 少用iframe, 搜索引擎不会抓取iframe中的内容
  
• 图片加上alt
  

4. 文档类型(DOCTYPE)

答:

• 作用: doctype声明位于文档中最前面的位置，处于标签之前，告知欣赏器使用的是哪种规范。
  
• 类型: 三种: Strict、Transitional 以及 Frameset
  
• 假如不声明: 不写doctype，欣赏器会进入quirks mode （混杂模式）。即，假如不声明doctype，欣赏器不引入w3c的标准，那么早期的欣赏器会按照自己的解析方式渲染页面。欣赏器接纳自身方式解析页面的行为称为"quirks mode（混杂模式也称怪异模式）"；接纳w3c方式解析就是"strict mode（标准模式）"。 假如完全接纳strictmode就不会出任何的差错，但这样会降低程序的容错率，加重开发人员的难度
  
• 用哪种:
  
  
  
  • 没有doctype声明的接纳quirks mode解析
    
  • 对于有doctype的大多数接纳standard mord。
    
  • 特殊情况：
    
    
    
    • 对于那些欣赏器不能识别的doctype ,欣赏器接纳quirks mode；
      
    • 没有声明DTD或者html版本声明低于4.0接纳quirks mode，其他使用standard mode；
      
    • ie6中，假如在doctype声明前有一个xml声明(好比:)，则接纳quirks mode解析
      
    
    
  
  
• 标准模式与怪异模式的区别:
  
  
  
  • 标准模式：欣赏器根据规范呈现页面
    
  • 混杂模式（怪异模式）：页面以一种比较宽松的兼容方式显示。
    
  • 他们最大的差异是对盒模型的解析。
    
    
    
    • 在strict mode中 ：width是内容宽度 ，也就是说,元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width +  margin-right;
      
    • 在quirks mode中 ：width则是元素的实际宽度 ，内容宽度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + 　border-right-width)
      
    
    
  
  

5. 使用XHTML的局限有哪些?

　　答：

• XHTML较为严格，标签必须闭合，必须要body，head等
  
• 假如页面使用 'application/xhtml+xml' 一些老的欣赏器并不兼容
  

6. 假如网页内容需要多语言,要怎么做?

　　答: 接纳统一编码utf-8模式
[code]