CSS 实现水平垂直居中的方法分场景，Flexbox 是最常用、最简单的方案，给父元素设置display: flex，搭配justify-content: center和align-items: center，子元素无需设置样式即可居中。行内元素可给父级设line-height等于高度 +text-align: center。块级元素还能用绝对定位：父级相对定位，子级top:50%、left:50%配合transform: translate(-50%,-50%)，无兼容性问题；也可绝对定位 +margin: auto，四边设为 0 实现居中。Grid 布局更简洁，父元素display: grid+place-items: center一行搞定。多种方案适配不同布局场景，日常开发优先用 Flex/Grid。
CSS 创建三角形无需图片，纯靠 border 属性实现，原理是利用边框的渲染特性。首先将元素的width和height都设为 0，消除内容区，此时边框会拼接成四个梯形。把其中三边的边框颜色设为transparent透明，只保留一边的颜色，梯形就会变成三角形。比如向上的三角形，设置border-left和border-right透明，border-bottom设为目标颜色。还能调整边框宽度改变三角形大小、角度，实现直角、等边、钝角等各种形状。这种方式性能极佳、代码简洁，是绘制气泡箭头、下拉图标等常用技巧。
四种定位核心区别是参考对象和是否脱离文档流。相对定位relative：相对自身原位置偏移，不脱标，保留原占位，常用于给子元素做定位父级。绝对定位absolute：相对最近的已定位父级偏移，脱标，不占空间，层级提升，常用于弹窗、角标。固定定位fixed：相对浏览器视口偏移，脱标，页面滚动时位置不变，用于固定导航、返回顶部。粘性定位sticky：结合相对 + 固定，相对父级偏移，滚动到阈值后固定，不脱标，用于吸顶导航。工作原理均通过top/left/right/bottom设置偏移，适配不同的固定、定位场景。
实现响应式设计是一套组合方案：首先设置<meta viewport>标签适配设备宽度，用rem/vw/%等相对单位替代固定像素。采用 Flexbox/Grid 弹性布局自动排列元素，配合@media媒体查询针对不同屏幕宽度切换样式。图像响应式布局核心是img { max-width: 100%; height: auto; }，让图片自适应父容器宽度，不溢出且保持比例。还能用<picture>元素 +srcset属性，根据设备加载不同尺寸的图片，优化加载速度。整体遵循移动端优先原则，从小屏开始编写样式，逐步适配大屏，一套代码适配所有终端。
Flexbox 是 CSS 一维弹性布局模型，专为便捷的排列、对齐、分配空间设计。给父元素设display: flex成为弹性容器，子元素自动成为弹性项，容器有主轴和交叉轴，可控制排列方向、对齐方式。flex-wrap是控制弹性项是否换行的核心属性：默认值nowrap，子元素超出容器宽度会被压缩，不换行；wrap是最常用值，子元素超出后自动换行，从上到下排列；wrap-reverse会反向换行，从下到上排列。该属性解决了弹性项溢出的问题，配合 Flex 实现自适应、响应式的单行 / 多行布局，是组件级布局的首选。
Grid 是 CSS二维布局系统，同时控制行和列，是专为网页整体布局设计的强大方案。通过display: grid声明容器，用grid-template-columns和grid-template-rows划分行列，可精准控制网格区域、间距、对齐。它和 Flexbox 的核心区别：Flex 是一维布局，只控制行或列，适合组件内部、线性排列的场景；Grid 是二维布局，同时管理行列，适合页面整体骨架、网格状布局。两者互补，Flex 擅长局部灵活排列，Grid 擅长整体规整布局，现代开发通常结合使用，Grid 做页面架构，Flex 做组件细节。
CSS 多列布局是原生的文本流式分列方案，无需借助浮动或定位，核心属性有三个：column-count设置列数，column-gap设置列间距，column-rule设置列之间的分隔线。工作原理是浏览器自动将容器内的内容（文本、图片、块级元素）平均分配到指定列数中，内容像报纸一样流式排列，自动平衡每列的高度，无需手动拆分内容。该布局专门适配文章、新闻、诗歌等长文本展示场景，代码简洁、自适应强，配合响应式可动态调整列数，完美替代传统的浮动多列布局。
三个属性是响应式布局的尺寸控制核心。max-width限制元素最大宽度，防止元素在大屏中过宽溢出，保证布局整洁，常用max-width: 1200px限制页面版心。min-width设置元素最小宽度，避免小屏设备压缩元素导致变形、文字重叠，保证基础可读性。aspect-ratio是 CSS 新增属性，直接固定元素宽高比（如16/9），无需用 padding-top 计算，让图片、视频、容器始终保持固定比例，不会因内容拉伸变形。三者结合使用，能精准控制元素尺寸，让布局在所有设备上都稳定、美观。
@media媒体查询是 CSS响应式设计的核心工具，作用是根据设备的特性，动态应用不同的样式规则。它能检测屏幕宽度、高度、分辨率、横竖屏、设备类型等参数，匹配条件时执行对应的 CSS 代码。开发中最常用屏幕宽度作为断点，区分移动端、平板、桌面端，比如小屏隐藏导航、大屏调整布局间距。主流采用移动端优先的写法，先编写基础样式，再用媒体查询逐步增强大屏效果。媒体查询让同一个网页能自动适配所有设备，无需开发多个版本，是现代 Web 开发的必备技术。
vertical-align控制行内元素、行内块元素、表格单元格的垂直对齐方式，仅对这三类元素生效，常用值：middle垂直居中、top顶部对齐、bottom底部对齐，常用于图片和文字对齐、图标文字居中。white-space控制元素内空白符和换行规则，核心值：nowrap强制文本不换行，超出部分溢出；pre保留代码中的空格和换行；pre-wrap保留空格且自动换行；normal默认合并空白。两个属性是处理文本、行内元素排版的关键，解决文字对齐、换行混乱等常见布局问题。
display: flex和display: inline-flex的内部弹性布局特性完全相同，唯一区别是容器自身的显示类型。display: flex声明的弹性容器是块级元素，独占一行，默认宽度占满父容器，和 div、p 等块级元素表现一致，是日常开发最常用的写法。display: inline-flex声明的弹性容器是行内块元素，不会独占一行，宽度由子元素内容决定，能和其他行内元素并排显示。简单说：flex 是块级弹性盒，inline-flex 是行内块弹性盒，根据容器是否需要独占一行选择即可。
