"面试题汇总"
面试题汇总涵盖了多个IT领域中的关键知识点,主要涉及HTML5、CSS、布局、BFC(Block Formatting Context)概念、数组排序以及移动端适配策略。
### HTML5与CSS
1. **HTML的语义化**:
- 语义化HTML意味着使用合适的标签来表示文档结构,比如`<header>`、`<nav>`、`<article>`、`<section>`等,这有助于提高代码的可读性和可维护性。
- 对于搜索引擎优化(SEO)也非常重要,因为搜索引擎能够更好地理解页面内容。
- 语义化HTML还能提高辅助技术(如屏幕阅读器)的可访问性,方便残障人士使用。
2. **布局技巧**:
- 左侧固定、右侧自适应的布局可以通过多种方式实现,包括使用CSS Flexbox、浮动元素或定位等方法。
- 使用Flexbox时,左侧元素设置固定宽度并设置`flex: 1`,右侧元素将自动填充剩余空间。
- 浮动元素和设置宽度的方法也能达到类似效果,但需要处理清除浮动的问题。
### BFC(块级格式化上下文)
- **BFC** 是浏览器中的一种渲染规则,它定义了元素内部如何布局,并防止其影响外部元素布局。
- **创建BFC** 的条件包括设置浮动、绝对定位、`overflow`属性以及某些`display`值。
- **BFC的作用** 包括解决`margin`重叠、创建自适应两栏布局和解决高度塌陷问题。例如,将父元素设为BFC可以避免因子元素浮动导致的父元素高度塌陷。
### 数组排序
- 在JavaScript中,可以使用`Array.prototype.sort()`方法对数组进行排序。
- 排序函数可以指定比较逻辑,返回值决定元素顺序。如果`a-b`为负,`a`排在`b`前;如果`b-a`为负,`b`排在`a`前。
### 移动端适配
1. **Flex布局**:这是一种灵活的响应式布局方式,允许元素根据容器大小动态调整。
2. **REM适配**:基于HTML根元素的字体大小(`font-size`)来设置元素尺寸,通过媒体查询改变根元素字体大小,从而实现不同设备的适配。
3. **VW/VH单位**:`vw`和`vh`是视口宽度和高度的百分比单位,可以根据屏幕尺寸变化自适应布局。
### 盒子模型
- **标准盒子模型** 中,元素的宽度(width)和高度(height)仅指内容区域,不包含内边距、边框和外边距。
- 内容区域之外的边距和边框会影响元素的总尺寸,这也是盒模型在布局计算中需要考虑的部分。
这些面试题涵盖了前端开发中的基础和进阶知识,对于准备面试或提升技能的开发者来说非常有价值。理解和掌握这些知识点,可以增强你在实际项目中的表现。