前端面试必备:史上最全CSS与布局知识点解析
需积分: 0 143 浏览量
更新于2024-08-03
1
收藏 121KB MD 举报
"前端面试题总结史上最全"
前端面试题涵盖了广泛的领域,以下是一些关键知识点的详细说明:
1. **CSS定位**
- `relative`: 相对定位,元素根据其正常位置移动,但不脱离文档流。
- `absolute`: 绝对定位,相对于最近的非静态定位祖先元素定位,脱离文档流。
- `fixed`: 固定定位,相对于浏览器窗口定位,无论页面滚动如何,元素位置保持不变。
- `sticky`: 粘性定位,当元素滚动到某个阈值时,它会固定在该位置,常见于侧边栏或顶部导航。
- `static`: 默认值,元素按照正常的文档流排列。
2. **CSS选择器权重**
- `!important`: 权重最高,10000
- 内联样式: 权重1000
- ID选择器: 权重100
- 类、属性选择器、伪类: 权重10
- 元素标签选择器: 权重1
- 通配符、子选择器、相邻选择器: 权重0
3. **DOM的重绘与回流**
- **重绘**: 当元素的视觉属性如颜色、背景、透明度等改变,不会影响布局,仅需要重新渲染。
- **回流**: 涉及到元素尺寸、位置的更改,需要重新构造DOM树并渲染,非常消耗性能。
- 减少重绘和回流的策略包括:
- 使用CSS属性简写
- 批量修改元素样式
- 避免使用`display:none`,改用`visibility`控制可见性
- 避免CSS表达式,可能导致回流
4. **浏览器渲染过程**
- 解析HTML,构建DOM树
- 解析CSS,生成CSS规则树
- 合并DOM树和CSS规则,形成渲染树
- 布局渲染树,计算元素尺寸和位置
- 绘制渲染树,生成像素信息
- GPU合成各层并显示在屏幕上
5. **Flex布局**
- `flex-direction`: 设置主轴方向,常用值有`row`(默认,水平方向)和`column`(垂直方向)。
- `flex-wrap`: 控制是否换行,`nowrap`(默认,不换行)、`wrap`(换行)和`wrap-reverse`(反向换行)。
- `justify-content`: 主轴上的对齐方式,如`flex-start`(左对齐)、`flex-end`(右对齐)、`center`(居中)等。
- `align-items`: 交叉轴上的对齐方式,类似`justify-content`。
- `align-self`: 允许单个元素覆盖其容器的`align-items`设置。
- 更多属性如`flex-grow`、`flex-shrink`、`flex-basis`等,用于控制元素在主轴上的伸缩行为。
这些知识点是前端开发者面试中常见的考察点,理解和掌握它们对于提升前端开发技能和面试成功至关重要。在实际项目中灵活运用这些概念,可以创建更高效、响应式的Web页面。
2023-07-06 上传
2022-04-08 上传
2023-02-21 上传
2021-12-15 上传
2021-12-15 上传
2021-06-06 上传
2023-10-11 上传
点击了解资源详情
清濑灰二258
- 粉丝: 0
- 资源: 1
最新资源
- 掌握Jive for Android SDK:示例应用的使用指南
- Python中的贝叶斯建模与概率编程指南
- 自动化NBA球员统计分析与电子邮件报告工具
- 下载安卓购物经理带源代码完整项目
- 图片压缩包中的内容解密
- C++基础教程视频-数据类型与运算符详解
- 探索Java中的曼德布罗图形绘制
- VTK9.3.0 64位SDK包发布,图像处理开发利器
- 自导向运载平台的行业设计方案解读
- 自定义 Datadog 代理检查:Python 实现与应用
- 基于Python实现的商品推荐系统源码与项目说明
- PMing繁体版字体下载,设计师必备素材
- 软件工程餐厅项目存储库:Java语言实践
- 康佳LED55R6000U电视机固件升级指南
- Sublime Text状态栏插件:ShowOpenFiles功能详解
- 一站式部署thinksns社交系统,小白轻松上手