超级会员免费看
本文详细介绍了前端开发中的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
订阅专栏 解锁全文
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
