面试题整理

出处：http://www.cnblogs.com/0603ljx/p/4326674.html+其他

 1解释下浮动和它的工作原理。

浮动的框可以左右移动，直到它的外边缘遇到包含框或者另一个浮动框的边缘，所以才说浮动定位不属于正常的页面流。css的定位机制：普通流，浮动，绝对定位（position：fixed是position：absolute的一个子类）。文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，就会出现包含框不会自动伸缩高度。

2 请解释一下 relative、fixed、absolute 和 static 元素的区别

下面对应用的较多的relative和absolute与fixed进行分析：
relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式。
absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative，则其将相对body进行定位，
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。

各个属性值的定义：

1、static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

2、relative：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。

3、absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

4、fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

3请列举兼容性问题

1）IE盒模型bug,height==height+pading上下+border

声明<!DOCTYPE>
2）行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，ie6间距bug（类似第二种）

    问题症状：ie6里的间距比超过设置的间距
    解决方案：在display:block;后面加入display:inline;display:table;

    不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。
3）定义1px高度容器问题： 

设置较小高度标签（一般小于10px），在ie6，ie7，遨游中高度超出自己设置高度

这是因为在IE6中，系统默认的并非是Div有一个默认的高度，而是你没有解决一个隐藏的参数，font-size，因此必须单独定义这个Div的font-size，这样才能解决这个问题。

解决方法：

a 加overflow: hidden;zoom: 0.08;

b font-size: 0px;

4）为什么我的被点击访问过的超链接样式只有hover有效？

解决方法是改变CSS属性的排列顺序：Link,Visited,Hover,A！这非常重要！
5）左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距。

当浮动元素与非浮动元素相邻时，会出现3px像素空隙给非浮动的元素添加浮动属性，

或者设置vertical-align 属性为vertical-align:top bottom middle text-bottom都可以解决.

这个IE的3PX BUG也是经常出现的,解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;

5）Ie z-index问题 给父级添加position:relative

6）父div高度自适应失效问题： 

div嵌套时，当子div设置浮动属性后，其父div的高度自适应失效了。

解决方法：

1）向父div的末尾再插入一个额外的标签，<div style="clear:both;"></div>并令其清除浮动（clear）以撑大父容器。这种方法是W3C推荐的方法。

2） 在父div中使用overflow属性，并设置为hidden或者auto，可以在标准兼容浏览器中闭合（清除）浮动元素，为了兼容IE6可以写成如下形式：

overflow:hidden;zoom:1;

7）图片默认有间距
    问题症状：（图片排列会有默认间距，用float）
    解决方案：使用float属性为img布局

8）标签最低高度设置min-height不兼容

    问题症状：因为min-height本身就是一个不兼容的css属性，所以设置min-height时不能很好的被各个浏览器兼容
    解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：

{min-height:200px;

 height:auto !important; 

height:200px;

overflow:visible;}
    备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。

4讨论CSS hacks，条件引用或者其他。

 　 使用hacker 我可以吧浏览器分为3类：ie6 ；ie7和遨游；其他（ie8 chrome ff safari opera等）

　　ie6认识的hacker 是下划线_ 和星号 *
　　ie7 遨游认识的hacker是星号 * （包括上面问题6中的 !important也算是hack的一种。不过实用性较小。）
　　比如这样一个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。
　　因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。

　　ie6下页面min-width/height与max-width/height问题

   　min-height: 1400px;/* for ie7 firefox opera*/

　　max-height:none;/* for ie7 firefox opera*/
　　_height: 1400px;/* only for ie6*/

 条件引用

<!--[if IE 6]> 仅IE6可识别 <![endif]-->

5你如何对网站的文件和资源进行优化？

　　1）文件合并，如果有多个CSS文件，可以合并成一个，减少http请求次数（）

　　2）减少调用其他文件的数量即CSS sprites。如每个 background的图像都会产生1次HTTP请求，要改善这个状况，可以采用background-position属性来加载背景图，将需要频繁加载的多个图片合成为1个单独的图片

　　3）使用 CDN（内容分发网络） 托管

　　4）可对图片进行压缩，png的推荐https://tinypng.com/，不会失真，其他也可以压缩

　　5）可再结合H5新特性里的预加载

6描述下 “reset” CSS 文件的作用和使用它的好处。

reset.css能够重置浏览器的默认属性。不同的浏览器具有不同的样式，重置能够使其统一。比如说ie浏览器和FF浏览器下button显示不同，通过reset能够统一样式，显示相同的想过。但是很多reset是没必要的，多写了会增加浏览器在渲染页面的负担。

 7data-属性的作用是什么？

 　　data-是HTML5为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过 getAttribute方法获取