前端工程师面试题汇总（我的解析，可能不一定对）（css部分）

*使用box-sizing:border-box||content-box(默认) ||inherit;来切换盒子模型，border-box在移动端开发中很实用。
*box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
div{//兼容性写法;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    width:50%;
    float:left;
}

*不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。

*所有元素可继承：visibility和cursor。

*内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。

*终端块状元素可继承：text-indent和text-align。

*列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

*表格元素可继承：border-collapse。
 
*font属性书写格式(仅css1)
font : font-style font-variant font-weight font-size line-height font-family;

*font属性默认值
font: normal normal normal medium normal "Times New Roman" ;

css优先级计算完整版

原则一： 继承不如指定
原则二： #id > .class > 标签选择符
原则三：越具体越强大，计算的值越大，越强大。

CSS优先级权重计算法：

CSS优先级包含四个级别（标签内选择符，ID选择符，Class选择符，元素选择符）以及各级别出现的次数!

根据这四个级别出现的次数计算得到CSS的优先级。

CSS优先级的计算规则如下：
* 元素标签中定义的样式（Style属性，内嵌样式1000）,加1,0,0,0
* 每个ID选择符(如 #id，100),加0,1,0,0
* 每个Class选择符(如 .class，10)、每个属性选择符(如 [attribute=])、每个伪类(如 :hover)加0,0,1,0
* 每个元素选择符（如p，1）或伪元素选择符(如 :firstchild)等，加0,0,0,1,属性选择符
然后，将这四个数字分别累加，就得到每个CSS定义的优先级的值，
然后从左到右逐位比较大小，数字大的CSS样式的优先级就高。

注意：
1、!important声明的样式优先级最高，如果冲突再进行计算。
2、如果优先级相同，则选择最后出现的样式。
3、继承得到的样式的优先级最低。

!important>内嵌样式(style)>id选择器>class=属性选择符=伪类选择符>tag

display 的常用值的作用： 
1.none;用于隐藏元素，不占位置。区别于visibility:hidden;不可见但是占位置。
2.block; 象块类型元素一样显示。用于显示元素，或设置为块元素。与visibility:visible(默认值);元素是可见的。
3.inline;缺省值。象行内元素类型一样显示。
4.inline-block;象行内元素一样显示，但其内容象块类型元素一样显示。多用于相同div做切换选项卡的时候，子元素上设置为inline -block;
5.list-item; 象块类型元素一样显示，并添加样式列表标记。
6.table;此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
7.inline-table;此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
8.inherit;规定应该从父元素继承 display 属性的值。

备注：visibility:visible||hidden||inherit||collapse;最后一个取值用于在表格元素中删除一行或者一列，但是不会影响布局。呈现为 hidden ;

position 的值的定位区别：
1.absolute 生成绝对定位的元素，相对于 static (不定位，标准文档流)定位以外的第一个祖先元素进行定位。 
备注：
1、如果父元素都不定位就会根据浏览器窗口来进行定位。
2、当然前一种不是我们想要的，所以要在该定位元素的父元素上添加相对定位position:relative;，如果本来不需要定位。
2.fixed 生成绝对定位的元素，相对于浏览器窗口进行定位（老IE不支持）。
3.relative 生成相对定位的元素，相对于其在普通流中的位置进行定位（或者说他原来的位置，或者前一个元素的位置）。 
4.static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。
5.inherit 规定从父元素继承 position 属性的值。

常见css浏览器兼容性问题

1、不同浏览器的标签默认的外补丁和内补丁不同
问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
碰到频率:100%
解决方案：CSS里    *{margin:0;padding:0;}
备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。

2、块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
问题症状:常见症状是IE6中后面的一块被顶到下一行
碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题）
解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性
备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。

3、设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度
碰到频率：60%
解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。

4、行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug
问题症状：IE6里的间距比超过设置的间距
碰到几率：20%
解决方案：在display:block;后面加入display:inline;display:table;
备注：行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后，在IE6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。

5、图片默认有间距
问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。
碰到几率：20%
解决方案：使用float属性为img布局
备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。（我的一个学生使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，所以我禁止他们使用）

6、标签最低高度设置min-height不兼容
问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容
碰到几率：5%
解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。

7、透明度的兼容CSS设置
/* CSS hack*/ 我很少使用hacker的，可能是个人习惯吧，我不喜欢写的代码IE不兼容，然后用hack来解决。不过hacker还是非常好用的。使用hacker我可以把浏览器分为3类：IE6 ；IE7和遨游；其他（IE8 chrome ff safari opera等）
◆IE6认识的hacker 是下划线_ 和星号 *
◆IE7 遨游认识的hacker是星号 *
比如这样一个CSS设置：
height:300px;*height:200px;_height:100px; IE6浏览器在读到height:300px的时候会认为高时300px；继续往下读，他也认识*heihgt， 所以当IE6读到*height:200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。继续往下读，IE6还认识_height,所以他又会覆盖掉200px高的设置，把高度设置为100px；
IE7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了，因为它们不认识_height。所以它们会把高度解析为200px，剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为300px。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。

主要内容

Box: CSS布局的基本单位

Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子：

block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；
inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；
run-in box: css3 中才有， 这儿先不讲了。

Formatting context

Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC。

BFC 定义

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC布局规则：

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算

哪些元素会生成BFC

根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

1、首先，对浏览器来说，ID 选择器 #xx 是最快的，其次是 class 选择器、html 元素选择器等。
2、CSS 的后代选择器本身就是一种在标准里面不那么推荐的方式。
3、从右向左的规则要比从左向右的高效，浏览器采用从右往左的方式进行匹配。right -to-left 这样做是为了使规则能够快、准、狠地与render树上的节点匹配，通俗地将就是 就近原则。

这是一个很让人困惑的CSS特征，我之前也谈到过它。我们大家都知道，当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，
但是，对于一些表示竖向距离的属性，例如padding-top,padding-bottom,margin-top,margin-bottom等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

:after;用于表示伪类，选择器用。
::after;用于表示伪元素，在元素前后插入内容。
例如：
.parent:after{}/*表示选中元素选择器之后的同级元素*/
.parent::after{content:"";display:block;height:0;visibility:hidden;clear:both;font-size:0;}    .parent{zoom:1;}   用于清除浮动。

伪元素由双冒号和伪元素名称组成。双冒号是在当前规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如:first-line、:first-letter、:before、:after等。

首先，阅读 w3c 对两者的定义：

CSS 伪类用于向某些选择器添加特殊的效果。
CSS 伪元素用于将特殊的效果添加到某些选择器。

可以明确两点，第一两者都与选择器相关，第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的东西。

<style type="text/css"> 
    .wrap{
        background-color: green;
        position: relative;
        width: 98%;
    }
    @media screen and (max-width:1000px){
        .wrap{
            height: 300px;
        }
    }
    @media screen and (min-width:1000px){
        .wrap{
            height: 500px;
        }
    }
    @media screen and (min-width:1100px){
        .wrap{
            height: 600px;
        }
    }
    @media screen and (min-width:1200px){
        .wrap{
            height: 700px;
        }
    }
    .top{
        background-color: red;
        width: 80%;
        height: 200px;
    }
    .bottom{
        width: 90%;
        position: absolute;
        top: 220px;
        bottom: 0;
        background-color: blue;
    }
</style> 

<div class="wrap">
    <div class="top">上</div>
    <div class="bottom">下</div>
</div>

cookie：一个域名之下，每次请求资源都要带上cookie发到后台。

cookie隔离技术和传统的多域名拆分请求，提高浏览器并发请求数有点类似，均是采用多域名来处理请求。

传统做法是将css，js，图片等静态文件放在多个域名下面请求，这样就可以跨过浏览器对统一主机名并发连接数的限制，提高整体并发请求量。
 
cookie隔离技术则是通过使用多个非主要域名来请求静态文件，如果静态文件都放在主域名下，那静态文件请求的时候带有的cookie的数据提交给server是非常浪费的，还不如隔离开。
 
因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。

同时这种方式不会将cookie传入webserver，也减少了webserver对cookie的处理分析环节，提高了webserver的http请求的解析速度。

kevintang给出的测试结果是：

在做腾讯网加速的时候，启用了两个非qq.com的新域名，mat1.gtimg.com和img1.gtimg.com，

隔离前10个cookie，185字节，约4KB，存在请求延时现象，隔离后无cookie，图片服务器速度由原来0.63秒提升到0.43秒，速度提升32%。