前端必备面试题

HTML

1. HTML 和 XHTML 的差别

• XHTML 元素必须被正确的进行其那套
• XHTML 元素必须被关闭
• 标签名必须用小写字母
• XHTML 文档必须拥有根元素

2. 面试题：请阐述 table 的缺点

• a. 太深的嵌套，例如 table > tr > td > h3，会导致搜索引擎读取困难，增加了冗余代码量。
• b. 灵活性差，如要设置 tr 的 border 属性，必须通过 td。
• c. 代码臃肿，当在 table 中套用 table 时，代码阅读会显得混乱。
• d. colspan 与 rowspan 的使用可导致文档顺序混乱。
• e. 不够语义化。

3. iframe 的作用？

用法

• iframe 是用来在网页中插入第三方页面，早期主要用于导航栏等相同部分，避免重复下载。

优点

• 便于修改，模拟分离，如在信息管理系统中使用。
• 现在基本不推荐使用，除非有特殊需求。

缺点

• iframe 创建比 DOM 元素慢 1-2 个数量级。
• iframe 会阻塞页面加载，导致用户体验下降。
• 对 SEO 不友好，可以考虑使用动态语言的 Include 机制或 AJAX 填充内容。

4. 请简述 src 和 href 的区别

• 当浏览器遇到 href，会并行下载资源而不会停止当前文档的处理。
• 当浏览器遇到 src，会暂停其他资源的下载和处理，直至该资源加载或执行完毕。

CSS

1. 什么是盒模型？

• 标准盒模型：box-sizing: content-box。组成：内容 + 边框 + 内边距 + 外边距。

2. CSS 中的选择器都有哪些？

• id 选择器（#box）
• 类选择器（.one）
• 标签选择器（div）
• 后代选择器（#box div）
• 子选择器（.one > one_1）
• 相邻同胞选择器（.one + .two）
• 群组选择器（div,p）
• 伪类选择器：:link, :visited, :active, :hover, :focus, :first-child
• 伪元素选择器：:first-letter, :first-line, :before, :after
• 属性选择器：[attribute], [attribute=value], [attribute~=value], [attribute|=value]

3. 选择器的权重问题

• !important > 行内样式 > id 选择器 > 类选择器 > 标签选择器 > 通配符 > 继承。

5. 常见的浏览器内核有哪些？

• Trident：如 IE, 360, 搜狗浏览器。
• Gecko：如 Netscape6, Firefox。
• Presto：Opera7 及以上。
• Webkit：如 Safari, Chrome。

6. 行内元素和块状元素的区别？行内快元素的兼容性使用？（IE8以下）

• 行内元素：会在水平方向排列，不能包含块级元素，width无效，height无效（可以设置line-height），margin上下无效，padding上下无效。

• 块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。

• 兼容性：display:inline-block; display:inline; zoom:1;

7. 页面导入样式时，使用link和@import有什么区别？

1. link属于HTML标签，除了加载CSS外，还能用于定义RSS，定义rel连接属性等作用；而@import是CSS提供，只能加载CSS;
2. 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载；
3. @import是CSS2.1提出的，只在IE5以上才能被识别，而link是HTML标签，无兼容问题；

8. display有哪些值？说明它们的作用。

• block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
• none 缺省值。像行内元素类型一样显示。
• inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
• inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。
• list-item 像块类型元素一样显示，并添加样式列表标记。
• table 此元素会作为块级表格来显示。
• inherit 规定应该从父元素继承display属性的值。

9. 标签上title与alt属性的区别是什么？

• Alt 当图片不显示时，用文字代表，有助于浏览器优化，主要用于图片的文字说明。
• Title 为该属性提供信息。

10. 样式重置经常会重置哪些标签？

i, em { font-style: normal; }
li { list-style: none; }
a { text-decoration: none; color: #000; }
p, h1, body, ul, ol, li, dl, dt, dd { margin: 0; padding: 0; }
input { outline: 0; margin: 0; }
input[type=button], input[type=submit], input[type=reset] { box-sizing: content-box; }
b, strong { font-weight: normal; }

11. 如何解决浮动塌陷问题？

1. 给父元素添加高度。
2. clear：both;
3. 使用BFC的特性：
   • overflow：hidden;
   • 给父元素添加float：left/right;
   • position: fixed;
   • display: table/table-cell;

12. 什么是BFC？

BFC（块格式化上下文）的生成条件:

• float的值不为none;
• overflow的值不为visible;
• position的值为fixed / absolute;
• display的值为table-cell / table-caption / inline-block / flex / inline-flex

13. position属性的选项

• absolute: 绝对定位；相对于页面的左上角；相对于脱离了文档流的父元素定位。
• relative: 相对定位；相对于原位置的左上角定位，并且不会让出原来的位置。
• fixed: 固定定位；相对于窗口的左上角定位。
• sticky: 粘性定位；滚动到指定的某个位置后，会固定再指定的位置。

14. 如何让一个元素出现再页面的正中间？

1. 使用定位：

   css

   position: absolute;
   top: 0; left: 0; right: 0; bottom: 0;
   margin: auto;
   

2. 使用弹性盒子：

   css

   .father {
       display: flex;
       justify-content: center;
       align-items: center;
   }
   

3. 使用定位：

   css

   position: fixed;
   left: 50%;
   top: 50%;
   margin-top: -高度的一半;
   margin-left: -宽度的一半;
   

15. 想要让一个元素，宽度100%，高度100%显示

方法一：

css

html, body {
    height: 100%;
}
.box {
    width: 100%;
    height: 100%;
    background-color: pink;
}

方法二：

css

.box {
    width: 100vw;
    height: 100vh;
    background-color: pink;
}

16. CSS3新增了哪些内容？

• 圆角
• 背景渐变
• 背景裁切
• 背景定位
• 2D（旋转，平移，缩放）
• 3D（旋转，平移，缩放）
• 动画效果
• 过渡
• 文字阴影和盒子阴影
• 自定义引入字体
• 选择器（如属性选择器）
• 媒体查询