1标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

CSS盒子模型：由四个属性组成的外边距(margin)、内边距(padding)、边界(border)、内容区(width和height);
　　标准的css盒子模型宽高就是内容区宽高；
　　低端IE css盒子模型宽高 内边距﹢边界﹢内容区；

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

CSS中的选择器分为：通配选择器(*)，标签选择器，类选择器，ID选择器，简单属性选择，具体属性选择(e.g.a[href][title] {color:red;})，根据部分属性值选择，特定属性选择，从结构上来分还有后代选择器(关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。)，子元素选择器(h1 > span{……})，相邻兄弟选择器(h1 + p {……})以及伪类。
可继承的属性有 font-size font-family color
不可继承的属性有 border padding margin background-color width height等

3.CSS优先级算法如何计算？

在多个选择符应用于同一个元素上那么Specificity值高的最终获得优先级。
选择符Specificity值列表：规则：
1）行内样式优先级Specificity值为1,0,0,0，高于外部定义。外部定义指经由<link>或<style>标签定义的规则；
2）!important声明的Specificity值最高；
3）Specificity值一样的情况下，按CSS代码中出现的顺序决定，后者CSS样式居上；
4）由继续而得到的样式没有specificity的计算，它低于一切其他规则(比如全局选择符*定义的规则)。
算法：当遇到多个选择符同时出现时候按选择符得到的Specificity值逐位相加，{数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0}就得到最终计算得的specificity，然后在比较取舍时按照从左到右的顺序逐位比较。

4.CSS3新增伪类有那些？

p:last-of-type 选择其父元素的最后的一个P元素
p:last-child 选择其父元素的最后子元素(一定是P才行)
p:first-of-type 选择其父元素的首个P元素
p:first-child 其父元素的首个p元素(一定是p才行)
p:only-child　　其父元素的只有一个元素(而且这个元素只能是p元素，不能有其他元素)
p:only-of-type　选择其父元素的只有一个p元素(不能有第二个P元素，其他元素可以有)
选第N个
p:nth-child(n) 　　选择其父元素的第N个 刚好是p的元素
p:nth-last-child(n) 从最后一个子元素开始计数
p:nth-of-type(n)　 选择其父元素的n个元素
p:nth-last-of-type(n) .从最后一个子元素开始计数

注意：
last-of-type是指匹配的对象是其所在的父素的最后一个相同类型元素
last-child: 是指匹配的对象是其所在的父元素的最后一个元素

5.如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

水平左右居中

text-align:center 和 margin:0 auto(上下为0，左右为自动)；

.father{text-alingn:center;}
.son{margin: 0 auto}

注意：他们起作用的首要条件是子元素必须没有被float，以及position：absolute影响(relative不影响)
text-align+inline-block
特点：适应性好，IE6、IE7不兼容inline-block。text-align:center会导致子元素的内容也居中。

<style>
     .parent{
        text-align: center;
        }
     .child{
       display: inline-block;/*宽度跟内容变化*/
        }
</style>

table+margin
特点：只需要对子元素设置，IE6、IE7不支持table，

   <style type="text/css">
     .child{
          display: table;/*宽度跟内容变化*/
          margin: 0 auto;
       }
   </style>

使用position居中

     .father{position:relative；}
     .son{position:absolute;
        left:50%;
        top:50%;
        margin-left:-[son.width/2]px;
           margin-top:-[son.height/2]px;}

absolute_transform
特点：子元素不会影响其他元素，transform是CSS3内容，不兼容IE6、IE7、IE8。

  <style type="text/css">
     .parent{
    position: relative;
}
.child{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);/*向左移自身宽度一半*/
}
 </style>

flex+justify-content

  <style type="text/css">
 .parent{
       display: flex;
       justify-content: center;/*设置了这个就不用设置子元素margin: 0 auto*/
        }
 .child{ margin: 0 auto;/*如果不用justify-content: center，可以用这个*/ }

  </style>

垂直居中

table-cell+vertical-align
要兼容IE7及以下，要更换为table结构

.parent{
    display: table-cell;
    vertical-align: middle;
   }

absolute+transform
transform兼容性问题

.parent{
    position: relative;
 }
.child{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
 }

flex+align-items
flex、align-items兼容性问题

.parent{
    display: flex;
    align-items: center;
}

单行内容居中：只考虑单行是最简单的，无论是否给容器固定高度，只要给容器设置 line-height 和 height，并使两值相等，再加上 over-flow: hidden；

   .son{
    height: 4em;
    line-height: 4em;
    overflow: hidden;}

同时支持块级和内联极元素，只能显示一行。
多行居中，容器高度可变
给出一致的 padding-bottom 和 padding-top .

 .son{ 
    padding-top: 24px;
    padding-bottom: 24px;}

把容器当做表格

  .son{ 
       display: table-cell;
       height: 300px;
       vertical-align: middle;}

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

其中常用的的有none、inline、block、inline-block。分别的意思是：
1)none： 元素不会显示，而且改元素现实的空间也不会保留。但有另外一个 visibility: hidden， 是保留元素的空间的。
2)inline： display的默认属性。将元素显示为内联元素，元素前后没有换行符。我们知道内联元素是无法设置宽高的，所以一旦将元素的display 属性设为 inline， 设置属性height和width是没有用的。此时影响它的高度一般是内部元素的高度（font-size）和padding。
3)block： 将元素将显示为块级元素，元素前后会带有换行符。设置为block后，元素可以设置width和height了。元素独占一行。
4)inline-block：行内块元素。这个属性值融合了inline 和 block 的特性，即是它既是内联元素，又可以设置width和height。

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

relative（相对定位）的定位原点是以自己本省原来所在位置做为原点的。
absolute（绝对定位）的定位原点是离自己这一级元素最近的一级position设置为 absolute或者relative的父元素的左上角为原点的，（当然，如果自己的所有父元素都没 有设置position，那么就以body为定位原点）

8.CSS3有哪些新特性？

1)CSS3的选择器
1）E:last-child 匹配父元素的最后一个子元素E。
2）E:nth-child(n)匹配父元素的第n个子元素E。
3）E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。
2.)@Font-face 特性
Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。以下是字体的引入和引用。

        @font-face {   
             font-family: BorderWeb;   
             src:url(BORDERW0.eot);   }   
        @font-face {   
              font-family: Runic;   
              src:url(RUNICMT0.eot);    }   
       .border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" }   
      .event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }  
       @font-face { 
              font-family: BorderWeb; 
              src:url(BORDERW0.eot);  } 
       @font-face { 
              font-family: Runic; 
              src:url(RUNICMT0.eot); } 
     .border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" } 
     .event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }

3)圆角border-radius: 15px;
4)阴影（Shadow）

      .class1{   
           text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5);   }   

9.请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？

弹性布局（flexible box）模块（目前是w3c候选的推荐）旨在提供一个更加有效的方式 来布置，对齐和分布在容器之间的各项内容，即使它们的大小是未知或者动态变化的。 弹性布局的主要思想是让容器有能力来改变项目的宽度和高度，以填满可用空间（主要是为了容纳所有类型的显示设备和屏幕尺寸）的能力。
Flexbox布局是最合适的一个应用程序的组件，以及小规模的布局

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

利用border实现

#triangle-topleft {  
width: 0;  
height: 0;  
border-top: 100px solid red;  
border-right: 100px solid transparent;  

}

11.常见兼容性问题

1）不同浏览器的标签默认的外补丁和内补丁不同
问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
碰到频率:100%
解决方案：CSS里 {margin:0;padding:0;}
备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符来设置各个标签的内外补丁是。
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之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高

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

浏览器的默认行为是把inline元素间的空白字符（空格换行tab）渲染成一个空格，也就是"li"换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度。
解决方法：
1）可以将"li"代码全部写在一排
2）需要将"li"内的字符间隔设为默认。

  .wrap ul{letter-spacing: -5px;}

之后记得设置li内字符间隔

  .wrap ul li{letter-spacing: normal;}

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

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
初始化CSS样式主要是提高编码质量，如果不初始化整个页面做完很糟糕，重复的CSS样式很多。去掉标签的默认样式如：margin,padding，其他浏览器默认解析字体大小，字体设置

15.absolute的containing block计算方式跟正常流有什么不同？

block-level boxes一个 block-level element ('display' 属性值为 'block', 'list-item' 或是 ‘table’) 会生成一个 block-level box，这样的盒子会参与到 block-formatting context (一种布局的方式) 中。block formatting context在这种布局方式下，盒子们自所在的 containing block 顶部起一个接一个垂直排列，水平方向上撑满整个宽度 (除非内部的盒子自己内部建立了新的 BFC)。containing block一般来说，盒子本身就为其子孙建立了 containing block，用来计算内部盒子的位置、大小，
而对内部的盒子，具体采用哪个 containing block 来计算，需要分情况来讨论：根元素所在的 containing block 被称为 initial containing block，在我们常用的浏览器环境下，指的是原点与 canvas 重合，大小和 viewport 相同的矩形；对于 position 为 static 或 relative 的元素，其 containing block 为祖先元素中最近的 block container box 的 content box (除 margin, border, padding 外的区域)；
对于 position:fixed 的元素，其 containing block 由 viewport 建立；对于 position:absolute 的元素，则是先找到其祖先元素中最近的 position 属性非 static 的元素，然后判断：若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；否则则由这个祖先元素的 padding box 构成。如果都找不到，则为 initial containing block。

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

visible: 默认值。元素是可见的。
hidden: 元素是不可见的，相当于display：hidden；，但此时仍占用页面空间
collapse: 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。
inherit: 规定应该从父元素继承 visibility 属性的值。

对于一般的元素，它的表现跟display:hidden是一样的。但例外的是，如果这个元素是table相关的元素，例如table行，table group，table列，table column group，它的表现却跟display: none一样，也就是说，它们占用的空间也会释放。

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

display 属性规定元素应该生成的框的类型。 block 象块类型元素一样显示，none 缺省值。象行内元素类型一样显示， inline-block 象行内元素一样显示，但其内容象块类型元素一样显示，list-item 象块类型元素一样显示，并添加样式列表标记（display 还有很多其他值设置，读者自行查找）。
浮动或绝对定位的元素，只能是块元素或表格。

display，position，float流程图.png
display对应表.png

总的来说，可以把它看作是一个类似优先级的机制， "position:absolute" 和 "position:fixed" 优先级最高，有它存在的时候，浮动不起作用，'display' 的值也需要调整； 其次，元素的 'float' 特性的值不是 "none" 的时候或者它是根元素的时候，调整 'display' 的值； 最后，非根元素，并且非浮动元素，并且非绝对定位的元素，'display' 特性值同设置值。

Collapsing margins，即外边距折叠，指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距。其中所说的 margin 毗邻，可以归结为以下两点：
1)这两个或多个外边距没有被非空内容、padding、border 或 clear 分隔开。
2)这些 margin 都处于普通流中。

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

BFC（Block Formatting Context）直译为“块级格式化范围”。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。
一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。也可以说BFC就是一个作用范围。可以把它理解成是一个独立的容器，并且这个容器的里box的布局，与这个容器外的毫不相干。

19.CSS权重优先级是如何计算的？

第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表类，伪类和属性选择器，如.content，权值为10。
第四等：代表类型选择器和伪元素选择器，如div p，权值为1。
最后把这些值加起来，再就是当前元素的权重了。

权重算出来了，但是某个元素到底用哪个样式，还有3个规则,：
1)如果样式上加有!important标记，例如：
p{ color: gray !important}
那么始终采用这个标记的样式。
2）匹配的内容按照CSS权重排序，权重大的优先；
可以看到，CSS权重只是决定应用哪个样式的其中一个步骤，不过这个步骤是最复杂的，上面已经说过了。
3）如果权重也一样，按照它在CSS样式表里声明的顺序，后声明的优先

20.请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式

在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

清除浮动的方式：
1）父级div定义伪类:after。

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

2）父级div定义overflow:hidden。
3）父级div定义overflow:auto。
4）父级div也浮动，需要定义宽度

21.移动端的布局用过媒体查询吗？

媒体查询，就是根据页面分辨率设置不同的css样式，达到自适应的目的

  @media screen and (max-width: 760px) {
      body {
          background:#000;
      }
  }

22.使用 CSS 预处理器吗？

ass
less
stylus

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

1）加载性能
这个方面相关的 best practice 太多了，网上随便找一找就是一堆资料，比如不要用 import 啊，压缩啊等等，主要是从减少文件体积、减少阻塞加载、提高并发方面入手的，任何 hint 都逃不出这几个大方向。
2）选择器性能
可以参考 GitHub 的这个分享 https://speakerdeck.com/jonrohan/githubs-css-performance，但 selector 的对整体性能的影响可以忽略不计了，selector 的考察更多是规范化和可维护性、健壮性方面，很少有人在实际工作当中会把选择器性能作为重点关注对象的，但也像 GitHub 这个分享里面说的一样——知道总比不知道好。
3）渲染性能
渲染性能是 CSS 优化最重要的关注对象。页面渲染 junky 过多？看看是不是大量使用了 text-shadow？是不是开了字体抗锯齿？CSS 动画怎么实现的？合理利用 GPU 加速了吗？什么你用了 Flexible Box Model？有没有测试换个 layout 策略对 render performance 的影响？这个方面搜索一下 CSS render performance 或者 CSS animation performance 也会有一堆一堆的资料可供参考。
4）可维护性、健壮性
命名合理吗？结构层次设计是否足够健壮？对样式进行抽象复用了吗？优雅的 CSS 不仅仅会影响后期的维护成本，也会对加载性能等方面产生影响。这方面可以多找一些 OOCSS（不是说就要用 OOCSS，而是说多了解一下）等等不同 CSS Strategy 的信息，取长补短。

24.浏览器是怎样解析CSS选择器的？

从上到下，从左到右。

25.在网页中的应该使用奇数还是偶数的字体？为什么呢？

偶数字号相对更容易和 web 设计的其他部分构成比例关系。比如：当我用了 14 px 的正文字号，我可能会在一些地方用 14 × 0.5 = 7 px 的 margin，在另一些地方用 14 × 1.5 = 21 px 的标题字号。
Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px 时用的是小一号的点阵（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。

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

何时应当使用margin
需要在border外侧添加空白时。空白处不需要背景（色）时。上下相连的两个盒子之间的空白，需要相互抵消时。如15px+20px的margin，将得到20px的空白。
何时应当时用padding
需要在border内测添加空白时。空白处需要背景（色）时。上下相连的两个盒子之间的空白，希望等于两者之和时。如15px+20px的padding，将得到35px的空白。

27.抽离样式模块怎么写，说出思路，有无实践经验？

？？？？？？？？？

28.元素竖向的百分比设定是相对于容器的高度吗？

相对于父元素宽度的：
[max/min-]width、left、right、padding、margin 等；
相对于父元素高度的：
[max/min-]height、top、bottom 等；

当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如padding-top,padding-bottom,margin-top,margin-bottom等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

29.全屏滚动的原理是什么？用到了CSS的那些属性？

图片轮播原理，只不过图片宽高100%、超出隐藏、调整比例适应屏幕大小

30什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

页面的设计和开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、css media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。

响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。
响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。页面头部必须有meta声明viewport：

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

31.视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？）

这个太高端上链接：https://www.zhihu.com/question/20990029/answer/21436067

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

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
伪元素由双冒号和伪元素名称组成。双冒号是在css3规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如:first-line、:first-letter、:before、:after等。
这两个伪类下特有的属性 content ，用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容。注意这些添加不会改变文档内容，不会出现在 DOM 中，不可复制，仅仅是在 CSS 渲染层加入。

33.如何修改chrome记住密码后自动填充表单的黄色背景 ？

情景一：input文本框是纯色背景的
可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的黄色背景；如：

  input : -webkit-autofill { 
      -webkit-box-shadow : 0 0 0px 1000px white inset ; 
      border : 1px solid #CCC !important ; 
    } 

如果你有使用圆角等属性，或者发现输入框的长度高度不太对，可以对其进行调整，除了chrome默认定义的background-color，background-image，color不能用!important提升其优先级以外，其他的属性均可使用!important提升其优先级，如：

   input : -webkit-autofill { 
         -webkit-box-shadow : 0 0 0px 1000px white inset ; 
         border : 1px solid #CCC !important ; 
         height : 27px !important ; 
         line-height : 27px !important ; 
         border-radius : 0 4px 4px 0 ; 
         } 

34.你对line-height是如何理解的？
链接：http://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98line-height%E7%9A%84%E4%B8%80%E4%BA%9B%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%8F%8A%E5%BA%94%E7%94%A8/

35.设置元素浮动后，该元素的display值是多少？（自动变成display:block）

36.怎么让Chrome支持小于12px 的文字？

我们可以使用到 css3里的一个属性：transform:scale()
属性介绍可以戳这里：http://www.w3chtml.com/css3/properties/2d-transform/transform.html
这个属性前给-webkit-谷歌前缀，那么就可以控制字体的大小，代码如下：

    <style>
        p{font-size:10px;-webkit-transform:scale(0.8);}
           /*这里的数字0.8，是缩放比例，可以根据情况变化。*/
    </style>
    <p>中梦测试10px</p>

37.让页面里的字体变清晰，变细用CSS怎么做？

（-webkit-font-smoothing: antialiased;）

38.font-style属性可以让它赋值为“oblique” oblique是什么意思？

Italic是指斜体字，而Oblique是倾斜的文字，对于没有斜体的字体应该使用Oblique属性值来实现倾斜的文字效果.

39.position:fixed;在android下无效怎么处理？
头中加标签：

   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

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

多数显示器默认频率是60Hz,所以最小间隔为1/60=16.7ms

41.display:inline-block 什么时候会显示间隙？

移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing

42.overflow: scroll时不能平滑滚动的问题怎么处理？

1）阻止所有能导致页面滚动的事件。//scroll不能阻止，只能阻止mousewheel，鼠标拽滚动条就悲剧了；
2）bodyoverflow:hidden//win下右侧滚动条会消失导致页面横移，移动端阻止不了；
3）把滚动部分单独放在一个div里，和弹出部分同级，body和window同高。//所有涉及offset/scrollTop的方法都要修改。fix并且width100%的元素(比如微博顶栏)会压在内容区滚动条上；
4）弹出时算scrollTop，给内容区fix然后top移动到目前位置，同时body给一个overflow-y:scroll强撑出滚动条。

43,有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。

1）外层position: relative；
百分百自适应元素直接position: absolute; top: 100px; bottom: 0; left: 0
2）对外层的padding 和 box-sizing（可以忽略），第一个块的margin的修改，第二个填充块的height设为100%。

     body { height: 100%; padding: 0; margin: 0; }
    .outer { height: 100%; padding: 100px 0 0; 
             box-sizing: border-box ; }
    .A { height: 100px; margin: -100px 0 0; background: #BBE8F2; }
    .B { height: 100%; background: #D9C666; } 

44.png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

GIF最突出的地方就是他支持动画,同时GIF也是一种无损的图片格式,也就是说你在修改图片之后,图片质量并没有损失.再者GIF支持半透明(全透明或是全不透明).根据Google的说法,GIF适用于很小或是较简单的图片

PNG包括了PNG-8跟真彩色-PNG(PNG-24 or PNG-32).那PNG相对于GIF最大的优势是:通常体积会更小，支持alpha(全透明) ，但是我们知道PNG是不支持动画的.同时需要留意IE6是可以支持PNG-8的,但是在处理PNG-24的透明时会显示会灰色.相关例子可以参考sitepoint.通常图片保存为PNG-8会在同等质量下获得比GIF更小的体积,而全透明的图片我们现在只能使用PNG-24.但是请留意在保存图片在PNG-8与GIF中进行比较.因为定律并不一直正确.

JPG所能显示的颜色比GIF,PNG要多的多,同时得到很好的压缩,所以JPG很适用于保存数码照片.但是注意它是一种失真压缩,这意味着你每次修改图片都会造成像素失真.

小图片或网页基本元素(如按钮),考虑PNG-8或GIF.照片则考虑JPG.

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源

45.什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）
？？？？？

46.style标签写在body后与body前有什么区别？

写在head标签中利于浏览器逐步渲染（resources downloading->CSSOM+DOM->RenderTree(composite)->Layout->paint）。具体渲染过程请参考
http://blog.csdn.net/wozaixia...

写在body标签后由于浏览器以逐行方式对html文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）。