Vue.js 初级面试题：前端基础与布局技巧

"该文档是关于Vue.js前端面试题的初级版，涵盖了JavaScript基础、HTML、CSS以及Vue.js的相关知识，旨在帮助准备Vue.js初级面试的求职者进行复习。" 在前端开发中，理解HTML、CSS和JavaScript的基础概念至关重要。其中，块级元素和行内块元素是CSS布局中的两种基本元素类型： 1. 块级元素（如`<div>`）： - 通常占据整行宽度，自动换行。 - 可以设置宽、高、内边距和外边距。 - 通过`display: block`定义。 2. 行内块元素（如`<span>`或使用`display: inline-block`的元素）： - 结合了块级元素的宽高设置与行内元素的不换行特性。 - 可以设置垂直对齐属性`vertical-align`。 - 占据自身内容区域，但不影响周围元素的布局。 转换方法： - 将块级元素转换为行内块元素：`display: inline-block` - 将行内块元素转换为块级元素：`display: block` 实现元素水平垂直居中布局有多种方法： 1. 使用相对定位和绝对定位： - 父级：`position: relative` - 子级：`position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)` 2. 使用Flex布局： - 父级：`display: flex; justify-content: center; align-items: center` 3. 使用表格布局： - 父级：`width: 100%; height: fixed; display: table` - 子级：`display: table-cell; vertical-align: middle; text-align: center` 盒模型分为标准盒模型（W3C）和怪异盒模型（IE）： - 标准盒模型：元素的总宽度 = 内容宽度 + 左右内边距 + 左右边框 - 怪异盒模型：元素的总宽度 = 内容宽度 + 左右外边距 + 左右边框 通过`box-sizing: border-box`或`content-box`可以切换盒模型。 `position`属性中的`absolute`和`fixed`： - `absolute`：相对于最近的非静态定位祖先元素定位。 - `fixed`：相对于浏览器窗口定位，不论页面滚动，元素位置始终不变。 模拟`position: sticky`效果： - 首先让元素随滚动条移动，然后监听滚动事件，当达到特定位置时，将元素的`position`设置为`fixed`，使其固定在视口上。 清除浮动主要有以下几种方式： 1. `overflow: hidden`：隐藏父级元素溢出的内容，创建新BFC（块格式化上下文）。 2. `overflow: auto`：同上，但会显示滚动条。 3. 添加空div：`clear: both`，让其清除前后浮动元素的影响。 4. 直接在后续元素上设置`clear: both`。 事件冒泡和捕获： - 冒泡：事件从最深的节点开始，逐级向上层元素传播事件。 - 捕获：事件从最外层元素开始，向内层元素传播事件。 - 阻止冒泡：在事件处理函数中使用`event.stopPropagation()`。 - 事件代理：利用事件冒泡原理，在父元素上绑定事件，处理子元素的事件，减少内存消耗，提高性能。