EasyExcel单元格样式不生效？从POI共享模型到拦截器全解析
2026/9/24 21:18:07
刚搜了一圈大家最近的CSS热词，我发现一个很有意思的现象：css body居中、css字体、css删除线、css选择器、css 字体渐变、css 变形 梯形、css动态相册纯代码、css涟漪光圈扩散、原子性css、css houdini……这个列表比很多教程目录都真实。它暴露了一个很多人不愿意面对的事实：CSS不是一门随便两天就能学完的"简单语言"，而是一套覆盖排版、视觉、交互甚至工程组织的完整体系。
很多人对CSS的认知停留在"写个样式、调个颜色"这种层面，真到了做完整页面的时候才发现处处是坑：居中搞不定、删除线不会画、背景图一缩放就乱、鼠标移入效果要么生硬要么没反应。这篇文章我就顺着这些高频搜索词，把大家真正关心的CSS问题逐个拆开讲清楚。不绕弯子，直接给结论、给代码、给踩坑经验，适合刚入门的新人，也能给写过一阵子但总觉得不扎实的人一些思路。
1. 从热搜词看大家学CSS最关心什么
1.1 热搜背后的三类真实需求
把这一批热词归归类，能明显看出几条线。第一类是入门基础类：css选择器、html➕css➕js基础语法、css网页文档样式、第1关：初识css：丰富多彩的网页样式、第2关：css样式引入方式。这类词说明很多人还在打地基阶段，对页面文档的结构和样式规则还没完全串起来。
第二类是高频问题类：css body居中、怎么调整css容器里的文本位置、css字体、css 删除线、css平移。这些问题有一个共同点——看起来都很简单，但实际写的时候总会碰到"为什么我设了margin却还是没居中""为什么这个字体在手机上不生效"这类意外。
第三类是视觉进阶与实战类：css 变形 梯形、css 鼠标移入事件、css动态相册纯代码、css涟漪光圈扩散、css第四天综合案例banner效果背景图、html js css商品详情。能搜这些词的人，已经不再满足于"能看"，而是想让页面有动效、有层次、有真实商业场景的表现力。
还有两个偏工程思路的词比较显眼：原子性css和css houdini。这说明一部分人开始思考CSS在大型项目里的组织方式，以及CSS这门语言本身的底层能力边界。这已经是进阶方向的探索了。
1.2 为什么这些点最容易踩坑
很多CSS问题之所以反复出现，根源是CSS的"层叠"（Cascade）特性给了开发者太多选择空间——同一个效果可能有五六种写法，但没有哪一种在所有场景下都是最优解。
比如居中，margin: 0 auto、text-align: center、flex、grid、position + transform都能做，选错了就出现"为什么这个方法在那个环境里不奏效"。再比如选择器权重，背口诀（内联>ID>类>标签）人人都行，真遇到!important和深层嵌套的时候就乱了。
还有一个容易被忽略的原因：很多人是跳着学CSS的。今天搜个居中，明天搜个渐变，从来没有人把盒模型、文档流、层叠上下文这些底层概念串一遍。碎片化输入导致碎片化输出，代码自然写不扎实。所以下面这几个章节，我尽量把"热词背后的原理"一起讲，而不是给个代码片段就完事。
2. 样式引入与选择器：问题最多的地基
2.1 三种样式引入方式到底怎么选
CSS真正进入网页，有三条路径。最推荐的是外部样式表，也就是通过<link rel="stylesheet" href="style.css">引入。好处是样式和结构分离，多个页面能共用一份文件，浏览器也会缓存它，第二次访问速度会快不少。项目开发中，只要不是特别简单的单页，我基本都用这种方式。
内部样式表是写在当前页面<style>标签里的。适合单页demo、邮件模板、或者某个页面独有的样式。缺点是没法复用，页面多了之后<head>会变得很臃肿，维护成本直线上升。
内联样式直接写在元素上，比如<div style="color: red">。它有一个非常关键的特性：优先级最高，能覆盖外部和内部样式。所以生产环境里要谨慎使用——一旦内联样式铺开，后续想用CSS统一改样式会非常被动。它真正适合的场景是JS动态设置某个临时样式，或者做邮件模板（很多邮件客户端不认<style>标签）。
/* 外部样式表是日常主力 */ <link rel="stylesheet" href="css/main.css"> <!-- 内部样式：单页演示可以用 --> <style> .page-title { color: #333; } </style> <!-- 内联样式：动态场景慎用 --> <div style="margin-top: 16px;"></div>顺带提一个很多人不知道的点：@import也可以引入外部CSS，但它和<link>有本质区别。@import必须放在样式表最前面，而且浏览器要等它下载完才能继续渲染后面的样式，会拖慢首屏速度。现在的前端工程化体系里基本都用<link>，@import只在一些特殊场景（比如CSS文件内部按模块组织）才会出现。刚开始学的时候，记住**能用<link>就别用@import**就够了。
2.2 选择器优先级：不要只背口诀
很多面试题喜欢让人背"内联 > ID > 类 > 标签"这个优先级顺序，但实际开发中，选择器冲突往往没这么简单。我见过一个页面里四个类名互相覆盖，排查了半天才发现是权重和加载顺序共同作用的结果。
先给一个完整权重表，按四位维度看：
| 选择器类型 | 示例 | 权重值 |
|---|---|---|
| 内联样式 | style="color:red" | (1,0,0,0) |
| ID选择器 | #app | (0,1,0,0) |
| 类/属性/伪类 | .box、[type="text"]、:hover | (0,0,1,0) |
| 元素/伪元素 | div、::before | (0,0,0,1) |
让两个选择器打架，逐一比较四位权重，数值大的赢。如果完全相同，后加载的赢。举个例子：
/* 样式一 */ .nav ul li a { color: blue; } /* 样式二 */ .nav .link { color: red; }HTML结构是<nav class="nav"><ul><li><a class="link">链接</a></li></ul></nav>。样式一的权重是(0,0,1,3)，样式二的权重是(0,0,2,0)，比较第三位：2>1，所以最终文字颜色是红色。这就是"看起来更长的选择器不一定更强"的原因。
!important呢？它是强行把权重拉到最高，但在实际项目中尽量少用。原因很简单：一旦两个属性都加了!important，比较又重新回到正常权重逻辑，等于绕了一圈又回到起点，还让代码变得极难推理。我处理!important的原则是：能不加就不加，加了必须写注释说明为什么。
2.3 高频选择器的使用误区
新手最容易犯的一个错是无脑写后代选择器，比如.nav ul li a span这种串了好多层的选择器。层级越深，语义越脆弱——只要HTML结构稍微改一层，样式就全断。更好的做法是给目标元素单独加一个类名，比如.nav-link，用单类名控制样式。
另一个被低估的是伪类选择器。:hover、:focus、:disabled、:checked这些能表达"元素当前处于什么状态"，很多交互效果其实不需要JavaScript，纯CSS就能做。例如一个输入框聚焦时边框变色：
.input-field { border: 1px solid #ddd; transition: border-color 0.2s ease; } .input-field:focus { border-color: #4a90d9; outline: none; }这比用JS监听focus事件再添加删除Class要轻量得多。学会把"状态表达"交给CSS，你的代码会干净一个数量级。
3. 高频排版问题现场解决：居中、文本位置、字体与删除线
3.1 三类居中一次讲清楚
css body居中能上热搜，说明居中这件事真不是大家想象中那么简单。我按场景拆开讲。
水平居中：
- 文本、行内元素（
span、a、img）用text-align: center。 - 定宽的块级元素用
margin: 0 auto，它通过让左右margin自动均分剩余空间实现居中。 - flex或grid容器里，用
justify-content: center。
垂直居中：
- 单行文本且容器高度固定时，把
line-height设置成和容器高度相等，文本自然垂直居中。这个技巧在做按钮时特别常用。 - flex容器用
align-items: center，适合任意行数文本。 - grid容器用
place-items: center，一行同时搞定水平和垂直居中。
body整体居中（这个热词值得单独讲）。很多人想把整个页面内容在浏览器窗口中居中，常见写法是：
html, body { height: 100%; } body { display: flex; align-items: center; justify-content: center; margin: 0; }关键点是html和body都必须有高度。只给body设置height: 100%，但html默认高度是auto，body的100%就失去了参照基准，实际撑不满视口，居中效果自然不对。另外，如果你只是想居中一个小容器，不需要用flex占满整个body，给这个容器一个定宽，再配合margin: 0 auto就行——灵活选择方案，比记住一个万能居中公式更重要。
3.2 容器内文本位置怎么调
"怎么调整css容器里的文本位置"这个搜索词，我猜提问者是遇到了文本在按钮、卡片、输入框中位置不对的问题。文本的位置受三样东西影响：line-height、padding、text-align。
line-height控制行高，影响的是单行文本在垂直方向的位置。习惯上我会先设置一个基准行高（比如1.5），再在具体容器里微调。padding则是给容器内部增加空间，让文本不会紧贴边缘。比如做按钮，我惯用的写法是：
.btn { padding: 8px 20px; line-height: 1.2; text-align: center; }注意，text-align管的是水平方向，垂直方向要靠line-height或者flex的align-items。如果一个容器里文本位置总是不对，先检查这三项，80%的问题都能解决。还有一个很容易漏的是vertical-align，它影响的是行内元素在同行的垂直对齐方式，常见于图片和文字并排的场景。给图片加vertical-align: middle，就能让图片和旁边的文字在视觉上对齐得更好。
3.3 字体设置与字体渐变的正确写法
css字体是个很大的词，日常开发中高频的核心就几件事：字体族设置、字号单位、字重、字体渐变。
字体族推荐用堆栈写法，从目标字体往后备退：
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }这样在Mac上优先用苹方，Windows上优先用微软雅黑，都没有就退回系统无衬线字体，能保证跨平台观感基本一致。
字号单位方面，移动端我推荐rem，配合根元素字号做整体缩放。比如html { font-size: 16px; }，那么1rem = 16px。如果你想做整站字号缩放，直接改html的font-size，所有用rem的元素都会跟着变。
字重不用0到1000的数值，直接取关键字或常用数值就行：font-weight: 400是常规，500是中等，700是加粗。搞不清的时候就选这三个档位。
字体渐变在热词里出现，确实值得单独说一下。文字颜色可以做渐变，核心是background-clip: text这个属性，把背景裁剪成文字的形状，再把文字本身颜色设为透明：
.gradient-text { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }需要注意两点：第一，background-clip: text在部分旧浏览器需要-webkit-前缀；第二，color: transparent必须写，否则文字本身的颜色会盖住渐变背景。这个效果的兼容性问题逐年减少，但生产环境最好加一个纯色兜底。
3.4 删除线也有讲究
css删除线其实对应的是text-decoration: line-through。基础用法人人都会：
.old-price { text-decoration: line-through; color: #999; }电商场景里，原价划线、现价高亮，这已经是标准打法。但如果只是划线抗锯齿效果不好、线条太贴近文字，体验还是差一点。可以用text-decoration的辅助属性控制：
.old-price { text-decoration: line-through; text-decoration-color: #ccc; text-decoration-thickness: 1px; }text-decoration-color让线条颜色变浅，不至于抢原价的视觉焦点；text-decoration-thickness控制线条粗细，太粗会有粗糙感。部分浏览器还支持text-underline-offset调整线和文字的距离。如果你想要一条带斜度的删除线，或者更复杂的视觉效果，那就得上伪元素自己画了——用background画一条线并做倾斜，或直接用transform旋转一个细长条。看起来高大上的效果，本质上都是基础属性的组合。
4. 从简洁到炫酷：变形、悬停与动画效果
4.1 transform：平移、旋转、缩放与梯形变形
css平移和css 变形 梯形这两个热词，核心都是transform属性。这个属性最实用的写法有四种：
| 方法 | 写法 | 作用 |
|---|---|---|
| 平移 | translate(x, y) | 元素从原位置移动 |
| 旋转 | rotate(deg) | 元素旋转角度 |
| 缩放 | scale(n) | 元素放大缩小 |
| 斜切 | skew(deg) | 元素倾斜，可做平行四边形 |
梯形在视觉设计中很常见，比如标签页、按钮背景、导航高亮。最直接的实现方式是clip-path，把元素裁剪成多边形：
.trapezoid { width: 120px; height: 40px; background: #4a90d9; clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%); }polygon里四个点的顺序是左上、右上、右下、左下，通过控制左右两个上角的X坐标，就能得到一个上窄下宽的梯形。还有一种方案是用两个::before和::after伪元素加上边框做梯形，但代码繁琐，现在基本被clip-path替代了。
transform还有一个很重要的特征：它不会影响文档流，元素占据的空间不变，但视觉位置变了。这个特性在做微动效时特别有用，不会引起页面布局抖动。
4.2 鼠标移入交互：CSS和JS的分工
css 鼠标移入事件这个搜索词让我有点哭笑不得——鼠标移入在CSS里其实叫:hover伪类，不是什么事件。任何人都可以给元素加一层过渡动画来增强交互反馈：
.card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); }这是标准卡片浮起效果：鼠标移入，卡片轻微上移并出现阴影。写起来很自然，这就是CSS处理"即时状态"的典型场景。
那什么时候需要JS介入？当你需要在鼠标移入时做更复杂的逻辑，比如动态向服务器请求数据、改变页面其他区域的内容、或者写复杂的动画编排，单纯靠:hover就不够了。这时候用JS的mouseenter和mouseleave事件来添加/移除类名，动画本身还是由CSS的transition或animation完成。这算是最佳分工：CSS负责样式过渡，JS负责业务逻辑。
一个反直觉的坑：transition需要写在默认状态（而不是:hover状态）里，这样鼠标移入和移出都会有过渡；如果只写在:hover里，只有移入有动画，移出会瞬间弹回。
4.3 涟漪光圈扩散的动画拆解
css涟漪光圈扩散是很多注册页、直播间、按钮反馈场景都会用到的效果。原理不复杂：一个圆环，从中心不断放大，同时透明度从1降到0，循环播放。我在项目里这样实现：
<div class="ripple-wrap"> <span class="wave"></span> <span class="wave delay"></span> </div>.ripple-wrap { position: relative; width: 60px; height: 60px; } .wave { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #4a90d9; animation: ripple 2s ease-out infinite; } .wave.delay { animation-delay: 1s; } @keyframes ripple { from { transform: scale(1); opacity: 1; } to { transform: scale(2.5); opacity: 0; } }两个圆环错开1秒播放，看起来就像连续扩散的波纹。核心点有三个：position: absolute让圆环重叠、transform: scale()完成放大、animation-delay制造错落感。如果你想点击后才出现涟漪，可以用:active触发，或者用JS在点击坐标处动态创建一个.wave元素再删除。前者适合简单按钮，后者适合精确控制。
4.4 动态相册纯代码的实现思路
css动态相册纯代码又是一个搜索热度很高的词。动态相册的核心是"图片能动"——可以是自动轮播，也可以是悬停缩放，还可以是翻牌效果。我推荐一个简单又稳的方案：用grid布局排列图片，hover时放大，配合object-fit: cover让图片不变形：
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.4s ease; } .gallery img:hover { transform: scale(1.05); }aspect-ratio: 4 / 3让图片区域固定为4比3，object-fit: cover填充并裁剪多余部分，hover时轻微放大，一个精致相册卡片就出来了。如果要做自动轮播，核心是外层容器设置overflow: hidden，内层一个长条容器放所有图片，用animation定时改变translateX百分比。具体位移量要看图片数量和宽度，用百分比可以避免写死像素值，适配性更好。
动态效果少用top/left这类属性，多用transform做位移，因为transform不触发布局重排，更流畅。
5. 进阶思路：原子性CSS与CSS Houdini能不能用、怎么用
5.1 原子性CSS：一把双刃剑
原子性css近几年的风一直很大。它的核心思想是：不写庞大的语义化类名和成串的CSS规则，而是把样式拆成极小粒度的工具类，每个类只做一件事——text-center管居中、mt-4管上边距、flex管弹性布局。
最有代表性的就是Tailwind CSS。很多国内团队已经在用了，网上争议也不小。我很负责任地说：它解决了一些真实问题，也制造了一些新问题。
优点是明显的：没有命名负担（不用纠结一个类名怎么起）；修改样式不需要在HTML和CSS文件之间来回跳；组合出来的视觉效果非常一致，因为间距、颜色、字号都来自一套设计变量；打包时通过Tree Shaking只保留用到的类，最终CSS体积反而可能更小。
缺点是同样明显的：HTML类名会变得很长，可读性下降；完全依赖工具类后，项目里会出现大量class="flex items-center justify-between px-4 py-2 ..."，视觉噪音很大；团队新人要重新学习这套类名体系；如果设计系统不成熟，硬套原子类反而会失控。
我的建议是：小项目、快速原型、组件化项目（尤其是React/Vue组件）可以大胆用；传统多页面网站、需要长期手写维护的模板项目，慎用。原子性CSS在组件化项目里能最大化发挥优势，因为每个组件的结构相对独立，类名再长也只影响局部。
5.2 CSS Houdini：真正深入CSS引擎内部
css houdini是个偏底层的话题，但值得懂一点概念。简单说，Houdini是一组浏览器提供的高级CSS API，它允许开发者直接访问CSS引擎的部分底层能力，去扩展CSS本身。
目前最常被提及的有三个API：
| API | 作用 | 典型场景 |
|---|---|---|
| Properties and Values API | 注册自定义CSS属性并指定类型、初始值 | 让渐变动画更顺畅 |
| Paint API | 用JavaScript绘制CSS无法直接画出的图案 | 复杂纹理、背景图案 |
| Animation Worklet | 让动画不受主线程卡顿影响 | 高性能滚动动画、跟随手势的交互 |
举个例子，CSS自定义属性默认情况下做渐变动画可能很卡，因为浏览器不知道这个属性的"中间值"长什么样。用Properties and Values API注册后，浏览器就明白该按什么规则插值：
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; } .animated-gradient { background: linear-gradient( 90deg, #667eea, #764ba2 ); transition: --angle 1s ease; }这个写法在Chrome系浏览器里已经可以正常工作。但现实是：Safari和Firefox的完整支持还在推进中，所以现在做项目要谨慎，落地原则是渐进增强——支持Houdini的浏览器体验更好，不支持的浏览器回退到普通样式，不影响基本功能。如果你是个务实派，现阶段没必要把核心切成Houdini，但完全值得了解一下，等兼容性到位时你至少知道它能干什么。
5.3 技术选型判断标准
无论原子性CSS还是Houdini，做技术选型时我都会问自己三个问题：团队里其他人能不能快速上手？这个项目要维护多久？引入它解决的问题是否大于带来的复杂度？
很多时候，新技术的吸引力来自"它看起来很酷"而不是"它真的必要"。CSS的世界里，最成熟、最基础的东西往往才是最可靠的。先把普通布局、选择器、盒模型、flex/grid这些地基修扎实，再考虑高级特性，才是大多数人应该走的路。新技术可以用来做小范围实验、做性能优化点，但别一上来就重构整个项目。
6. 整合实战：Banner背景图与商品详情页的CSS落地
6.1 Banner效果：背景图的完整处理方案
css第四天综合案例banner效果背景图这个热词像是从某个实训课程里来的，但它反映的需求非常典型：怎么让背景图铺满Banner区域，还要居中、不变形、不失真。
标准解法是三件套：
.banner { width: 100%; height: 60vh; background: url("../images/banner.jpg") no-repeat center center / cover; display: flex; align-items: center; justify-content: center; }no-repeat取消重复平铺，center center让背景图居中，cover让图片等比缩放并铺满整个容器，超出的部分会被裁掉。这是当前商业项目里最稳的背景图方案。
Banner里常见的一层半透明遮罩，能提高浅色文字在复杂背景上的可读性。做法是在background里叠加一个渐变：
.banner { background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.6)), url("../images/banner.jpg") no-repeat center center / cover; }逗号分隔的两层背景，第一层是渐变遮罩，第二层是图片。文字放在flex容器里就能自然居中。注意多个background层，写在最前面的会覆盖在后面之上，所以渐变要放前面，图片放后面。
60vh这个高度在手机竖屏可能偏高，可以用media query做断点调整。做响应式Banner我还会配合aspect-ratio设定宽高比，减少偏移变化。
6.2 商品详情页的几块硬骨头
搜html js css商品详情的人，多半是第一次被要求做完整的商品详情页。这个页面的CSS难点集中在几个地方：图片区、标题价格区、规格选择区、底部操作栏。
图片区要用object-fit: cover或contain控制图片尺寸，避免不同比例的商品图搞乱布局：
.product-gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; }标题价格区最经典的样式就是价格里的删除线。原价用<del>加灰，现价用加粗醒目的红色或品牌色，形成强烈对比。规格选择区可以用flex排列按钮组，选中的规格通过:checked或:focus改变背景色，这种状态切换交给CSS就能完成。
底部操作栏（加入购物车、立即购买按钮）适合用粘性定位：
.bottom-bar { position: sticky; bottom: 0; background: #fff; box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08); padding: 12px 16px; display: flex; gap: 12px; }position: sticky让它在页面滚到最底部之前始终固定在视口底部，滚动到页面底部后则自然停在原有位置。相比position: fixed，sticky的一个优势是不会遮挡页面底部内容，体验更友好。
6.3 CSS、JS与HTML的边界在哪里
拿到一个商品详情页的需求，很多新手第一反应是"我该用JS做什么"？但更合理的思考顺序是：先看HTML结构是否清晰，再看CSS能否表达"静态样式和即时状态"，最后才考虑JS。
它们的分工我在实战里是这样把握的：
- HTML管结构：一个商品卡片的容器、图片、标题、价格、按钮，结构标签语义清楚。
- CSS管样式和即时状态：hover效果、选中态、过渡动画、不同屏幕下的响应式布局。
- JS管数据和复杂交互：从后端拿价格、切换商品图片、点击加入购物车后更新购物车数量、表单校验。
举个常见的例子：点击小图切换大图。这个交互涉及"切换当前展示的图片"，一张小图被点击后还要高亮，高亮状态可以用CSS的:focus或动态类名来控制。但"哪张图是当前展示图"这个状态，本质上需要由JS维护，因为它是业务数据的一部分。
如果只是做一个纯静态的产品展示页，你甚至可以完全不写JS，只靠CSS的:hover、transition就能完成很多轻量交互。别让JS抢了CSS的活，也别让CSS去做逻辑判断，这个边界想清楚，代码会清爽很多。
6.4 从入门到精通的路径建议
最后聊聊大家都关心的学习路径。css从入门到精通、头歌css从入门到精通、第1关：初识css、第2关：css样式引入方式，这些热词说明很多人在跟着课程或实训平台按关卡学习。这类闯关式学习的优点是有明确目标、有反馈机制，比如头歌平台会把CSS拆成一道道实验题，做对了才放行。但对进阶来说，光是通关还不够。
我一般建议分三个阶段：
- 阶段一：打地基。掌握HTML文档结构、三种样式引入方式、选择器、盒模型、文档流、
display和position。这一阶段的目标是看到一个页面能知道每一块是怎么定位的。 - 阶段二：做布局和动效。练熟flex和grid布局，会用
transition、animation做基础动效，能把设计稿切图实现成响应式网页。这一阶段的目标是"说有就有"，拿到设计稿能快速还原。 - 阶段三：工程化与性能。理解CSS预处理器（Sass/Less）、CSS模块化、原子化方案、浏览器兼容策略，会做性能优化（减少重排重绘、按需加载样式）。这一阶段的目标是能在团队里写出可维护、可扩展的样式代码。
每个阶段都要配合真实项目练手。光看教程不写代码，永远只能停留在"看懂了"的错觉里。试着找一个你看得上的网站，一步步复刻它的页面，这是最朴素的进阶方式，也是最有效的。
我在实际项目里踩过几次坑之后最大的体会是：CSS并不难，难的是它太灵活，灵活到让人容易走捷径。走捷径的代价就是，某个深夜你在为一个顽固的布局问题翻来覆去查资料。字符串拼接式的学习解决不了问题，把一个一个基础点真正吃透，才是绕开这些问题的最短路径。
最后再分享一个我私藏的小习惯：遇到任何不确定的CSS属性，先打开浏览器开发者工具，在Elements面板里直接改属性值看效果。很多疑惑在实时反馈中一下就通了，比反复翻文档快得多。CSS是一门用来"看着效果调整"的语言，别怕动手，也别怕试错。