2025年前端面试题目 .pdfVIP

长风破浪会有时，直挂云帆济沧海。——李白

HTML、CSS部分

要点：对Web标准的理解、浏览器差异、CSS基本功：布局、盒子模型、选择器优先级及

使用、HTML5、CSS3、移动端开发技术等

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

（1）、!DOCTYPE声明位于文档中的最前面，处于html标签之前。告知浏览器

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

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

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

防止站点无法工作。

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

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

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

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

属性值为“inline”，是“行内”元素。

（2）行内元素有：abspanimginputselectstrong（强调的语气）块级元素有：divulollidl

dtddh1h2h3h4…p

（3）知名的空元素：brhrimginputlinkmeta

鲜为人知的是：areabasecolcommandembedkeygenparamsource

trackwbr

3.CSS的盒子模型？

（1）两种，IE盒子模型、标准W3C盒子模型；IE的content部分包含了border和pading;

（2）盒模型：内容(content)、填充(padding)、边界(margin)、边框(border).

4.link和@import的区别是?

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

（2）、页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加

载完再加载;

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

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

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

些？

*1.id选择器（#myid）

2.类选择器（.myclassname）

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

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

5.子选择器（ulli）

6.后代选择器（lia）

7.通配符选择器（*）

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

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

*可继承：font-sizefont-familycolor,ULLIDLDDDT;

*不可继承：borderpaddingmarginwidthheight;

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