CSS

CSS 单位

绝对单位包括 cm、mm、in、pc、pt、px。相对单位包括：em（相对父元素字体大小）、ex（字符 x 的高度）、ch（数字 0 的宽度）、rem（根元素字体大小）、lh（元素的 line-height）、vw、vh、vmin 和 vmax（相对视口尺寸）。

BFC

BFC（块级格式化上下文）是一块独立的布局环境，内部元素的布局与外部互不影响。BFC 中的盒子通常按垂直方向排列，同一 BFC 内相邻盒子的垂直外边距可能合并；计算 BFC 高度时，浮动子元素也会参与计算，BFC 区域不会与浮动盒子重叠。

常见触发方式：根元素、float 不为 none、position: absolute/fixed、overflow 不为 visible、inline-block、table-cell、flex 等。

常见用途：清除浮动、避免外边距合并、避免非浮动元素被浮动元素覆盖以及解决父元素高度塌陷。

IFC 是行内格式化上下文，GFC 是网格布局格式化上下文，FFC 是弹性格式化上下文。

垂直居中与隐藏元素

原笔记记录的垂直居中方式包括：使用表格布局，将父元素设置为 display: table、子元素设置为 display: table-cell，使用 transform: translateY(-50%)，使用绝对定位配合 margin: auto，以及使用 Flex 布局。

隐藏元素可以分为三类：

• 完全隐藏：display: none 或 hidden 属性，元素不再参与渲染。
• 视觉隐藏：opacity: 0、visibility: hidden，或将绝对定位元素移出可视范围；这些方式通常仍会占据空间或保留布局影响。
• 语义隐藏：使用 aria-hidden="true" 表示辅助技术不应读取该内容。

浮动与定位

浮动最初用于实现文字环绕图片的排版。浮动元素会脱离普通文档流，并彼此贴靠；一行空间不足时会换行。清除浮动可以使用父元素固定高度、clear、额外的清除元素、伪元素或 overflow: hidden 触发 BFC。原笔记指出，现代布局通常优先使用 Flex，浮动主要用于兼容旧场景。

position 的含义：static 是默认的普通流定位；relative 相对自身原位置偏移且不脱离文档流，也可作为绝对定位子元素的参考；absolute 相对最近的已定位祖先元素定位，没有该祖先时参考文档；fixed 相对浏览器窗口定位；sticky 在达到阈值前表现为相对定位，达到阈值后表现为固定定位。

层叠、计算与引入

CSS 属性的计算大致经历：确定声明值、解决层叠冲突、使用继承值、使用浏览器默认值。层叠判断主要看重要性、选择器专用性和源码顺序；原笔记给出的常见优先级顺序是行内样式高于 ID、类、高于标签，同权重时后声明的覆盖先声明的，!important 优先级最高但应少用。

CSS 可通过 link 外联、style 内联和 @import 引入。@import 是 CSS 规则，加载通常晚于外部样式表，存在兼容性和 DOM 控制方面的限制。

过渡、动画与盒模型

transition 是由属性、持续时间、时间函数和延迟组成的复合属性，可用 transitionend 监听完成。CSS 动画通过 @keyframes 声明关键帧，再用 animation 指定动画名和时间。

盒模型有 content-box 和 border-box。前者的 width 只表示内容宽度，实际宽度还要加上内边距和边框；后者的 width 包含内容、左右内边距和左右边框，计算更方便。

响应式与其他

calc() 可计算长度、数值、角度和频率。媒体查询可以写在 link 的 media 属性、@import 或 @media 规则中。