前端面试准备(一)_前端面试需要做什么准备

【对web标准的理解】

Web标准不是某一个标准，而是由一系列标准组合而成。
网页主要由三部分组成：结构、表现和行为。
对应的标准也分三方面：
结构化标准语言主要包括XHTML和HTML以及XML，
表现标准语言主要包括CSS，
行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。

遵循标准的网页有哪些好处？
对于访问者
● 文件下载与页面显示速度更快。
● 内容能被更多的用户所访问。
● 内容能被更广泛的设备所访问。

对于网站所有者
● 更少的代码和组件，容易维护。
● 代码更简洁
● 更容易被搜寻引擎搜索到。
● 改版方便，不需要变动页面内容。
● 提高网站易用性。
///
我们的代码更加规范，更加合乎标准，我们的页面就更容易被搜索引擎抓取收录

**

【关于浏览器内核】

**
浏览器内核，英文名称为“Rendering Engine”，翻译过来就是“排版引擎”，也被称为“页面渲染引擎”。
作用：渲染网页内容，将网页的代码转换为最终展示页面。
因为是排版，所以肯定会排版错位等问题。排版错位的原因：1.网站本身编写不规范 2.浏览器本身的渲染不标准

Trident 内核：(IE内核)：世界之窗、 360安全浏览器、傲游；搜狗浏览器；115浏览器
Gecko内核：(火狐内核)：Mozilla Firefox
WebKit(苹果公司内核)：Apple Safari (Win/Mac/iPhone/iPad)、Google Chrome
Presto：Opera

**

【hasLayout】

**
hasLayout：大多IE下的显示错误，就是源于 haslayout，在IE8,9中已经修复。

haslayout 问题引起的常见 bug：
IE6 及更低版本的双空白边浮动 bug
bug 修复: display:inline;
IE5-6/win 的 3 像素偏移 bug
bug 修复: _height:1%;
IE6 的躲躲猫(peek-a-boo) bug
bug 修复: _height:1%;
IE6/7负margin隐藏Bug：
bug 修复:去掉父元素的hasLayout；或者赋hasLayout给子元素,并添加position:relative;

如何使元素hasLayout为true？
position: absolute
float: left|right
display: inline-block
width: 除 “auto” 外的任意值
height: 除 “auto” 外的任意值
zoom: 除 “normal” 外的任意值
writing-mode: tb-rl

**具体应该使用哪种方式来使元素hasLayout为true呢？相对而言zoom：1比较好，因为不会造成其它影响。
zoom:1;是什么意思？1.检查标签是否闭合2.清除浮动3.样式排除法

【BFC与FFC】

What’s FC？
一定不是KFC，FC的全称是：Formatting Contexts，是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

BFC全称”Block Formatting Context”, 中文为“块级格式化上下文“。

BFC的三个特性：
1.BFC会阻止垂直外边距（margin-top、margin-bottom）折叠
2.BFC不会重叠浮动元素
3.BFC可以包含浮动**

如何触发BFC？
float为 left|right
overflow为 hidden|auto|scroll
display为 table-cell|table-caption|inline-block
position为 absolute|fixed
我们可以对父容器添加这些属性来形成BFC达到“清浮动”效果。

IFC是什么？
IFC(Inline Formatting Contexts)直译为”内联格式化上下文”
IFC中时不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。

IFC一般有什么用？
水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。
垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

GFC(GridLayout Formatting Contexts)直译为”网格布局格式化上下文”
FFC(Flex Formatting Contexts)直译为”自适应格式化上下文”
这两种都是css3新增加的，使用的人还不是很多，暂时无视。

【清除浮动】

在使用浮动的过程中经常会出现这样一种问题：父容器并没有把浮动的子元素包围起来，俗称塌陷。
解决的方案一般包括：
（1）父级div定义height。
（2）结尾处加空div标签clear:both。
（3）父级div定义伪类:after和zoom。
（4）父级div定义overflow:hidden。
（5）父级div定义overflow:auto。
（6）父级div也浮动，需要定义宽度。
（7）父级div定义display:table。
（8）结尾处加br标签clear:both。

较为常见的一些方法：

A.添加空div clear:both

<div class="p">
    <div class="c"></div>
    <div style="clear:left;"></div>
</div>
1
2
3
4

问题：向页面添加了内容来达到改变效果的目的，数据和表现混淆

B.使用伪元素

.floatfix:after{
    content:"";
    display:table;
    clear:both;
}
1
2
3
4
5

问题：IE6,7不支持伪元素

C.形成BFC
代码不列举，方式太多。
问题：float牵扯到父元素清浮动，overflow属性会影响滚动条和绝对定位的元素；position会改变元素的定位方式

D.hasLayout
问题：只有IE浏览器支持

//
一个相对靠谱的解决方案：

.floatfix{
    *zoom:1;//使用css hacks 支持低版本IE
}
.floatfix:after{
    content:"";
    display:table;
    clear:both;
}
1
2
3
4
5
6
7
8

【注明：以上面试题均来自N多文章，加以自己的整理和修改，侵权删】