CSS

一、问题本质 在 Retina 等高分辨率屏幕上，设备像素比（Device Pixel Ratio，DPR）通常为 2 或 3。这意味着： CSS 像素是逻辑像素 物理像素 = CSS像素 × DPR

在计算机图形中，由于像素是屏幕显示的最小单位，直接绘制0.5px的线在不同设备和技术中表现不同。以下是几种常见场景的实现方法： 一、CSS 实现方法 1. 使用 transform: scale()

实现三角形的几种方法 在 CSS 中，实现三角形主要利用 边框（border）  的特性。以下是各种实现方法： 方法一：使用 Border 边框（最常用） 这是最经典的方法，通过将元素宽高设为 0，然

position 常用属性 position 属性用于指定元素的定位方式，它有以下几个常用值： 1. static（静态定位）  - 默认值 元素按照正常的文档流进行排列 忽略 top、bottom、

什么是 Margin 重叠？ Margin 重叠（Margin Collapse）  是指当两个或多个垂直方向（上下）的块级元素的 margin 相遇时，它们会合并成一个 margin，其大小为两者中

什么是BFC？ BFC（Block Formatting Context）即块级格式化上下文，是CSS渲染页面时的一种布局环境。它是一个独立的渲染区域，规定了内部的块级元素如何布局，并且与外部环境隔离

Flexbox（弹性盒子布局）是CSS3中一种一维布局模型，专门设计用来更高效地处理容器内项目的对齐、方向和顺序，即使它们的大小未知或动态变化。 核心概念 1. 容器与项目 Flex容器：设置 dis

在CSS中实现水平垂直居中有多种方法，以下是常用的实现方式： 1. Flexbox 布局（最推荐） 2. Grid 布局 3. 绝对定位 + Transform（元素宽高未知） 4. 绝对定位 + M

三栏布局是经典的网页布局模式，通常指左右两侧固定宽度，中间自适应宽度的布局。以下是各种实现方案的详细解析。 📋 布局需求说明 目标：左右固定200px，中间自适应，三栏等高，中间内容优先加载。 一、经

两栏布局是 Web 开发中最经典的布局之一，通常指左侧固定宽度，右侧自适应的布局。以下是各种实现方式的详细解析： 📋 布局需求说明 目标：左侧宽度 200px，右侧填满剩余空间，两栏等高。 一、浮动布

这三个是 CSS 中最常用的单位，理解它们的区别对于构建响应式、可访问的网站至关重要。 一、核心概念速览 特性 px（像素） em（相对父元素） rem（相对根元素） 参照基准 屏幕物理像素 父元素的

CSS 单位主要分为以下几类，每种单位都有其特定的使用场景： 一、绝对单位（固定大小） 这些单位在物理世界中是固定的，与设备无关。 单位 名称 说明 使用场景 px 像素 屏幕上的一个像素点 最常用，

这是一个非常经典的前端问题。<link> 和 @import 都是用来引入外部 CSS 文件的方法，但它们在加载机制、性能、兼容性和控制力上有显著区别。 简单来说：现代 Web 开发中，强烈推荐使用 

Sass 和 Less 都是流行的 CSS 预处理器，它们扩展了 CSS 的功能，使开发者能够更高效、更结构化地编写样式代码。它们都提供了 CSS 本身不具备的特性，如变量、嵌套、混合、函数、运算等，

一、单行文本溢出处理 1. 基础方案 - 使用 text-overflow 2. 完整示例 3. 自定义省略符 二、多行文本溢出处理 1. 标准方案 - 使用 -webkit-line-clamp（推

一、CSS 隐藏方式 1. display: none ⭐️ 最常用 特点： 元素完全从渲染树中移除，不占据空间 不会触发点击等事件 会引起重排和重绘（性能影响较大） 屏幕阅读器无法读取，对可访问性不

一、主要属性值分类 1. 基本显示类型 block（块级元素） 独占一行，宽度默认占满父容器 可设置宽高、内外边距 如：div、p、h1、section inline（行内元素） 不独占一行，与其他行

1. 可继承属性（Inherited Properties） 子元素会继承父元素的这些属性值，除非子元素显式设置不同的值。 文本相关 列表相关 表格相关 其他 2. 不可继承属性（Non-inheri

1. CSS选择器类型 基础选择器 组合选择器 伪类选择器 伪元素选择器 2. 选择器优先级（特异性）计算规则 优先级权重系统 使用 (a, b, c, d) 四位数表示： a：行内样式（style属

CSS 盒模型是 CSS 布局的基础，它定义了每个元素在页面中的占位方式。盒模型包含以下几个核心部分： 1. 标准盒模型的组成部分 内容区（Content） 显示文本、图像等实际内容 通过 width