关于前端基本要求及一些题王孟俊

inline-table：指定对象作为内联元素级的表格。类同于html标签

table-caption：指定对象作为表格标题。类同于html标签

table-row-group：指定对象作为表格行组。类同于html标签

table-column：指定对象作为表格列。类同于html标签

table-column-group：指定对象作为表格列组显示。类同于html标签

table-header-group：指定对象作为表格标题组。类同于html标签

table-footer-group：指定对象作为表格脚注组。类同于html标签

inline-box：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）

flexbox：将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）

inline-flexbox：将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）

flex：将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）

inline-flex：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）

如何居中div,如何居中一个浮动元素

(1)、非浮动元素居中：可以设置margin:0auto令其居中,定位,父级元素text-algin:center等等

(2)、浮动元素居中:

方法一:设置当前div的宽度，然后设置margin-left:50%;position:relative;left:-250px;其中的left是宽度的一半。

方法二:父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对左移动-50%。

方法三:position定位等等。

CSS中link和@import的区别是？

(1)、link属于HTML标签，而@import是CSS提供的;

(2)、页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

(3)、import只在IE5以上才能识别，而link是HTML标签，无兼容问题;

(4)、link方式的样式的权重高于@import的权重.

请列举几种清除浮动的方法(至少两种)

(1)、父级div定义height

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

优点：简单、代码少、容易掌握

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

建议：不推荐使用，只建议高度固定的布局时使用

(2)、结尾处加空div标签clear:both

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度

优点：简单、代码少、浏览器支持好、不容易出现怪问题

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好

建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法

(3)、父级div定义伪类:after和zoom

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题

优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。

建议：推荐使用，建议定义公共类，以减少CSS代码。

(4)、父级div定义overflow:hidden

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

优点：简单、代码少、浏览器支持好

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

(5)、父级div定义overflow:auto

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度

缺点：内部宽高超过父级div时，会出现滚动条。

建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

block，inline和inlinke-block细节对比？

display:block

a、block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。

b、block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。

c、block元素可以设置margin和padding属性。

display:inline

a、inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。

b、inline元素设置width,height属性无效。

c、inline元素的margin和padding属性，水平方向的padding-left,padding-right,margin-left,margin-right都产生边距效果；但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom不会产生边距效果。

display:inline-block

a、简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

补充说明

a、一般我们会用display:block，display:inline或者display:inline-block来调整元素的布局级别，其实display的参数远远不止这三种，仅仅是比较常用而已。

b、IE（低版本IE）本来是不支持inline-block的，所以在IE中对内联元素使用display:inline-block，理论上IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表象。

什么叫优雅降级和渐进增强？

优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效.

渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。

说说浮动元素会引起的问题和你的解决办法

问题：

（1）父元素的高度无法被撑开，影响与父元素同级的元素

（2）与浮动元素同级的非浮动元素会跟随其后

（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

解决方法：

使用CSS中的clear:both;属性来清除元素的浮动可解决问题(2)、(3)，对于问题(1)，添加如下样式，给父元素添加clearfix样式：

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

.clearfix{display:inline-block;}/*forIE/Mac*/

清除浮动的几种方法：

(1)、额外标签法，（缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。）

(2)、使用after伪类

#parent:after{

content:"";

height:0;

visibility:hidden;

display:block;

clear:both;

}

(3)、浮动外部元素

(4)、设置`overflow`为`hidden`或者auto

你有哪些性能优化的方法？

（2）、前端模板JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

（3）、用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

（4）、当需要设置的样式很多时设置className而不是直接操作style。

（5）、少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

（6）、避免使用CSSExpression（css表达式)又称Dynamicproperties(动态属性)。

(1)、减少HTTP请求次数

(2)、使用CDN

(4)、为文件头指定Expires

(5)、使用gzip压缩内容

(6)、把CSS放到顶部

(7)、把JS放到底部

(8)、避免使用CSS表达式

(9)、将CSS和JS放到外部文件中

(10)、避免跳转

(11)、可缓存的AJAX

(12)、使用GET来完成AJAX请求

为什么要初始化CSS样式？

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

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

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

解释下浮动和它的工作原理？清除浮动的技巧？

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

(1)、使用空标签清除浮动。

这种方法是在所有浮动标签后面添加一个空标签定义cssclear:both.弊端就是增加了无意义标签。

(2)、使用overflow。

给包含浮动元素的父标签添加css属性overflow:auto;zoom:1;zoom:1用于兼容IE6。

(3)、使用after伪对象清除浮动。

该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；

谈谈你对CSS中刻度的认识？

在CSS中刻度是用于设置元素尺寸的单位。

a、特殊值0可以省略单位。例如：margin:0px可以写成margin:0

b、一些属性可能允许有负长度值，或者有一定的范围限制。如果不支持负长度值，那应该变换到能够被支持的最近的一个长度值。

c、长度单位包括：相对单位和绝对单位。

相对长度单位有：em,ex,ch,rem,vw,vh,vmax,vmin

绝对长度单位有：cm,mm,q,in,pt,pc,px

绝对长度单位：1in=2.54cm=25.4mm=72pt=6pc=96px

文本相对长度单位：em

相对长度单位是相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(相对父元素的字体大小倍数)

body{font-size:14px;}

h1{font-size:16px;}

.size1p{font-size:1em;}

.size2p{font-size:2em;}

.size3p{font-size:3em;}

文本相对长度单位：rem

rem是CSS3新增的一个相对单位（rootem，根em），相对于根元素(即html元素)font-size计算值的倍数

只相对于根元素的大小

浏览器的默认字体大小为16像素，浏览器默认样式也称为useragentstylesheet，就是所有浏览器内置的默认样式，多数是可以被修改的，但chrome不能直接修改，可以被用户样式覆盖。

请你说说em与rem的区别？

rem

rem（fontsizeoftherootelement）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。

作用：利用rem可以实现简单的响应式布局，可以利用html元素中字体的大小与屏幕间的比值设置font-size的值实现当屏幕分辨率变化时让元素也变化，以前的天猫tmall就使用这种办法

em

文本相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(默认16px)。(相对父元素的字体大小倍数)

em（fontsizeoftheelement）是指相对于父元素的字体大小的单位。它与rem之间其实很相似，区别在。（相对是的HTML元素的字体大，默认16px）

em与rem的重要区别：它们计算的规则一个是依赖父元素另一个是依赖根元素计算

请你说说box-sizing属性的的用法？

设置或检索对象的盒模型组成模式

a、box-sizing:content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即(Elementwidth=width+border+padding，但占有页面位置还要加上margin)此属性表现为标准模式下的盒模型。

b、box-sizing:border-box：padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即(Elementwidth=width)此属性表现为怪异模式下的盒模型。

浏览器标准模式和怪异模式之间的区别是什么？

在“标准模式”(StandardsMode)页面按照HTML与CSS的定义渲染，而在“怪异模式”(QuirksMode)就是浏览器为了兼容很早之前针对旧版本浏览器设计、并未严格遵循W3C标准的网页而产生的一种页面渲染模式。浏览器基于页面中文件类型描述的存在以决定采用哪种渲染模式；如果存在一个完整的`DOCTYPE`则浏览器将会采用标准模式，而如果它缺失则浏览器将会采用怪异模式。

（1）盒模型：

在怪异模式下，盒模型为IE盒模型而非标准模式下的W3C盒模型：在IE盒模型中，

boxwidth=contentwidth+paddingleft+paddingright+borderleft+borderright，

boxheight=contentheight+paddingtop+paddingbottom+bordertop+borderbottom。

而在W3C标准的盒模型中，box的大小就是content的大小。

（2）图片元素的垂直对齐方式:

对于`inline`元素和`table-cell`元素，在IEStandardsMode下vertical-align属性默认取值为`baseline`。而当`inline`元素的内容只有图片时，如`table`的单元格`table-cell`。在IEQuirksMode下，`table`单元格中的图片的`vertical-align`属性默认为`bottom`，因此，在图片底部会有几像素的空间。

（3）`

CSS中，描述`font`的属性有`font-family`，`font-size`，`font-style`，`font-weigh`,上述属性都是可以继承的。而在IEQuirksMode下，对于`table`元素，字体的某些属性将不会从`body`或其他封闭元素继承到`table`中，特别是`font-size`属性。

（4）内联元素的尺寸:

在IEStandardsMode下，non-replacedinline元素无法自定义大小，而在IEQuirksMode下，定义这些元素的`width`和`height`属性，能够影响该元素显示的大小尺寸。

（5）元素的百分比高度:

b、当一个元素使用百分比高度时，在IEStandardsMode下，高度取决于内容的变化，而在QuirksMode下，百分比高度则被正确应用。

（6）元素溢出的处理：

在IEStandardMode下，`overflow`取默认值`visible`，即溢出可见，这种情况下，溢出内容不会被裁剪，呈现在元素框外。而在QuirksMode下，该溢出被当做扩展`box`来对待，即元素的大小由其内容决定，溢出不会被裁剪，元素框自动调整，包含溢出内容。

怪异Quirks模式是什么，它和标准Standards模式有什么区别？

从IE6开始，引入了Standards模式，标准模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。

在IE6之前CSS还不够成熟，所以IE5等之前的浏览器对CSS的支持很差，IE6将对CSS提供更好的支持，然而这时的问题就来了，因为有很多页面是基于旧的布局方式写的，而如果IE6支持CSS则将令这些页面显示不正常，如何在即保证不破坏现有页面，又提供新的渲染机制呢？

在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能，尤其是新功能不兼容旧功能时。遇到这种问题时的一个常见做法是增加参数和分支，即当某个参数为真时，我们就使用新功能，而如果这个参数不为真时，就使用旧功能，这样就能不破坏原有的程序，又提供新功能。IE6也是类似这样做的，它将DTD当成了这个“参数”，因为以前的页面大家都不会去写DTD，所以IE6就假定如果写了DTD，就意味着这个页面将采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是Quirks模式（怪癖模式，诡异模式，怪异模式）。

区别：总体会有布局、样式解析和脚本执行三个方面的区别。

盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks模式下，IE的宽度和高度还包含了padding和border。

设置行内元素的高宽：在Standards模式下，给等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。

设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用margin:0auto设置水平居中：使用margin:0auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。

说说你对边距折叠的理解

外边距折叠：相邻的两个或多个外边距(margin)在垂直方向会合并成一个外边距（margin）

相邻：没有被非空内容、padding、border或clear分隔开的margin特性.非空内容就是说这元素之间要么是兄弟关系或者父子关系

垂直方向外边距合并计算:

a、参加折叠的margin都是正值：取其中margin较大的值为最终margin值。

b、参与折叠的margin都是负值：取的是其中绝对值较大的，然后，从0位置，负向位移。

c、参与折叠的margin中有正值，有负值：先取出负margin中绝对值中最大的，然后，和正margin值中最大的margin相加。

说说隐藏元素的方式有哪些？

a、使用CSS的display:none，不会占有原来的位置

b、使用CSS的visibility:hidden，会占有原来的位置

c、使用HTML5中的新增属性hidden="hidden"，不会占有原来的位置

为什么重置浏览器默认样式，如何重置默浏览器认样式？

每种浏览器都有一套默认的样式表，即useragentstylesheet，网页在没有指定的样式时，按浏览器内置的样式表来渲染。这是合理的，像word中也有一些预留样式，可以让我们的排版更美观整齐。不同浏览器甚至同一浏览器不同版本的默认样式是不同的。但这样会有很多兼容问题。

a、最简单的办法：（不推荐使用）*{margin:0;padding:0;}。

b、使用CSSReset可以将所有浏览器默认样式设置成一样。

c、normalize：也许有些cssreset过于简单粗暴，有点伤及无辜，normalize是另一个选择。bootstrap已经引用该css来重置浏览器默认样式，比普通的cssreset要精细一些，保留浏览器有用的默认样式，支持包括手机浏览器在内的超多浏览器，同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。

谈谈你对BFC与IFC的理解？(是什么，如何产生，作用)

(1)、什么是BFC与IFC

a、BFC（BlockFormattingContext）即“块级格式化上下文”，IFC（InlineFormattingContext）即行内格式化上下文。常规流（也称标准流、普通流）是一个文档在被显示时最常见的布局形态。一个框在常规流中必须属于一个格式化上下文，你可以把BFC想象成一个大箱子，箱子外边的元素将不与箱子内的元素产生作用。

b、BFC是W3CCSS2.1规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，BlockFormattingContext提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。也可以说BFC就是一个作用范围。

c、在普通流中的Box(框)属于一种formattingcontext(格式化上下文)，类型可以是block，或者是inline，但不能同时属于这两者。并且，Blockboxes(块框)在blockformattingcontext(块格式化上下文)里格式化，Inlineboxes(块内框)则在InlineFormattingContext(行内格式化上下文)里格式化。

(2)、如何产生BFC

当一个HTML元素满足下面条件的任何一点，都可以产生BlockFormattingContext：

a、float的值不为none

b、overflow的值不为visible

c、display的值为table-cell,table-caption,inline-block中的任何一个

d、position的值不为relative和static

CSS3触发BFC方式则可以简单描述为：在元素定位非static，relative的情况下触发，float也是一种定位方式。

(3)、BFC的作用与特点

a、不和浮动元素重叠，清除外部浮动，阻止浮动元素覆盖

如果一个浮动元素后面跟着一个非浮动的元素，那么就会产生一个重叠的现象。常规流（也称标准流、普通流）是一个文档在被显示时最常见的布局形态，当float不为none时，position为absolute、fixed时元素将脱离标准流。

说说你对页面中使用定位(position)的理解？

如何解决多个元素重叠问题？z-index

页面布局的方式有哪些？

（1）、双飞翼布局

经典三列布局，也叫做圣杯布局【HolyGrailofLayouts】是KevinCornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师传播开来，在中国也有叫法是双飞翼布局，它的布局要求有几点：

a、三列布局，中间宽度自适应，两边定宽；

b、中间栏要在浏览器中优先展示渲染；

c、允许任意列的高度最高；

d、要求只用一个额外的DIV标签；

e、要求用最简单的CSS、最少的HACK语句；

在不增加额外标签的情况下，圣杯布局已经非常完美，圣杯布局使用了相对定位，以后布局是有局限性的，而且宽度控制要改的地方也多。在淘宝UED（UserExperienceDesign）探讨下，增加多一个div就可以不用相对布局了，只用到了浮动和负边距，这就是我们所说的双飞翼布局。

(2)、多栏布局

a、栏栅格系统：就是利用浮动实现的多栏布局，在bootstrap中用的非常多。

b、多列布局：栅格系统并没有真正实现分栏效果（如word中的分栏），CSS3为了满足这个要求增加了多列布局模块

(3)、弹性布局（Flexbox）

CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（FlexibleBox），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，这里简称为Flex。

Flexbox布局常用于设计比较复杂的页面，可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变，同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。

Flexbox布局在定义伸缩项目大小时伸缩容器会预留一些可用空间，让你可以调节伸缩项目的相对大小和位置。例如，你可以确保伸缩容器中的多余空间平均分配多个伸缩项目，当然，如果你的伸缩容器没有足够大的空间放置伸缩项目时，浏览器会根据一定的比例减少伸缩项目的大小，使其不溢出伸缩容器。

综合而言，Flexbox布局功能主要具有以下几点：

a、屏幕和浏览器窗口大小发生改变也可以灵活调整布局；

b、可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小；

c、可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；

d、可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；

e、可以控制元素在页面上的布局方向；

f、可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。

(4)、瀑布流布局

瀑布流布局是流式布局的一种。是当下比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。

优点

a、有效的降低了界面复杂度，节省了空间：我们不再需要臃肿复杂的页码导航链接或按钮了。

b、对触屏设备来说，交互方式更符合直觉：在移动应用的交互环境当中，通过向上滑动进行滚屏的操作已经成为最基本的用户习惯，而且所需要的操作精准程度远远低于点击链接或按钮。

c、更高的参与度：以上两点所带来的交互便捷性可以使用户将注意力更多的集中在内容而不是操作上，从而让他们更乐于沉浸在探索与浏览当中。

缺点

a、有限的用例：

无限滚动的方式只适用于某些特定类型产品当中一部分特定类型的内容。

例如，在电商网站当中，用户时常需要在商品列表与详情页面之间切换，这种情况下，传统的、带有页码导航的方式可以帮助用户更稳妥和准确的回到某个特定的列表页面当中。

b、额外的复杂度：

那些用来打造无限滚动的JS库虽然都自称很容易使用，但你总会需要在自己的产品中进行不同程度的定制化处理，以满足你们自己的需求;另外这些JS库在浏览器和设备兼容性等方面的表现也参差不齐，你必须做好充分的测试与调整工作。

c、再见了，页脚：

如果使用了比较典型的无限滚动加载模式，这就意味着你可以和页脚说拜拜了。

最好考虑一下页脚对于你的网站，特别是用户的重要性;如果其中确实有比较重要的内容或链接，那么最好换一种更传统和稳妥的方式。

千万不要耍弄你的用户，当他们一次次的浏览到页面底部，看到页脚，却因为自动加载的内容突然出现而无论如何都无法点击页脚中的链接时，他们会变的越发愤怒。

d、集中在一页当中动态加载数据，与一页一页的输出相比，究竟那种方式更利于SEO，这是你必须考虑的问题。对于某些以类型网站来说，在这方面进行冒险是很不划算的。

e、关于页面数量的印象：

(5)、流式布局（Fluid）

固定布局和流式布局在网页设计中最常用的两种布局方式。固定布局能呈现网页的原始设计效果，流式布局则不受窗口宽度影响，流式布局使用百分比宽度来限定布局元素，这样可以根据客户端分辨率的大小来进行合理的显示。

(6)、响应式布局

响应式布局是EthanMarcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

a、面对不同分辨率设备灵活性强

b、能够快捷解决多设备显示适应问题

a、兼容各种设备工作量大，效率低下

c、其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

d、一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

overfloa:hidden是否形成新的块级格式化上下文？

会形成，触发BFC的条件有：

-float的值不为none。

-overflow的值不为visible。

-display的值为table-cell,table-caption,inline-block中的任何一个。

-position的值不为relative和static。

请你谈谈Cookie的弊端

cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的。

第一：每个特定的域名下最多生成20个cookie

1.IE6或更低版本最多20个cookie

2.IE7和之后的版本最后可以有50个cookie。

3.Firefox最多50个cookie

4.chrome和Safari没有做硬性限制

IE和Opera会清理近期最少使用的cookie，Firefox会随机清理cookie。

cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节。

IE提供了一种存储可以持久化用户数据，叫做uerData，从IE5.0就开始支持。每个数据最多128K，每个域名下最多1M。这个持久化数据放在缓存中，如果缓存没有清理，那么会一直存在。

优点：极高的扩展性和可用性

1.通过良好的编程，控制保存在cookie中的session对象的大小。

2.通过加密和安全传输技术（SSL），减少cookie被破解的可能性。

3.只在cookie中存放不敏感数据，即使被盗也不会有重大损失。

4.控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。

缺点：

1.`Cookie`数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。

2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。

3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

简单说一下浏览器本地存储是怎样的

在较高版本的浏览器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage。

html5中的WebStorage包括了两种存储方式：sessionStorage和localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

webstorage和cookie的区别

WebStorage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，WebStorage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而WebStorage仅仅是为了在本地“存储”数据而生

浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持webstorage。

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

(1)link属于HTML标签，而@import是CSS提供的;

(2)页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

(3)import只在IE5以上才能识别，而link是HTML标签，无兼容问题;

(4)link方式的样式的权重高于@import的权重.

position三大定位机制，css盒子模型，css选择器及优先级，

CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS3新增伪类有那些？

CSS选择符：

1.id选择器(#myid)

2.类选择器(.myclassname)

3.标签选择器(div,h1,p)

4.相邻选择器(h1+p)

5.子选择器(ul>li)

6.后代选择器(lia)

7.通配符选择器(*)

8.属性选择器(a[rel="external"])

9.伪类选择器(a:hover,li:nth-child)

可继承的样式：

1.font-size

2.font-family

3.color

4.text-indent

不可继承的样式：

1.border

2.padding

3.margin

4.width

5.height

优先级算法：

1.优先级就近原则，同权重情况下样式定义最近者为准;

2.载入样式以最后载入的定位为准;

3.!important>id>class>tag

4.important比内联优先级高，但内联比id要高

CSS3新增伪类举例：

p:first-of-type选择属于其父元素的首个

元素的每个

元素。

p:last-of-type选择属于其父元素的最后

元素的每个

元素。

p:only-of-type选择属于其父元素唯一的

元素的每个

元素。

p:only-child选择属于其父元素的唯一子元素的每个

元素。

p:nth-child(2)选择属于其父元素的第二个子元素的每个

元素。

:enabled:disabled控制表单控件的禁用状态。

:checked单选框或复选框被选中。

CSS3有哪些新特性？

1.CSS3实现圆角（border-radius），阴影（box-shadow），

2.对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

3.transform:rotate(9deg)scale(0.85,0.90)translate(0px,-30px)skew(-9deg,0deg);//旋转,缩放,定位,倾斜

4.增加了更多的CSS选择器多背景rgba

5.在CSS3中唯一引入的伪元素是::selection.

6.媒体查询，多栏布局

7.border-image

对BFC规范的理解？

BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠。

解释下CSSsprites，以及你要如何在页面或网站中使用它。

说说你对语义化的理解？

1.去掉或者丢失样式的时候能够让页面呈现出清晰的结构

2.有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

3.方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

4.便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

2.严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。

3.在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

4.DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

你知道多少种Doctype文档类型？

2.HTML4.01规定了三种文档类型：Strict、Transitional以及Frameset。

3.XHTML1.0规定了三种XML文档类型：Strict、Transitional以及Frameset。

4.Standards（标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

HTML与XHTML——两者有什么区别？

1.所有的标记都必须要有一个相应的结束标记

2.所有标签的元素和属性的名字都必须使用小写

3.所有的XML标记都必须合理嵌套

4.所有的属性必须用引号""括起来

5.把所有<和&特殊符号用编码表示

6.给所有属性赋一个值

7.不要在注释内容中使用"--"

8.图片必须有说明文字

html常见兼容性问题？

1.png24位的图片在iE6浏览器上出现背景

解决方案：做成PNG8，也可以引用一段脚本处理.

2.浏览器默认的margin和padding不同

解决方案：加一个全局的*{margin:0;padding:0;}来统一。

3.IE6双边距bug：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。

#box{float:left;width:10px;margin:00010px;}

这种情况之下IE会产生20px的距离

解决方案：在float的标签样式控制中加入_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

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

首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。

接着，再次使用"+"将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

.bb{

background-color:#f1ee18;/*所有识别*/

.background-color:#00deff\9;/*IE6、7、8识别*/

+background-color:#a200ff;/*IE6、7识别*/

_background-color:#1e0bd1;/*IE6识别*/

5.IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性；Firefox下,只能使用getAttribute()获取自定义属性

解决方法：统一通过getAttribute()获取自定义属性

6.IE下，event对象有x、y属性，但是没有pageX、pageY属性;Firefox下，event对象有pageX、pageY属性，但是没有x、y属性

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

7.Chrome中文界面下默认会将小于12px的文本强制按照12px显示

解决方法：可通过加入CSS属性-webkit-text-size-adjust:none;解决

8.超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不在具有hover和active了

解决方法：改变CSS属性的排列顺序L-V-H-A

a:link{}

a:visited{}

a:hover{}

a:active{}

10.上下margin重合问题：ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。

解决方法：养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。

11.ie6对png图片格式支持不好

解决方案：引用一段脚本处理

解释下浮动和它的工作原理？清除浮动的技巧

1.使用空标签清除浮动。

2.使用overflow。

3.使用after伪对象清除浮动。

浮动元素引起的问题和解决办法？

浮动元素引起的问题：

1.父元素的高度无法被撑开，影响与父元素同级的元素

2.与浮动元素同级的非浮动元素会跟随其后

3.若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题，对于问题1，添加如下样式，给父元素添加clearfix样式：

1.额外标签法，（缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。）

2.使用after伪元素

content:".";

3.浮动外部元素

4.设置overflow为hidden或者auto

IE8以下版本的浏览器中的盒模型有什么不同：

IE8以下浏览器的盒模型中定义的元素的宽高包括内边距和边框（？？？）

DOM操作——怎样添加、移除、移动、复制、创建和查找节点：

1.创建新节点

createDocumentFragment()//创建一个DOM片段

createElement()//创建一个具体的元素

createTextNode()//创建一个文本节点

2.添加、移除、替换、插入

appendChild()

removeChild()

replaceChild()

insertBefore()//在已有的子节点前插入一个新的子节点

3.查找

getElementsByTagName()//通过标签名称

getElementsByName()//通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)

getElementById()//通过元素Id，唯一性

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

新特性：

HTML5现在已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加。

1.拖拽释放(Draganddrop)API

2.语义化更好的内容标签（header,nav,footer,aside,article,section）

3.音频、视频API(audio,video)

4.画布(Canvas)API

5.地理(Geolocation)API

6.本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失；

7.sessionStorage的数据在浏览器关闭后自动删除

8.表单控件，calendar、date、time、email、url、search

9.新的技术webworker,websocket,Geolocation

移除的元素：

1.纯表现的元素：basefont，big，center，font,s，strike，tt，u；

2.对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签：

1.IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式（当然最好的方式是直接使用成熟的框架、使用最多的是html5shiv框架）：

如何区分HTML和HTML5：

iframe的优缺点？

优点：

2.Securitysandbox

3.并行加载脚本

1.iframe会阻塞主页面的Onload事件

3.没有语意

调用localstorge、cookies等本地存储方式

webSocket如何兼容低浏览器？

AdobeFlashSocket、ActiveXHTMLFile(IE)、基于multipart编码发送XHR、基于长轮询的XHR

1.优化图片

2.图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）

3.优化CSS（压缩合并css，如margin-top,margin-left...)

4.网址后加斜杠（如www.campr.com/目录，会判断这个目录是什么文件类型，或者是目录。）

5.标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。

什么是FOUC（无样式内容闪烁）？你如何来避免FOUC？

FOUC-FlashOfUnstyledContent文档样式闪烁

@import"../fouc.css";

解决方法简单的出奇，只要在之间加入一个或者

eval是做什么的？

1.它的功能是把对应的字符串解析成JS代码并运行

2.应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）

Node.js的适用场景

1.高并发

2.聊天

3.实时消息推送

JavaScript原型，原型链有什么特点？

1.原型对象也是普通的对象，是对象一个自带隐式的__proto__属性，原型也有可能有自己的原型，如果一个原型对象的原型不为null的话，我们就称之为原型链

2.原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链

怎么重构页面？

1.编写CSS

2.让页面结构更合理化，提升用户体验

3.实现良好的页面效果和提升性能

WEB应用从服务器主动推送Data到客户端有那些方式？

1.html5websocket

2.WebSocket通过Flash

4.XHRMultipartStreaming

5.不可见的Iframe

IE与火狐的事件机制有什么区别？如何阻止冒泡？(学习)

1.我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被JavaScript侦测到的行为

2.事件处理机制：IE是事件冒泡、firefox同时支持两种事件模型，也就是：捕获型事件和冒泡型事件

3.ev.stopPropagation();

注意旧ie的方法：ev.cancelBubble=true;

Ajax是什么？Ajax的交互模型？同步和异步的区别？如何解决跨域问题？（学习！！！）

Ajax是什么：

1.通过异步模式，提升了用户体验

2.优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用

3.Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。

Ajax的最大的特点：

1.Ajax可以实现动态不刷新（局部刷新）

2.readyState属性状态有5个可取值：0=未初始化，1=启动，2=发送，3=接收，4=完成

Ajax同步和异步的区别:

1.同步：提交请求->等待服务器处理->处理完毕返回，这个期间客户端浏览器不能干任何事

2.异步：请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕

ajax.open方法中，第3个参数是设同步或者异步。

Ajax的缺点：

1.Ajax不支持浏览器back按钮

2.安全问题Ajax暴露了与服务器交互的细节

3.对搜索引擎的支持比较弱

4.破坏了程序的异常机制

5.不容易调试

解决跨域问题：

1.jsonp

2.iframe

对网站重构的理解

网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说是在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI。

对于传统的网站来说重构通常是：

1.表格(table)布局改为DIV+CSS

2.使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)

3.对于移动平台的优化

4.针对于SEO进行优化

5.深层次的网站重构应该考虑的方面

6.减少代码间的耦合

7.让代码保持弹性

8.严格按规范编写代码

9.设计可扩展的API

10.代替旧有的框架、语言(如VB)

11.增强用户体验

12.通常来说对于速度的优化也包含在重构中

13.压缩JS、CSS、image等前端资源(通常是由服务器来解决)

14.程序的性能优化(如数据读写)

15.采用CDN来加速资源加载

16.对于JSDOM的优化

17.HTTP服务器的文件缓存

HTTP状态码及其意义

北森（青岛）：

1、列举三种以上纯css实现”一个div“左半块为黑，右半块为白：