前端技能树，面试复习第 5 天 - CSS 篇（4）：常用单位 | 移动端适配 | Flex | BFC

蟹蟹蟹风流

已于 2022-07-14 07:59:25 修改

阅读量251

点赞数 9

CC 4.0 BY-SA版权

分类专栏：前端面试复习笔记文章标签： css 前端面试移动端适配 Flex

于 2022-06-12 14:11:27 首次发布

本文链接：https://blog.youkuaiyun.com/ImagineCode/article/details/125244504

前端面试复习笔记专栏收录该内容

60 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文详细介绍了前端开发中的CSS布局单位，如px、em、rem、vw/vh的区别及使用场景，并讲解了移动端适配策略，包括如何根据设计稿进行适配。深入探讨了Flex布局的原理和应用场景，以及BFC（块格式化上下文）的理解和创建方法。此外，还讨论了CSS中的margin重叠问题和解决方案，以及position属性的不同定位方式。

1. 常见的 CSS 布局单位

CSS 像素：为 web 开发者提供，在 CSS 中使用的一个抽象单位；
物理像素：只与设备的硬件密度有关，任何设备的物理像素都是固定的。
em： 文本相对长度单位。相对于当前对象内文本的字体尺寸。如果当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(默认 16px)。(相对父元素的字体大小倍数)。
rem： rem 是 CSS3 新增的一个相对单位，相对于根元素（html 元素）的 font-size 的倍数。作用：利用 rem 可以实现简单的响应式布局，可以利用 html 元素中字体的大小与屏幕间的比值来设置 font-size 的值，以此实现当屏幕分辨率变化时让元素也随之变化。
vw/vh：是与视图窗口有关的单位，vw 表示相对于视图窗口的宽度，vh 表示相对于视图窗口高度，除了 vw 和 vh 外，还有 vmin