面试题整理

出处：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：生成绝对定位的元素，相对于浏览器窗口进行定位。

各个属性值的定义：

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

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

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

四、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方法获取