理解CSS|青训营笔记

71 阅读2分钟

一、CSS的层叠

在CSS(层叠样式表)中,层叠和优先级是用于确定样式如何应用于元素的概念。

层叠(Cascading)指的是当多个样式规则同时应用于同一元素时,它们之间的冲突和相互作用的过程。CSS样式表中的规则按照特定的层叠顺序应用于元素,以确定最终的样式。

二、设备像素、参考像素 屏幕像素和参考像素是与屏幕分辨率和网页布局相关的概念。

屏幕像素(Screen Pixels)指的是物理显示设备上的像素单元,它们是组成显示屏幕的最小可见点。屏幕像素通常以水平和垂直方向的像素数来表示,例如1920x1080表示宽度为1920像素,高度为1080像素。

参考像素(CSS Pixel)是在CSS中使用的虚拟单位,用于测量网页元素的大小。参考像素的概念是为了使网页在不同设备上显示一致,独立于设备的屏幕分辨率。参考像素通常与屏幕像素之间存在一定的关系,但可以根据设备的特性和缩放级别进行调整。

在大多数情况下,1个参考像素等于1个屏幕像素,这被称为"1:1像素比"。这意味着在普通显示器上,1个参考像素对应于1个屏幕像素。但是,在高分辨率(如Retina显示屏)或高缩放级别的设备上,1个参考像素可能对应于多个屏幕像素,以实现更高的细节和清晰度。 使用参考像素单位可以使网页在不同设备和屏幕分辨率下具有一致的布局和尺寸表现。通过灵活地使用百分比、em和rem等单位,可以实现响应式设计和自适应布局,以适应各种屏幕尺寸和设备类型。 image.png