前端面试题-HTML&CSS：

前端开发面试知识点摘要：

HTML&CSS：

对 ****Web 标准的理解、浏览器内核差异、兼容性、hack、CSS 基本

功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移

动端适应

JavaScript：

数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、

模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引

擎、Nodejs、JSON、ajax 等。

其他：

HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、可

维护、SEO、UED、架构、职业生涯

 

 

在本题库中，涵盖了市场上主流的面试题，希望大家能够利用好时间

和精力掌握里面的内容。其中 ****REACT、兼容性方面属于进阶掌握部

分，可根据实际情况了解和掌握。

 

 

 

兼容性面试题整理（三年及以上经验被问及）

 

（一）html ****部分

 

1. H5 ****新标签在 IE9 以下的浏览器识别

①引入cdn地址

②引入本地html5文件

③自己写代码解决

引入：

html5shiv.js 下载地址

 

 

 

 

 

2. ****ul ****标签内外边距问题 ****ul ****标签在 ****IE6\IE7 ****中，有个默认的外边距，但是在 ****IE8

以上及其他浏览器中有个默认的内边距。****

解决方法：统一设置 ****ul ****的内外边距为 0

 

 

（二）CSS ****样式的兼容性

 

1. ****css ****的 ****hack ****问题：主要针对 ****IE ****的不同版本，不同的浏览器的写法不同

 

IE 的条件注释 hack：

 

 

 

2. 在使用绝对定位或者相对定位后，IE ****中设置 ****z-index 失效

原因是因为其元素依赖于父元素的 ****z-index，但是父元素默认为 ****0， 子高父低，

所以不会改变显示的顺序 ， 解决给父元素设置z-index

 

 

 

 

（三）Javascript ****兼容性

 

1.标准的事件绑定方法函数为 ****addEventListener，但 ****IE ****下是 ****attachEvent；

 

2.事件的捕获方式不一致，标准浏览器是由外至内，而 ****IE ****是由内到外，但是最

后的结果是将 ****IE ****的标准定为标准

 

3.window.event ****获取的。并且获取目标元素的方法也不同，标准浏览器是

event.target，而 ****IE ****下是 ****event.srcElement

 

4.在低版本的 ****IE ****中获取的日期处理函数的值不是与 ****1900 ****的差值，但是在高版

本的 ****IE ****中和标准浏览器保持了一致，获取的值也是与 ****1900 ****的差值。

比如：var year= new Date().getYear();

 

 

 

 

 

5.ajax ****的实现方式不同，这个我所理解的是获取 ****XMLHttpRequest ****的不同，

IE ****下是 ****activeXObject

 

6.IE ****中不能操作 ****tr ****的 ****innerHtml7.获得 ****DOM ****节点的父节点、子节点的方式不

同

其他浏览器：parentNode  parentNode.childNodes

 

IE：parentElement parentElement.childre

 

 

 

 

HTML5\CSS3 ****面试题整理

 

1.Doctype ****作用? ****严格模式与混杂模式-如何触发这两种模式，区分它们有何意

义?

（1）  声明位于文档中的最前面，处于    标签之前。

告知浏览器的解析器，用什么文档类型  规范来解析这个文档。

（2）严格模式的排版和  JS  运作模式是以该浏览器支持的最高标准运行。

（3）在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的

行为以防止站点无法工作。

（4）DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。

 

2.行内元素有哪些？块级元素有哪些？ ****空(void)元素有那些？

（1）CSS 规范规定，每个元素都有 display 属性，确定该元素的类型，每个

元素都有默认的 display 值，

比如 div 默认 display 属性值为“block”，成为“块级”元素；

span 默认 display 属性值为“inline”，是“行内”元素。

（2）行内元素有：a b span input select strong（强调的语气）

块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

（3）知名的空元素：

---

 

3.CSS ****盒子模型是什么？

 

盒子模型分为标准模型和 IE 盒子模型，其中

 

标准模型「默认：box-sizing: content-box」由四部分组成，从内到外依次是：

 

 

 

 

 

 

 

 

内容区域「content」：可以放置元素的区域如文本，图像等，一般设置宽高度

 

指的是这个内容的宽高；

 

内边距区域「padding」：内容与边框之间的距离

 

边框区域「border」：就是边框

 

外边距区域「margin」：由外边边距限制，用空白区域扩展边框区域，来分开

 

相邻的元素。

 

 

 

标准模型指的是设置 box-sizing 为 content-box 的盒子模型，一般 width，

 

height  指的是 content 的宽高。

 

而 IE 模 型 指 的 是 box-sizing 为 border-box 的 盒 子 模 型 。 宽 高 的 计 算 是

 

content+padding+border；

 

4.link ****和@import ****的区别是?

（1）link 属于 HTML 标签，而@import 是 CSS 提供的;

（2）页面被加载的时，link 会同时被加载，而@import 会等 CSS 被加载完

再加载;

（3）import 只在 IE5 以上才能识别，而 link 是 HTML 标签，无兼容问题;

（4）link 方式的样式的权重  高于@import 的权重.

 

5.CSS ****选择符有哪些？哪些属性可以继承？优先级算法如何计算？ ****CSS3 ****新增

伪类有那些？

1.id 选择器（  # myid）

2.类选择器（.myclassname）

3.标签选择器（div, h1, p）

4.相邻选择器（h1 + p）

5.子选择器（ul < li）

6.后代选择器（li a）

 

 

 

 

 

7.通配符选择器（  *  ）

8.属性选择器（a[rel = "external"]）

9.伪类选择器（a: hover, li: nth - child）

可继承：  font-size font-family color, UL LI DL DD DT;

不可继承  ：border padding margin width height ;

优先级就近原则，样式定义最近者为准;

载入样式以最后载入的定位为准;

优先级为:

!important >   id > class > tag

important  比内联优先级高

CSS3 新增伪类举例：

p:first-of-type  选择属于其父元素的首个  

  元素的每个  

  元素。

p:last-of-type   选择属于其父元素的最后  

  元素的每个  

  元素。

p:only-of-type   选择属于其父元素唯一的  

  元素的每个  

  元素。

p:only-child 选择属于其父元素的唯一子元素的每个  

  元素。

p:nth-child(2)   选择属于其父元素的第二个子元素的每个  

  元素。

:enabled、:disabled  控制表单控件的禁用状态。

:checked，单选框或复选框被选中。

 

6.如何居中 ****div,如何居中一个浮动元素?

给 div 设置一个宽度，然后添加 margin:0 auto 属性

div{width:200px;margin:0 auto;}

居中一个浮动元素

.div {

Width:500px ; height:300px;//高度可以不设

Margin: -150px 0 0 -250px;

position:relative;相对定位

background-color:pink;//方便看效果

left:50%;

top:50%;

}

 

 

 

 

 

7.浏览器的内核分别是什么? ****经常遇到的浏览器的兼容性有哪些？原因，解决方

法是什么，常用 ****hack ****的技巧 ****？

1. IE 浏览器的内核 Trident、Mozilla 的 Gecko、google 的 WebKit、Opera

内核 Presto；

2. 浏 览 器 默 认 的 margin 和 padding 不 同 。 解 决 方 案 是 加 一 个 全 局 的

*{margin:0;padding:0;}来统一。

IE6 双边距 bug:块属性标签 float 后，又有横行的 margin 情况下，在 ie6

显示 margin  比设置的大。

浮 动 ie 产 生 的 双 倍 距 离   #box{ float:left; width:10px; margin:0 0 0

100px;}

这种情况之下 IE 会产生 20px 的距离，解决方案是在 float 的标签样式控制

中加入  — —_display:inline;将其转化为行内属性。(_这个符号只有 ie6 会识别)

渐进识别的方式，从总体中逐渐排除局部。

3.首先，巧妙的使用“\9”这一标记，将 IE 游览器从所有情况中分离出来。

接着，再次使用“+”将 IE8 和 IE7、IE6 分离开来，这样 IE8 已经独立识别。

.bb{

background-color:#f1ee18;/所有识别/

.background-color:#00deff\9; /IE6、7、8 识别/

+background-color:#a200ff;/IE6、7 识别/

_background-color:#1e0bd1;/IE6 识别/

}

4.IE 下,可以使用获取常规属性的方法来获取自定义属性,

解决方法:统一通过 getAttribute()获取自定义属性.

IE 下,even 对象有 x,y 属性,但是没有 pageX,pageY 属性;

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

（条件注释）缺点是在 IE 浏览器下可能会增加额外的 HTTP 请求数。

Chrome  中文界面下默认会将小于  12px  的文本强制按照  12px  显示,

可通过加入  CSS  属性  -webkit-text-size-adjust: none;  解决.

超链接访问过后 hover 样式就不出现了  被点击访问过的超链接样式不在具

有 hover  和 active 了解决方法是改变 CSS 属性的排列顺序:

L-V-H-A :   a:link {} a:visited {} a:hover {} a:active {}

 

8.css ****属性那些有继承性？哪些没有？

有继承性的属性：color ,font-size,font-weight

 

 

 

 

 

没有继承性的属性：border,width,height

 

9.如果盒子都为浮动，父类会没有高度，如何解决

解决方法：(1)给父类设置相应的高度

(2)创建一个孩子对象，设置清除浮动

(3)  设置父类为 overflow：hidden

(4)用 before 和 after 动态添加

 

10.visibility ****和 ****display ****的隐藏有什么区别？

display 隐藏对象，会清空面积；visibility 隐藏对象还会占有以前的面积

 

11.伪类的写作顺序？

hover 必须在 link、visited 之后，active 必须在 hover 之后

Link,visited,hover,active

 

12.border ****和 ****outline ****的区别

1.outlinte 显示在 border 之外

2.border 会占像素，outline 没有面积

3.outline 低版本浏览器不支持

 

13.iframe ****的缺点？如何解决？

1.iframe 会影响页面的 onload（加载）事件

2.iframe 和主页共享连接池，而浏览器对相同域的链接有限制，所以影响页面

的并行加载

解决：使用时通过 js 动态调用给 iframe 添加 src 路径，可以避免以上两个问题

 

14.html5\CSS3 ****有哪些新特性、移除了那些元素？

1.语意化更好的内容元素，比如  article、footer、header、nav

表单控件，date、time、email、url

CSS3 实现圆角，阴影，对文字加特效，增加了更多的 CSS 选择器， 多背景

2.center，font,u，frame，frameset

 

15.你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? ****一个满屏

品 ****字布局 ****如何设计？

1.首先划分成头部、body、脚部......

 

 

 

 

 

实现效果图是最基本的工作，精确到 2px；

与设计师，产品经理的沟通和项目的参与

做好的页面结构，页面重构和用户体验

处理 hack，兼容、写出优美的代码格式

针对服务器的优化、支持 HTML5 标签。

*{padding: 0;margin: 0;} .header{width: 100%;height: 300px;background-color: red;} .left,.right{width: 50%;float: left;height: 300px;} .left{background-color: green;} .right{background-color: yellow;}

<div class="header">上

<div class="left">左

<div class="right">右

 

16.常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？

1.使用率较高的框架有 jQuery、YUI、Prototype、Dojo、Ext.js、Mootools

等。尤其是 jQuery，超过 91%。

轻量级框架有 Modernizr、underscore.js、backbone.js、Raphael.js 等。

（理解这些框架的功能、性能、设计原理）

2. WebStorm  、Eclipse、IETester、Photoshop、PhpStorm、MySQL。

3。 城市选择插件，汽车型号选择插件、幻灯片插件。弹出层。（写过开源程

序，加载器，js 引擎更好）

 

17.列出 ****display ****的值，说明他们的作用。position ****的值，relative ****和 ****absolute

定位原点是？

1.block  象块类型元素一样显示。

none  缺省值。向行内元素类型一样显示。

inline-block  象行内元素一样显示，但其内容象块类型元素一样显示。

list-item  象块类型元素一样显示，并添加样式列表标记。

2.absolute 生成绝对定位的元素，相对于 static 以外的父元素进行定位。

fixed  生成绝对定位的元素，相对于浏览器窗口进行定位。

 

 

 

 

 

relative 生成相对定位的元素，相对于其正常位置进行定位。

static   默认值。没有定位，忽略 top, bottom, left, right 声明。

inherit  规定从父元素继承  position  属性的值。

 

18.页面重构怎么操作？

编写  CSS、让页面结构更合理化，提升用户体验，实现良好的页面效果和提

升性能。

 

19. ****H5 ****新特性了解多少？

 

新增语义化标签:

 

  标记定义一个页面或一个区域的头部

 

  标记定义导航链接

 

  标记定义一个区域

 

  标记定义页面内容部分的侧边栏

 

  标记定义一篇文章

 

  标记定义文件中一个区块的相关信息

 

  标记定义一组媒体内容以及它们的标题