前端面试问题汇总

1. 请简述常见的布局方案？

1. 比较可靠的基于浮动的布局。创建两列，分别一左一右浮动。如果想要创建三列，则可以在两列的基础上，选择其中主要的一列，在这个列中重复使用之前两列的方案，就形成三列布局了。
2. 简单的双栏布局也可以通过结合 BFC 和 浮动来实现。当相邻元素浮动的，而此时将自身 overflow 设置为 hidden 则会由于创建了一个新的 BFC，而出现双栏布局。
3. 对于方案2，倘若主元素不使用 overflow 而是只使用较大的 外边距 来容纳浮动元素，也能实现双栏布局。
4. 如果用 伸缩布局 来实现圣杯布局。则主要思路就是在页头、主体和页脚上实现竖直方向的三行布局，然后在主体容器内实现水平方向上三列布局。两侧可以通过宽度固定和 order 指定来使主体处于中间并保持伸缩。

2. 请简述针对不同需求下的居中方案？

1. 如果是行内元素 ———— inline-block + text-align
2. 如果是块级元素 ———— 对自身使用 margin: auto
3. 对于有垂直居中需求的 ———— 结合 absolute + transform
4. 就方案3，倘若子元素为定宽元素，则可以使用负的 margin 来代替 transform
5. 如果允许使用 flex ———— 则可以直接使用 justify-content or align-items 实现水平或垂直居中
6. 使用 table + margin 也能实现水平居中，table-cell + vertial-align 也能实现垂直居中。但很少接触

3. 如何实现垂直居中？

1. 见问题2的部分方案

4. CSS 如何实现动画？

1. 可以直接播放 GIF，但问题是 GIF 支持的颜色数量有限， GIF 并不具备 Alpha 透明度特性，更重要的是无法修改某些动画参数 ———— 比如持续时间、循环次数、是否暂停等
2. 当前可取方案：将动画中的所有帧全部拼合到一张 PNG 图片中，然后定义一段 关键帧 @keyframes loader 来挪动背景图，最后在 animation 中将 平滑特性 替换成 分步特性 steps。 steps 的参数则是关键帧的数量

5. CSS 如何实现页脚固定在视图底部？

1. 通过使用 flex 布局，使主体内容和页脚按竖直方向柱式排列，并用视口单位保证页面的最小高度一直占据浏览器的整个高度。再让主体内容自动伸展并占满所有的可用空间。则页脚固定。

6. 盒子模型是什么？

1. 盒子模型是 CSS 的基石之一，它指定元素如何显示以及如何相互交互。页面上的每个元素被看做一个矩形框，这个框由元素的内容、内边距、边框和外边距组成。

• 内边距环绕内容区域周围，一般情况下背景会应用于内容区和内边距组成的区域，于是内边距给主内容周围创建一个隔离带，让背景和正文分明。
• 添加边框则会在内边距和外边距之间加一条线，可以应用多种样式
• 外边距则是透明的，一般用来控制元素之间的间隔

格外注意几点：早期 IE 的盒子模型（width 属性为内容、内边距和边框宽度的总和）、垂直外边距叠加机制（当两个盒子的垂直外边距相遇时，两者的间隔高度只取决于其中的外边距高度的较大者）

7. 如何清除浮动？ 不同的方法有什么利弊？

1. 浮动元素之所以让容器塌陷，是因为它脱离了文档流
2. 框的文本内容总是会受到浮动元素的影响，从而形成 文字绕排。如果使用 clear 属性去清除浮动，则会撑开容器。而清除浮动的方法无论是添加 div 空标签还是借助伪元素，其实都是为了给页面添加不可见的内容，并给它设置清除浮动从而撑开本来塌陷的容器元素。
3. 给容器设置 BFC 例如添加 overflow 的 hidden 也能清除浮动，但是弊端是会在某些情况下产生滚动条或内容截断的问题

8. 选择器的优先级如何确定？

1.选择器的特殊性分为四个等级： abcd

• 行内样式代表 a
• b 代表 ID 选择器的总数
• c 代表类、伪类和属性选择器的数量
• d 代表类型选择器和伪元素选择器的数量

于是，行内样式总是最优先，ID 选择器比没有 ID 选择器的规则特殊，具有 类 选择器的比只有 类型 选择器的规则特殊

9. HTML5 新增了哪些标签和特性？ 如何理解语义化？

1. 新增的标签有

• header
• footer
• nav
• article
• aside
• section
• hgroup
• address
• figure + figcaption

1. 新增的特性有

• 为块级元素添加链接
• 新增了几个输入类型 ———— email、number、url、tel、search、pattern、color、date、month、week、time、datetime、range等
• 关于表单输入的一些属性 ———— placeholder、required、autofocus、autocomplate、list

10. 请简述 flex 弹性布局的优势和布局规则？

1. 方便地垂直居中内容
2. 改变元素的视觉次序
3. 在盒子里自动插入空白以及对齐元素，自动对齐元素之间的空白
4. 布局规则：

• 首先给父容器 display 属性指定为 flex ，这会创建一个伸缩格式上下文
• 然后确定容器的主轴方向 flex-direction 以及排列的时候是否断行 flex-warp。 flex-flow 是以上两个属性的缩写方式
• 父容器的子元素被称之为 flex 项目，它们的对齐关系首先由父容器来管理。一个是主轴方向上的对齐关系 justify-content，另一个是和主轴相对的交叉轴上的对齐关系 align-items。在主轴上指定所有子元素的对齐端点是处于首端、中端还是末端，又或者是均等（均等关系又分相互间的距离均等和外边距均等）。而在交叉轴上同样可以指定对齐线的位置是处于首端、中端或者末端，又或者全部伸展还是按内容基线。
• 对于子元素，即项目。order 属性可以决定项目排列次序。flex-grow 定义项目的放大比例，flex-shrink 定义项目的缩小比例。可以说 order 体现了项目间的顺序竞争，flex-grow 和 flex-shrink 体现了项目间的扩张与让步。
• 在给项目分配多余的空间之前，项目占据的主轴空间则由 flex-basis 来声明。默认为 auto
• flex 属性则是 flex-grow、flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto
• 最后，align-self 提供了针对个别项目在交叉轴上对齐方式的覆写能力。用来处理排版中的特例

11. px/em/rem的区别？

12. sass 和 less 的区别有哪些？

13. 浏览器如何优化动画？

14. 动画为什么首先推荐使用 CSS ？

15. 如何理解 BFC（Block Formatting Context) 块格式上下文?

1. BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。

2. 触发方式包括：

• 根元素
• float 的值不为 none
• overflow 的值不会 visible
• display 的值为 inline-block、table-cell、table-caption
• position 的值为 absolute 或者 fiexd
• display：table 也认为可以生成 BFC，其实这里的主要原因在于 table 会默认生成一个匿名的 table-cell，正是这个匿名的 table-ccel 生成了BFC

3. BFC 的约束规则

• 内部的盒子会在垂直方向上一个接一个的放置
• 垂直方向上的距离由 margin 折叠
• 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明 BFC 中子元素不会超出他的包含块，而 position 为 absolute 的元素可以超出他的包含块边界）

涉及内容：为父元素设置overflow：hidden 或浮动父元素，这就会包含子浮动元素，解决高度塌陷。这就是因为添加 overflow 的 hidden 属性自动生成了 BFC 的原理

16. animation 和 transiton 有哪些值得注意的属性？

17. 有哪些比较重要的 meta 属性？

18. 如何使用 CSS 画出一个三角形？

19. dispaly: none; 和 visibilty: hidden; 的区别？

20. CSS 中 link 和 @import 的区别是什么？

21. 请简述 float 和 absolute 的异同？

22. 请介绍一下 box-sizing 的属性？

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

24. position的值， relative 和 absolute 分别是相对于谁进行定位的？

25. CSS3有哪些新特性？

26. Doctype 作用? 严格模式与混杂模式如何区分？它们有何意义?

27. HTML 与 XHTML——二者有什么区别?

28. 常见兼容性问题？

29. 浮动元素引起的问题和解决办法？

30. DOM 操作——怎样添加、移除、移动、复制、创建和查找节点?

31. html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

32. iframe的优缺点？

33. 请说说移动端性能优化?

34. 如何实现高度相等的列?

1. 给每个框设置超级大的底部内边距，然后用数值相似的负的外边距来消除这个高度。这会导致每个列溢出容器元素，如果将容器的 overflow 属性设置为 hidden。则列就会在最高点被裁剪。于是得到高度相等的列。

35. 简述 CSS 定位? 哪些是可视化模型，哪些是定位模型？

1. CSS 中有三种基本的定位机制： 普通流（相对定位并不脱离普通流）、浮动和绝对定位。除非专门指定，否则所有的框都在普通流中定位。

• 注意元素分为块级元素和行内元素，行内元素的高度只取决于足以容纳它包含的所有行内框。增加行内框的高度只有通过设置行高
• 某些情况下会产生匿名块框或匿名行框
• 相对定位是相对于原来的起点进行移动,原来的位置保留
• 绝对定位脱离普通流，不占据位置，是相对于最近的已经定位的祖先元素。如果不存在已定位的祖先元素，那么就相对于初始包含块
• 固定定位是绝对定位的一种，差异在于固定元素的包含块是视口
• 浮动的框脱离普通流，不占据位置，而是可以左右移动，直到它的边缘碰到包含框或另一个浮动框的边缘