前端面试题整理

HTML

1、块元素和行元素

• 块元素：独占一行，并且有自动填满父元素，可以设置margin和pading以及高度和宽度。 
• 行元素：不会独占一行，width和height会失效，并且在垂直方向的padding和margin会失 效。

2、常见兼容性问题？

• png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8。
• 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一，但是全局效率很低。

一般是如下这样解决：

body,ul,li,ol,dl,dt,dd,form,input,h1,h2,h3,h4,h5,h6,p{
margin:0;
padding:0;
}

 

• IE下,event对象有x,y属性,但是没有pageX,pageY属性
• Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.

CSS

1、CSS选择器优先级

• !important优先级最高，js也无法修改。
• 权值相同的时候，靠近元素的样式优先级搞，顺序为内联样式 > 内部样式表 > 外部样式表。

2、画一条0.5px的线

• 采用meta viewport的方式。
• 采用 border-image的方式。
• 采用transform: scale()的方式。

3、transition和animation的区别 

• Animation和transition大部分属性是相同的，它们都是随时间改变元素的属性值，
• 它们的主要区别是transition需要触发一个事件才能改变属性，并且transition为2帧，从from .... to。
• animation不需要触发任何事件的情况下才会随时间改变属性值，而animation可以一帧一帧的。

4、link标签和import标签的区别

• link属于html标签，而@import是css提供的
• 页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。
• link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。

5、多行元素的文本省略号

 display: -webkit-box
-webkit-box-orient:vertical
-web-line-clamp:3
overflow:hidden

6、visibility=hidden, opacity=0，display:none

• opacity=