拓冰网站定制 
网上关于CSS的教程大多数开局就甩属性表字体、颜色、边距、浮动……看完列表感觉自己好像全会了可一打开编辑器依旧不知道从哪下手。这不是你笨而是很多教程把顺序搞反了。CSS看起来是“背属性”的事本质上是“推演规则”的事你把规则写下去浏览器通过一整套层叠、继承、选择器权重机制最终渲染出唯一的页面。谁先搞懂这套机制谁才是真正入门。这篇文章是我自己重学CSS基础的一份系统梳理也可以当成前端新人的第一课。内容会从CSS底层逻辑讲起依次拆解样式引入方式、选择器、字体文本、盒模型、布局、过渡与3D变换最后聊到原子性CSS和自定义样式沉淀。热榜上反复出现的字体渐变、换行省略、清除浮动、中心对齐、3D旋转这些具体问题都会落到可复现的代码里。适合刚学完HTML、准备正经入门CSS的读者也适合那种“看教程能看懂自己一写就废”的人。1. 从翻车现场出发层叠、继承与CSS的核心世界观1.1 多个样式来源叠加时浏览器凭什么决定谁赢写CSS第一步不是写属性而是搞明白一条规则是如何被“裁决”出来的。CSS的全称是Cascading Style Sheets层叠样式表。“层叠”这个词才是整门学科的重心。一个页面里的元素最终长什么样是多个样式来源叠加后的结果。浏览器默认样式是一层你通过link引入的外部样式表是一层页面里style标签写的内部样式又是一层个别元素上的内联style又是一层。除此之外用户脚本还可能往里插一层。所谓层叠就是浏览器按一套固定的优先级把这些来源揉在一起最后产出唯一的渲染结果。用一个生活里的类比公司有全员统一模板这是浏览器默认样式部门在这个模板基础上出细则这是外部样式表某个项目组又临时下发更具体的安排这是内联样式。规则冲突时层级越细的越有发言权。没有冲突的属性不会互相打架浏览器直接合并只有同一个属性多处定义时才需要比较优先级。很多初学者担心“默认样式会不会搞乱我的页面”其实不用太焦虑。绝大多数元素你没写样式就被默认撑起一个难看但不影响阅读的样子你写了样式就按优先级覆盖掉默认值。真正需要担心的是你自己和自己打架。1.2 继承不是万能为什么按钮字体就死活不继承层叠讲的是“多个来源之间怎么选”继承讲的是“父子元素之间怎么传”。我见过很多新人写CSS给body设了font-family结果段落文字变了button里的字纹丝不动第一反应是“选择器没写对吧”。其实这不一定是选择器的问题而是继承的边界问题。color、font-family、line-height、text-align、letter-spacing这些都是默认继承属性width、height、margin、padding、border、background这些默认不继承。很多人会误以为“子元素就应该跟着父元素走”但CSS的默认设计不是这样跟排版相关的文字风格适合继承跟盒子尺寸相关的属性如果继承整个页面会立刻失控。那按钮字体为什么特殊因为很多浏览器的UA样式里针对button设置了font属性默认使用系统字体它压根不打算继承你的body字体设置。你要主动把按钮拉回继承链里button, input, select, textarea { font: inherit; color: inherit; }这行样式几乎是所有项目里的标配。写完之后表单控件才老老实实跟着全局字体走。此外还有两个关键字值得记牢inherit表示强制继承父级的值initial表示恢复属性的初始值。如果你发现某个我不知道从哪冒出来的间距、颜色可以用它们做个兜底。等后面学了自定义属性CSS变量配合inherit还有更多玩法。1.3 初学阶段要养成的三个基础习惯在往下看之前先分享三个我踩过无数次坑之后才养成的习惯。这三个习惯不涉及具体属性但它们决定了你后面学得快不快。第一动手写HTML之前先规划class命名。不要用 .left、.red、.box1 这种跟表现绑死的名字而是想清楚这个元素“是什么”再用语义化名称。第二每写完一组样式都按F12打开开发者工具看“Computed”面板里计算后的实际值。很多时候你以为写了font-size:16px但实际渲染出来是14px原因就藏在某一条继承或层叠规则里。第三保持“一个类只管一件事”的倾向。哪怕现在不搞原子化CSS这个思维也能让你少写很多覆盖代码。2. 样式引入方式、优先级与本地调试那些坑2.1 三种引入方式与import的正确位置把层叠和继承的底层逻辑想通之后你马上会遇到一个具体操作问题样式写在哪里。CSS有三种常规引入方式。内联样式直接用style属性写在HTML标签上内部样式写在HTML文件里的style标签中外部样式通过link标签引入独立CSS文件。三种方式都能让样式生效但适用场景完全不同。!-- 内联样式只在元素身上生效 -- div stylecolor: #333; padding: 16px;内联样式/div !-- 内部样式写在HTML文件里的 style 标签中 -- style .intro { color: #666; } /style !-- 外部样式推荐的生产环境用法 -- link relstylesheet href./css/base.css内联样式的优先级很高日常开发尽量不要用因为没法复用、也没法缓存。它适合动态改样式比如JS根据某个状态设置的style或者临时调试。内部样式适合单页demo但在多页面项目里会被重复复制维护成本极高。生产项目里外部link是主流因为浏览器可以缓存CSS文件多个页面共享一份样式。再提一个很多人踩过的坑import也能引入CSS但它是CSS层面的引入不是HTML层面的。import的加载是串行的浏览器要先拿到这个CSS文件解析到import之后再去下载另一个文件。性能上不如link的并行加载。如果非要用import必须写在样式表的最前面写在中间或后面很可能被直接忽略。2.2 优先级计算的实操心法important、权重和顺序同一个元素被多条规则命中时浏览器怎么决定听谁的这就涉及优先级计算。初学的时候记一张表就够了来源优先级!important最高覆盖一切普通声明内联style1000id选择器100class、属性选择器、伪类10标签选择器、伪元素1通配符 *、继承的值0很多人背完这张表以为会用真到项目里还是会懵。因为权重的比较不是十进制的算术和而是按位比较。10个class加起来理论上是100但id的优先级是100按位比较时class这一档永远没资格和id比。所以不要妄图用十几个class去覆盖一个id。真正实用的经验是布局框架用class不要轻易用id写样式。id留给JS钩子或者锚点。以及不要一遇到覆盖不掉的情况就上!important。!important相当于核弹它会越过整条优先级规则。如果一个项目里到处是!important说明选择器结构和命名已经很混乱了。正确思路是回头查那几条冲突规则的权重把不该出现的id或者更具体的选择器去掉。还有一条被忽略的规则同权重时后出现的声明胜出。这个“后”既指CSS文件内部的书写顺序也指样式表在HTML里的引入顺序。所以会出现一个很反直觉的现象明明class在CSS文件后面写了却还是不生效。原因可能是前面的link里头也用到了相同权重的规则并且放在更靠后的位置。排查时先看权重再看顺序最后才考虑!important。2.3 用file://直接打开HTML时的“样式消失”问题搜索记录里有一条典型的报错access to css stylesheet at file:///c:/users/administrator/desktop/...。这明显是双击HTML文件用本地文件协议直接打开导致的。用file://打开页面时浏览器对本地资源的加载限制比http://严格得多。尤其是Chrome这类浏览器对file源下的样式加载会有跨域限制很容易出现HTML能看到CSS却加载不出来控制台报跨域错误。中文路径、带空格的目录、大小写不匹配也会让相对路径失效。我的建议很直接别用双击方式开发页面。本地起一个静态服务器一劳永逸。装了Node的话在项目目录执行npx serve .或者用Python自带的HTTP服务python -m http.server 8080然后在浏览器访问 http://localhost:8080。这样既能正常加载CSS又能提前模拟线上环境的模块加载逻辑。如果你只是临时看一个静态页面也要注意CSS文件路径用相对路径比如 ./css/style.css而不是 /css/style.css因为 / 开头的绝对路径在本地会指向磁盘根目录。3. 选择器从class命名到:is()、:has()的前沿用法3.1 使用频率最高的选择器盘点与权重对照样式写进去了但不是每条规则都能命中你想改的元素这就是选择器的作用。选择器是CSS最容易入门也最容易写废的部分。我先按使用频率盘一批基础款选择器写法示例标签选择器elementp、div、a类选择器.class.cardid选择器#id#header后代选择器A B.list li子代选择器A B.list li相邻兄弟A Bh2 p通用兄弟A ~ Bh2 ~ p属性选择器[attr][typetext]伪类:hovera:hover伪元素::before.card::before开发里用得最多的是class和后代选择器。标签选择器适合做全局reset不适合单独定位某个元素因为一旦写了p { color: red }后续所有p都会受影响覆盖成本很高。id选择器权重太高设计不周时很容易把自己逼进死胡同。伪元素::before和::after非常实用很多装饰性元素都可以不额外写HTML纯粹用CSS生成。权重是选择器绕不开的话题。一个简单的判断方式数一下选择器由几个身份组成。比如 .nav li.active 有一个class(.nav)、一个伪类(:not里暂不提)、一个class(.active)和一个标签(li)权重大约是111#header .title是两个来源id占100、class占10其实就是110。真正写代码时不用算这么细只要知道id class 标签以及选择器嵌套越深越难维护。3.2 :is()、:where()和:has()改写选择器写法近几年的CSS规范给选择器补齐了好几块拼图很多新人只学过旧写法没用上新特性很可惜。先说:is()。它解决的是“一长串选择器写重复”的问题。/* 传统写法 */ .nav a, .nav .link, .nav .menu-item a { color: #333; } /* :is 写法 */ .nav :is(a, .link, .menu-item a) { color: #333; }:is()里放一堆选择器只要其中一个匹配整个规则就成立。需要注意:is()的权重由参数里最高权重的选择器决定。比如:is(#header, .title)里因为有id整个规则的权重会被拉高到id级别这有时候会带来意外覆盖。如果你不想让权重被拉高就用权重大小“零”的:where()。/* :where 权重视为0方便被后续样式覆盖 */ .card :where(.title, .subtitle) { font-size: 14px; }:has()则更有意思它让CSS能“根据子元素/后续元素的状态反推祖先元素的样式”。过去要用JS判断父级有没有某个子元素现在直接写CSS/* 卡片里如果包含图片整个卡片变成上下布局 */ .card:has(img) { display: flex; flex-direction: column; }我第一次用:has()重构代码的时候最直接的感受是终于不用为了给父级加类名在JS里写冤枉逻辑了。它的兼容性现在也足够好现代浏览器基本都支持。唯一要留意的是:has()本身有权重同时也会让浏览器的样式计算变得更重别在超大列表上滥用。3.3 命名策略提前规划比事后补样式更省心选择器写多了之后你会发现最大的问题不是语法而是命名和结构。我见过一份代码结构长这样.wrapper .container .content .text-item span。每次改样式都要数好几层一旦中间某个层级没包住整条规则就断了。我的建议是无论你用不用BEM完整的写法至少要建立“块、元素、修饰符”的思维。简单说块一个独立组件比如 .card元素组件内部的一部分比如 .card__title修饰符组件或元素的状态变体比如 .card--activediv classcard card--active h2 classcard__title标题/h2 p classcard__desc描述/p /div这样命名有两个好处。一是选择器深度被控制住了大部分时候只需要 .card__title 这样一层不用去匹配父级。二是当你需要覆盖默认状态时权重不会叠得太高。很多人后期改不动样式就是因为前期所有选择器都写成 #main .content .card .title一大串权重叠在一起后面任何普通class都覆盖不掉。4. 字体与文本排版省略号、删除线、渐变字的实现细节4.1 字体栈、字号行高的选择经验CSS里最能体现“细节决定成败”的往往不是布局而是文字排版。很多页面功能没问题但看起来“廉价”问题大多出在字体、行高、字距这些细枝末节上。字体栈推荐直接用系统字体不要一上来就引一大串网络字体。系统字体加载快还不会白屏body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Microsoft YaHei, sans-serif; }这行字体的逻辑是在Mac上优先用苹果系统字体在Windows上优先用微软雅黑都没有就随便找个无衬线字体。它保证了相近的设备上表现一致又不需要额外下载字体文件。字号方面浏览器默认16px正文用14-16px都还可以接受但行高建议至少1.5。行高太小的文字挤在一起读起来非常累。比较稳的写法是不写死px而是用无单位数值body { font-size: 16px; line-height: 1.6; }无单位的line-height会按当前字号比例计算子元素字体变大时行高也会自动跟着变不会出现文字溢出或者被裁掉的尴尬。4.2 单行与多行省略号白名单浏览器下的优雅写法标题、卡片摘要、列表文字超出容器时一般都要做省略号。先说单行省略三件套缺一不可.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }white-space: nowrap是禁止换行overflow: hidden是把溢出部分藏住text-overflow: ellipsis让被藏掉的内容显示成省略号。三个都写了才有效。如果你发现自己写了text-overflow: ellipsis却没用多半是漏了白空间处理或者溢出隐藏。多行省略稍微复杂一点过去只能靠JS算高度现在有一个被广泛支持的写法.multiline-ellipsis { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }-webkit-line-clamp: 3表示最多显示3行超出后省略。这个属性虽然带-webkit前缀但在现代Chrome、Firefox、Safari、Edge里都可用实用性很高。要注意使用后元素会被强制变成-webkit-box布局如果外层使用了flex且没有设置min-width可能出现宽度塌陷。我给flex子项加省略样式时通常会顺手补一个min-width: 0这个坑排查起来极其费时间。4.3 文本位置调整与删除线的日常应用热搜里有“怎么调整css容器里的文本位置”我猜很多人是遇到了水平垂直对不齐的问题。文本的水平位置用text-align这个大家都知道但垂直位置就不只是看一个vertical-align了。最基础的规则是vertical-align只对内联元素、内联块元素以及表格单元格生效。对一个普通div里的文本直接设vertical-align是没用的。想让块级容器里的文字垂直居中老办法是设置行高等于容器高度.box { height: 60px; line-height: 60px; text-align: center; }这个写法只适合单行文本多行文本会被挤爆。现代项目里我更推荐用flex.box { display: flex; align-items: center; justify-content: center; }这样不管是单行还是多行不管容器高度变没变文本位置都能自动保持居中。低频但有用的还有删除线。最简单的写法是text-decoration: line-through但默认删除线紧贴文字视觉上有点丑。可以通过text-decoration-thickness控制线宽用text-underline-offset控制线和文字的距离.del { text-decoration: line-through; text-decoration-thickness: 1px; text-underline-offset: 4px; }顺手说一句删除线不只能用语义上的“已删除”很多时候价格标签、任务完成态、折扣信息都会用到它。控制好粗细和偏移观感会精致很多。4.4 background-clip: text打造渐变字体字体渐变几乎是“CSS看起来很高级”的入门款。它的原理不是给文字本身刷渐变而是用背景渐变铺满整个盒子再把背景裁剪到文字形状里最后把文字颜色变成透明。.gradient-text { background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }background-clip: text是核心它把背景裁剪到文字的前进区域。color: transparent让原本文字的颜色消失露出底下的渐变背景。如果只写了渐变和clip没把颜色变透明你看到的还是一坨普通颜色字。兼容性上-webkit-background-clip: text在现代浏览器里完全可用。稳妥起见可以先给一个正常的color再写clip规则这样遇到老浏览器至少能退回普通文字颜色.gradient-text { color: #333; background: linear-gradient(135deg, #f6d365, #fda085); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }这个技巧还可以和动画、背景位移结合做出流光扫过的文字效果。不过要控制用量满屏渐变字会显得很廉价通常只用在标题、logo、重要数字上。5. 盒模型、居中与清除浮动三个绕不开的基础题5.1 box-sizing为什么老手写样式先重置它进入布局主题之前先把盒模型说透。每一个HTML元素都可以想象成一个盒子由content、padding、border、margin四部分组成。盒子最终占据的空间不只是content的宽高你要把padding和border都算进去。默认情况下浏览器使用content-box模式你给一个元素写width: 200px这个200px指的是内容的宽度。如果你同时设置了padding: 20px; border: 1px solid #ccc实际渲染出来的总宽度是200 202 12 242px。这就会导致一个经典问题你算好200px的容器再加padding发现布局挤爆了。于是开始反复调宽度调完左边右边又对不齐。老手的解法是统一改成border-box*, *::before, *::after { box-sizing: border-box; }border-box模式下width: 200px直接规定整个盒子从border外沿到border外沿的宽度是200pxpadding和border都在这个宽度内部压缩。不管padding怎么改布局宽度不变心智负担小很多。很多UI框架和reset样式都默认做这件事如果你的项目还没做赶紧加。5.2 居中方案快速选型从margin auto到transform“如何让一个元素居中”可能是CSS提问率最高的问题。它没有唯一答案关键是按场景选方案。行内元素水平居中给父容器设text-align: center。块级元素水平居中给元素自己设margin-left: auto; margin-right: auto同时保证它有确定宽度。垂直水平居中现代首选flex三行代码搞定。已知宽高的弹层绝对定位加负margin或者绝对定位加translate偏移。我用过最多的是flex方案.center { display: flex; align-items: center; justify-content: center; }这个写法对内部元素数量和尺寸没有任何要求父容器高度变化也能自适应。Grid方案则更简洁.center-grid { display: grid; place-items: center; }place-items: center同时控制了水平和垂直对齐适合整块布局的居中场景。至于transform: translate(-50%, -50%)更适合配合position: absolute定位弹层.float-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }它不受自身宽高影响左边和上边分别偏移50%再用transform拉回一半。注意transform的translate百分比是相对元素自身尺寸计算的这一点恰好是这套方法成立的关键。5.3 清除浮动古典手段与现代替代方案浮动float在当年布局工具匮乏的年代是撑起双列、三列布局的主力。它的设计初衷其实只是“文字环绕图片”所以浮动元素会脱离正常文档流导致父容器高度塌陷。于是就有了清除浮动。最经典的clearfix.clearfix::after { content: ; display: block; clear: both; }原理是给父容器末尾追加一个看不见的块级伪元素强制它去避开左右两侧的浮动元素从而把父容器高度重新撑起来。还有一个野路子是给父容器设overflow: hidden也能触发BFC把浮动元素包住但副作用是溢出内容会被剪掉容易出问题。现在Flex和Grid已经完全可以替代浮动做页面布局浮动基本回归到文字环绕这个本职。如果你在维护老项目还是会遇到clearfix在新项目里遇到布局问题先别用float改成flex会省很多事。但“脱离文档流”这个概念必须掌握因为后面学position: absolute、定位布局时它还会反复出现。6. 五种布局方式的横向对比与选型思路6.1 常规流和浮动最原始也最容易理解的排版HTML里每个元素的默认布局方式就是常规流normal flow。块级元素从上往下排列宽度默认填满父容器行内元素从左往右排列宽度随内容撑开。这是最开始接触网页时看到的那种一列一列的朴素效果。在常规流基础上float可以让元素向左或向右浮动让后面的文字环绕它。举个例子把一张图片float: left后面几段文字就会自动绕到图片右侧形成报纸排版的效果.article img { float: left; margin-right: 16px; }但浮动布局最大的问题是计算高度和间距需要不少人工干预。每个浮动元素都要想着怎么清除不同列表项之间还要手动margin撑出间隔。理解它没问题日常开发尽量少用。6.2 定位布局堆叠、吸顶与绝对定准position属性的值从static到relative、absolute、fixed、sticky每一档都有不同语义。relative是相对元素原本的位置做偏移偏移的间隙不会把其他元素挤走。它最常见的用法是做absolute的定位参考系。absolute是相对最近的定位祖先来定位如果祖先里没有relative、absolute或fixed它就会一路向上找到body甚至视口。fixed是相对视口固定滚着滚着还在那里适合导航栏、悬浮按钮。sticky是relative和fixed的混合体元素在滚动到指定阈值之前是普通文档流过了阈值就像fixed一样吸住.sticky-nav { position: sticky; top: 0; }定位布局适合做浮层、弹窗、吸顶场景不太适合搭建整个页面的骨架。因为绝对定位脱离文档流后后续内容会自动往上补造成高度错乱。把所有元素都用absolute拼页面后期想改上下顺序会痛不欲生。6.3 Flex与Grid现代布局的分工与选择现在绝大多数页面布局基本就在Flex和Grid之间做选择。简单记Flex擅长一维排列Grid擅长二维网格。Flex的核心理念是“沿主轴排列”适合导航栏一排按钮、卡片横排、按钮组、表单一行多个输入框这类场景。几条常用规则.flex-row { display: flex; align-items: center; justify-content: space-between; }justify-content控制主轴方向的对齐align-items控制交叉轴方向。空间不够时可以让子项换行flex-wrap: wrap。只要记住主轴和交叉轴这两个概念大部分flex布局都能推导出来。Grid则更适合经纬分明的页面骨架.grid-page { display: grid; grid-template-columns: 240px 1fr; grid-template-rows: auto 1fr auto; gap: 16px; }这段代码的意思是整个页面分两列左边固定240px右边占剩余空间行分三行上下自动中间撑满。gap是网格间的统一间距省去了一大堆margin计算。五种布局方式列个表方便快速对比布局方式维度适用场景主要缺陷常规流一维文档类页面、正文排版做不了复杂结构浮动一维文字环绕、古典双列高度塌陷需要清除定位二维语义弹层、吸顶、角标脱流需小心处理层级Flex一维导航、表单、卡片横排二维网格别扭Grid二维页面级网格、栅格系统兼容性要求现代浏览器选型时先问自己这是一行排列还是一块网格一行用Flex一块用Grid弹层用定位正文用常规流。浮动不要主动用。7. 悬停、过渡与3D旋转从鼠标移入到涟漪光圈7.1 hover结合transition鼠标移入事件的基础玩法很多搜索结果都在问“CSS鼠标移入事件”。严格说CSS里没有事件只有伪类:hover。鼠标移入元素时:hover匹配成功你可以改变它的样式.btn { background: #4a6cf7; transition: transform 0.2s ease, box-shadow 0.2s ease; } .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(74, 108, 247, 0.3); }注意这里的transition非常关键。如果不写鼠标移入瞬间元素会“啪”一下跳到新状态写了transition浏览器会在0.2秒内平滑过渡。transition四个关键部分是属性、时长、缓动函数、延迟例如transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s;除非调试否则不建议用all因为它会把所有可过渡属性都拖进动画过程性能开销变大。比如只想改变transform和box-shadow就明确列出来。做hover效果时还有两个小细节一是hover上不写display属性因为display无法过渡会出现闪跳二是把动画都放在默认状态别只放在:hover里不然鼠标移出时元素会瞬间弹回原状。7.2 拆解transform: rotateY(60deg) translateZ(300px)这个写法一看就是在做3D卡片效果。想理解它先记住transform的执行顺序从右往左看最右边的变换先生效。来看这行transform: rotateY(60deg) translateZ(300px);按“从右往左先生效”的规则元素先沿自身Z轴向前移动300px也就是从屏幕里朝你的方向推出来300px然后整体绕Y轴旋转60度。所以最终效果是一张先向前推出一段距离、再向右偏转60度的卡片。配合透视属性才有效果.stage { perspective: 800px; } .card { transform: rotateY(60deg) translateZ(300px); }perspective要写在父元素上它给整个舞台建立透视感越小的值近大远小的效果越强烈。如果没有perspectiverotateY只会造成各种非均匀缩放和位移看起来像一张纸被压扁而不是立体的旋转。如果把两个变换顺序反过来transform: translateZ(300px) rotateY(60deg);同样是按从右往左执行元素会先绕Y轴旋转60度再沿着已经偏转后的局部Z轴方向推进300px。视觉上卡片就不是“向前推再旋转”而是“旋转之后沿着新的Z轴飞出去”落点完全不同。这就是transform顺序的威力。7.3 3D旋转正负判断与涟漪光圈扩散动效实现3D旋转里的正负方向很多人栽跟头。CSS里有一个右手定则拇指指向坐标轴正方向四指弯曲的方向就是正角度旋转方向。X轴正方向朝右Y轴正方向朝下Z轴正方向指向屏幕外朝向你。rotateX正角度上边缘向后倒下边缘向前翘。rotateY正角度右边缘向你转过来左边缘向后去。rotateZ正角度按顺时针旋转。用这个规则能解释很多现象。比如rotateY(60deg)是一张卡片右边向你翻过来看起来像翻开一本书的右侧页如果你想要左边翻起来就要用负角度rotateY(-60deg)。涟漪光圈扩散是另一类常见动效。一个按钮或卡片被鼠标移入时从中心向外扩散一个光圈。纯CSS可以做简化版.ripple { position: relative; overflow: hidden; background: #4a6cf7; } .ripple::after { content: ; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); transform: translate(-50%, -50%); opacity: 0; } .ripple:hover::after { animation: ripple 0.6s ease-out; } keyframes ripple { from { transform: translate(-50%, -50%) scale(1); opacity: 0.4; } to { transform: translate(-50%, -50%) scale(20); opacity: 0; } }这段代码在鼠标移入时用::after伪元素生成一个小圆点通过animation把它从scale(1)放大到scale(20)同时透明度降到0形成光圈扩散消失的视觉效果。用transform做缩放而不是直接改宽高是为了让动画只作用在合成层上避免反复触发重排性能更稳。纯CSS的涟漪只能固定在元素中心如果希望光圈从鼠标点击的精确位置扩散需要JS把鼠标坐标写入CSS变量比如.ripple::after { left: var(--x, 50%); top: var(--y, 50%); }这算进阶玩法基础阶段能做出中心扩散版已经很够用。8. 原子性CSS与自定义样式让零散的经验沉淀成自己的工具集8.1 原子性CSS的核心理念与争议聊完动效来到一个容易被初学者忽略但实际影响深远的话题原子性CSS。它的思路是不为每个组件写一套独立样式而是把所有基础样式拆成一个个只做一件事的工具类。比如.flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .text-center { text-align: center; }一个按钮可能是这样拼出来的button classflex items-center justify-between px-4 py-2 rounded按钮/button很多人第一次看到这种写法会觉得HTML很脏但用久了会发现它有两个巨大优势一是样式复用率极高所有组件都在同一套原子类上组合不会出现“同样的效果写三份”的情况二是覆盖成本极低改一个间距不需要新增一条更高权重的CSS规则直接换一个class就行。Tailwind CSS这类工具就是原子化思路的代表。原子化CSS的争议也很明显HTML会变得很长设计意图散落在class里非前端同学维护起来不友好。但作为学习方向它至少传递了一个重要观念样式要可组合、可复用而不是复制粘贴。8.2 把自己的常用样式沉淀成“本地小框架”我自己的做法是维护一份base.css把重置样式和频繁使用的工具类放在一起。不需要依赖任何框架纯粹沉淀个人经验/* reset */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } img { max-width: 100%; display: block; } /* 工具类 */ .text-overflow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .flex-center { display: flex; align-items: center; justify-content: center; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }这份文件是我CSS学到现在的“个人词典”。每学到一种看起来高频的写法我就把它抽象成一个短类名放进base.css里。下次做新页面先查自己的词典而不是又去搜索框里重新找一遍。记录本身也会倒逼你思考这段样式的核心职责到底是什么能不能与其他页面共用8.3 在第三方浏览器/工具里用自定义CSS美化主页有很多场景没法等你自己搭站点比如某个浏览器或工具支持给指定页面注入自定义CSS。这也是热搜里“via里的自定义css怎么用”这类问题出现的背景。这类功能本质上和浏览器自带的“开发者工具临时加样式”是同一回事工具启动时会把你写入的样式作为额外样式表附加到页面上优先级通常够用能覆盖不少默认效果。如果你想美化一个自己的起始页最常见做法是去目标页面右键检查元素找到想改的背景、字体、间距对应的选择器然后写一小段自定义CSS粘贴到设置框里。别指望一上来就改出精美主页先做三件小事调页面背景、统一字体、隐藏不喜欢的按钮。我把这个过程写得具体一点按F12或右键“检查”定位目标元素的class或id。在自己的样式里复刻这个选择器加上想要的样式。注意优先级如果覆盖不掉可以在选择器后面补一层祖先比如 body .xx或者用带“自定义”语义的类名挂载。每次改完保存并刷新观察变化再做下一步。这种临时自定义CSS的本质和写正常项目完全一样只是把CSS职责从“设计一个页面”变成了“修整一个页面”。它同样要求你会看选择器、懂优先级、理解层叠。等你在这类小工具里反复改过几轮再回头写正经项目很多基础概念已经变成肌肉记忆了。我在这条路上最有体会的一点是CSS学多少很大程度上取决于你“拆”过多少真实页面。照着书学一遍属性表远不如找一个现成页面尝试复刻它、覆盖它、改造它来得扎实。第一篇基础内容先聊到这里后面我会继续拆CSS变量、响应式断点、以及如何用工程化工具组织你的样式。学CSS不用急把每一层规则想清楚页面自然会替你说话。 CSS底层逻辑与高频实战：层叠规则、盒模型、布局与动效
网上关于CSS的教程大多数开局就甩属性表字体、颜色、边距、浮动……看完列表感觉自己好像全会了可一打开编辑器依旧不知道从哪下手。这不是你笨而是很多教程把顺序搞反了。CSS看起来是“背属性”的事本质上是“推演规则”的事你把规则写下去浏览器通过一整套层叠、继承、选择器权重机制最终渲染出唯一的页面。谁先搞懂这套机制谁才是真正入门。这篇文章是我自己重学CSS基础的一份系统梳理也可以当成前端新人的第一课。内容会从CSS底层逻辑讲起依次拆解样式引入方式、选择器、字体文本、盒模型、布局、过渡与3D变换最后聊到原子性CSS和自定义样式沉淀。热榜上反复出现的字体渐变、换行省略、清除浮动、中心对齐、3D旋转这些具体问题都会落到可复现的代码里。适合刚学完HTML、准备正经入门CSS的读者也适合那种“看教程能看懂自己一写就废”的人。1. 从翻车现场出发层叠、继承与CSS的核心世界观1.1 多个样式来源叠加时浏览器凭什么决定谁赢写CSS第一步不是写属性而是搞明白一条规则是如何被“裁决”出来的。CSS的全称是Cascading Style Sheets层叠样式表。“层叠”这个词才是整门学科的重心。一个页面里的元素最终长什么样是多个样式来源叠加后的结果。浏览器默认样式是一层你通过link引入的外部样式表是一层页面里style标签写的内部样式又是一层个别元素上的内联style又是一层。除此之外用户脚本还可能往里插一层。所谓层叠就是浏览器按一套固定的优先级把这些来源揉在一起最后产出唯一的渲染结果。用一个生活里的类比公司有全员统一模板这是浏览器默认样式部门在这个模板基础上出细则这是外部样式表某个项目组又临时下发更具体的安排这是内联样式。规则冲突时层级越细的越有发言权。没有冲突的属性不会互相打架浏览器直接合并只有同一个属性多处定义时才需要比较优先级。很多初学者担心“默认样式会不会搞乱我的页面”其实不用太焦虑。绝大多数元素你没写样式就被默认撑起一个难看但不影响阅读的样子你写了样式就按优先级覆盖掉默认值。真正需要担心的是你自己和自己打架。1.2 继承不是万能为什么按钮字体就死活不继承层叠讲的是“多个来源之间怎么选”继承讲的是“父子元素之间怎么传”。我见过很多新人写CSS给body设了font-family结果段落文字变了button里的字纹丝不动第一反应是“选择器没写对吧”。其实这不一定是选择器的问题而是继承的边界问题。color、font-family、line-height、text-align、letter-spacing这些都是默认继承属性width、height、margin、padding、border、background这些默认不继承。很多人会误以为“子元素就应该跟着父元素走”但CSS的默认设计不是这样跟排版相关的文字风格适合继承跟盒子尺寸相关的属性如果继承整个页面会立刻失控。那按钮字体为什么特殊因为很多浏览器的UA样式里针对button设置了font属性默认使用系统字体它压根不打算继承你的body字体设置。你要主动把按钮拉回继承链里button, input, select, textarea { font: inherit; color: inherit; }这行样式几乎是所有项目里的标配。写完之后表单控件才老老实实跟着全局字体走。此外还有两个关键字值得记牢inherit表示强制继承父级的值initial表示恢复属性的初始值。如果你发现某个我不知道从哪冒出来的间距、颜色可以用它们做个兜底。等后面学了自定义属性CSS变量配合inherit还有更多玩法。1.3 初学阶段要养成的三个基础习惯在往下看之前先分享三个我踩过无数次坑之后才养成的习惯。这三个习惯不涉及具体属性但它们决定了你后面学得快不快。第一动手写HTML之前先规划class命名。不要用 .left、.red、.box1 这种跟表现绑死的名字而是想清楚这个元素“是什么”再用语义化名称。第二每写完一组样式都按F12打开开发者工具看“Computed”面板里计算后的实际值。很多时候你以为写了font-size:16px但实际渲染出来是14px原因就藏在某一条继承或层叠规则里。第三保持“一个类只管一件事”的倾向。哪怕现在不搞原子化CSS这个思维也能让你少写很多覆盖代码。2. 样式引入方式、优先级与本地调试那些坑2.1 三种引入方式与import的正确位置把层叠和继承的底层逻辑想通之后你马上会遇到一个具体操作问题样式写在哪里。CSS有三种常规引入方式。内联样式直接用style属性写在HTML标签上内部样式写在HTML文件里的style标签中外部样式通过link标签引入独立CSS文件。三种方式都能让样式生效但适用场景完全不同。!-- 内联样式只在元素身上生效 -- div stylecolor: #333; padding: 16px;内联样式/div !-- 内部样式写在HTML文件里的 style 标签中 -- style .intro { color: #666; } /style !-- 外部样式推荐的生产环境用法 -- link relstylesheet href./css/base.css内联样式的优先级很高日常开发尽量不要用因为没法复用、也没法缓存。它适合动态改样式比如JS根据某个状态设置的style或者临时调试。内部样式适合单页demo但在多页面项目里会被重复复制维护成本极高。生产项目里外部link是主流因为浏览器可以缓存CSS文件多个页面共享一份样式。再提一个很多人踩过的坑import也能引入CSS但它是CSS层面的引入不是HTML层面的。import的加载是串行的浏览器要先拿到这个CSS文件解析到import之后再去下载另一个文件。性能上不如link的并行加载。如果非要用import必须写在样式表的最前面写在中间或后面很可能被直接忽略。2.2 优先级计算的实操心法important、权重和顺序同一个元素被多条规则命中时浏览器怎么决定听谁的这就涉及优先级计算。初学的时候记一张表就够了来源优先级!important最高覆盖一切普通声明内联style1000id选择器100class、属性选择器、伪类10标签选择器、伪元素1通配符 *、继承的值0很多人背完这张表以为会用真到项目里还是会懵。因为权重的比较不是十进制的算术和而是按位比较。10个class加起来理论上是100但id的优先级是100按位比较时class这一档永远没资格和id比。所以不要妄图用十几个class去覆盖一个id。真正实用的经验是布局框架用class不要轻易用id写样式。id留给JS钩子或者锚点。以及不要一遇到覆盖不掉的情况就上!important。!important相当于核弹它会越过整条优先级规则。如果一个项目里到处是!important说明选择器结构和命名已经很混乱了。正确思路是回头查那几条冲突规则的权重把不该出现的id或者更具体的选择器去掉。还有一条被忽略的规则同权重时后出现的声明胜出。这个“后”既指CSS文件内部的书写顺序也指样式表在HTML里的引入顺序。所以会出现一个很反直觉的现象明明class在CSS文件后面写了却还是不生效。原因可能是前面的link里头也用到了相同权重的规则并且放在更靠后的位置。排查时先看权重再看顺序最后才考虑!important。2.3 用file://直接打开HTML时的“样式消失”问题搜索记录里有一条典型的报错access to css stylesheet at file:///c:/users/administrator/desktop/...。这明显是双击HTML文件用本地文件协议直接打开导致的。用file://打开页面时浏览器对本地资源的加载限制比http://严格得多。尤其是Chrome这类浏览器对file源下的样式加载会有跨域限制很容易出现HTML能看到CSS却加载不出来控制台报跨域错误。中文路径、带空格的目录、大小写不匹配也会让相对路径失效。我的建议很直接别用双击方式开发页面。本地起一个静态服务器一劳永逸。装了Node的话在项目目录执行npx serve .或者用Python自带的HTTP服务python -m http.server 8080然后在浏览器访问 http://localhost:8080。这样既能正常加载CSS又能提前模拟线上环境的模块加载逻辑。如果你只是临时看一个静态页面也要注意CSS文件路径用相对路径比如 ./css/style.css而不是 /css/style.css因为 / 开头的绝对路径在本地会指向磁盘根目录。3. 选择器从class命名到:is()、:has()的前沿用法3.1 使用频率最高的选择器盘点与权重对照样式写进去了但不是每条规则都能命中你想改的元素这就是选择器的作用。选择器是CSS最容易入门也最容易写废的部分。我先按使用频率盘一批基础款选择器写法示例标签选择器elementp、div、a类选择器.class.cardid选择器#id#header后代选择器A B.list li子代选择器A B.list li相邻兄弟A Bh2 p通用兄弟A ~ Bh2 ~ p属性选择器[attr][typetext]伪类:hovera:hover伪元素::before.card::before开发里用得最多的是class和后代选择器。标签选择器适合做全局reset不适合单独定位某个元素因为一旦写了p { color: red }后续所有p都会受影响覆盖成本很高。id选择器权重太高设计不周时很容易把自己逼进死胡同。伪元素::before和::after非常实用很多装饰性元素都可以不额外写HTML纯粹用CSS生成。权重是选择器绕不开的话题。一个简单的判断方式数一下选择器由几个身份组成。比如 .nav li.active 有一个class(.nav)、一个伪类(:not里暂不提)、一个class(.active)和一个标签(li)权重大约是111#header .title是两个来源id占100、class占10其实就是110。真正写代码时不用算这么细只要知道id class 标签以及选择器嵌套越深越难维护。3.2 :is()、:where()和:has()改写选择器写法近几年的CSS规范给选择器补齐了好几块拼图很多新人只学过旧写法没用上新特性很可惜。先说:is()。它解决的是“一长串选择器写重复”的问题。/* 传统写法 */ .nav a, .nav .link, .nav .menu-item a { color: #333; } /* :is 写法 */ .nav :is(a, .link, .menu-item a) { color: #333; }:is()里放一堆选择器只要其中一个匹配整个规则就成立。需要注意:is()的权重由参数里最高权重的选择器决定。比如:is(#header, .title)里因为有id整个规则的权重会被拉高到id级别这有时候会带来意外覆盖。如果你不想让权重被拉高就用权重大小“零”的:where()。/* :where 权重视为0方便被后续样式覆盖 */ .card :where(.title, .subtitle) { font-size: 14px; }:has()则更有意思它让CSS能“根据子元素/后续元素的状态反推祖先元素的样式”。过去要用JS判断父级有没有某个子元素现在直接写CSS/* 卡片里如果包含图片整个卡片变成上下布局 */ .card:has(img) { display: flex; flex-direction: column; }我第一次用:has()重构代码的时候最直接的感受是终于不用为了给父级加类名在JS里写冤枉逻辑了。它的兼容性现在也足够好现代浏览器基本都支持。唯一要留意的是:has()本身有权重同时也会让浏览器的样式计算变得更重别在超大列表上滥用。3.3 命名策略提前规划比事后补样式更省心选择器写多了之后你会发现最大的问题不是语法而是命名和结构。我见过一份代码结构长这样.wrapper .container .content .text-item span。每次改样式都要数好几层一旦中间某个层级没包住整条规则就断了。我的建议是无论你用不用BEM完整的写法至少要建立“块、元素、修饰符”的思维。简单说块一个独立组件比如 .card元素组件内部的一部分比如 .card__title修饰符组件或元素的状态变体比如 .card--activediv classcard card--active h2 classcard__title标题/h2 p classcard__desc描述/p /div这样命名有两个好处。一是选择器深度被控制住了大部分时候只需要 .card__title 这样一层不用去匹配父级。二是当你需要覆盖默认状态时权重不会叠得太高。很多人后期改不动样式就是因为前期所有选择器都写成 #main .content .card .title一大串权重叠在一起后面任何普通class都覆盖不掉。4. 字体与文本排版省略号、删除线、渐变字的实现细节4.1 字体栈、字号行高的选择经验CSS里最能体现“细节决定成败”的往往不是布局而是文字排版。很多页面功能没问题但看起来“廉价”问题大多出在字体、行高、字距这些细枝末节上。字体栈推荐直接用系统字体不要一上来就引一大串网络字体。系统字体加载快还不会白屏body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Microsoft YaHei, sans-serif; }这行字体的逻辑是在Mac上优先用苹果系统字体在Windows上优先用微软雅黑都没有就随便找个无衬线字体。它保证了相近的设备上表现一致又不需要额外下载字体文件。字号方面浏览器默认16px正文用14-16px都还可以接受但行高建议至少1.5。行高太小的文字挤在一起读起来非常累。比较稳的写法是不写死px而是用无单位数值body { font-size: 16px; line-height: 1.6; }无单位的line-height会按当前字号比例计算子元素字体变大时行高也会自动跟着变不会出现文字溢出或者被裁掉的尴尬。4.2 单行与多行省略号白名单浏览器下的优雅写法标题、卡片摘要、列表文字超出容器时一般都要做省略号。先说单行省略三件套缺一不可.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }white-space: nowrap是禁止换行overflow: hidden是把溢出部分藏住text-overflow: ellipsis让被藏掉的内容显示成省略号。三个都写了才有效。如果你发现自己写了text-overflow: ellipsis却没用多半是漏了白空间处理或者溢出隐藏。多行省略稍微复杂一点过去只能靠JS算高度现在有一个被广泛支持的写法.multiline-ellipsis { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }-webkit-line-clamp: 3表示最多显示3行超出后省略。这个属性虽然带-webkit前缀但在现代Chrome、Firefox、Safari、Edge里都可用实用性很高。要注意使用后元素会被强制变成-webkit-box布局如果外层使用了flex且没有设置min-width可能出现宽度塌陷。我给flex子项加省略样式时通常会顺手补一个min-width: 0这个坑排查起来极其费时间。4.3 文本位置调整与删除线的日常应用热搜里有“怎么调整css容器里的文本位置”我猜很多人是遇到了水平垂直对不齐的问题。文本的水平位置用text-align这个大家都知道但垂直位置就不只是看一个vertical-align了。最基础的规则是vertical-align只对内联元素、内联块元素以及表格单元格生效。对一个普通div里的文本直接设vertical-align是没用的。想让块级容器里的文字垂直居中老办法是设置行高等于容器高度.box { height: 60px; line-height: 60px; text-align: center; }这个写法只适合单行文本多行文本会被挤爆。现代项目里我更推荐用flex.box { display: flex; align-items: center; justify-content: center; }这样不管是单行还是多行不管容器高度变没变文本位置都能自动保持居中。低频但有用的还有删除线。最简单的写法是text-decoration: line-through但默认删除线紧贴文字视觉上有点丑。可以通过text-decoration-thickness控制线宽用text-underline-offset控制线和文字的距离.del { text-decoration: line-through; text-decoration-thickness: 1px; text-underline-offset: 4px; }顺手说一句删除线不只能用语义上的“已删除”很多时候价格标签、任务完成态、折扣信息都会用到它。控制好粗细和偏移观感会精致很多。4.4 background-clip: text打造渐变字体字体渐变几乎是“CSS看起来很高级”的入门款。它的原理不是给文字本身刷渐变而是用背景渐变铺满整个盒子再把背景裁剪到文字形状里最后把文字颜色变成透明。.gradient-text { background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }background-clip: text是核心它把背景裁剪到文字的前进区域。color: transparent让原本文字的颜色消失露出底下的渐变背景。如果只写了渐变和clip没把颜色变透明你看到的还是一坨普通颜色字。兼容性上-webkit-background-clip: text在现代浏览器里完全可用。稳妥起见可以先给一个正常的color再写clip规则这样遇到老浏览器至少能退回普通文字颜色.gradient-text { color: #333; background: linear-gradient(135deg, #f6d365, #fda085); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }这个技巧还可以和动画、背景位移结合做出流光扫过的文字效果。不过要控制用量满屏渐变字会显得很廉价通常只用在标题、logo、重要数字上。5. 盒模型、居中与清除浮动三个绕不开的基础题5.1 box-sizing为什么老手写样式先重置它进入布局主题之前先把盒模型说透。每一个HTML元素都可以想象成一个盒子由content、padding、border、margin四部分组成。盒子最终占据的空间不只是content的宽高你要把padding和border都算进去。默认情况下浏览器使用content-box模式你给一个元素写width: 200px这个200px指的是内容的宽度。如果你同时设置了padding: 20px; border: 1px solid #ccc实际渲染出来的总宽度是200 202 12 242px。这就会导致一个经典问题你算好200px的容器再加padding发现布局挤爆了。于是开始反复调宽度调完左边右边又对不齐。老手的解法是统一改成border-box*, *::before, *::after { box-sizing: border-box; }border-box模式下width: 200px直接规定整个盒子从border外沿到border外沿的宽度是200pxpadding和border都在这个宽度内部压缩。不管padding怎么改布局宽度不变心智负担小很多。很多UI框架和reset样式都默认做这件事如果你的项目还没做赶紧加。5.2 居中方案快速选型从margin auto到transform“如何让一个元素居中”可能是CSS提问率最高的问题。它没有唯一答案关键是按场景选方案。行内元素水平居中给父容器设text-align: center。块级元素水平居中给元素自己设margin-left: auto; margin-right: auto同时保证它有确定宽度。垂直水平居中现代首选flex三行代码搞定。已知宽高的弹层绝对定位加负margin或者绝对定位加translate偏移。我用过最多的是flex方案.center { display: flex; align-items: center; justify-content: center; }这个写法对内部元素数量和尺寸没有任何要求父容器高度变化也能自适应。Grid方案则更简洁.center-grid { display: grid; place-items: center; }place-items: center同时控制了水平和垂直对齐适合整块布局的居中场景。至于transform: translate(-50%, -50%)更适合配合position: absolute定位弹层.float-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }它不受自身宽高影响左边和上边分别偏移50%再用transform拉回一半。注意transform的translate百分比是相对元素自身尺寸计算的这一点恰好是这套方法成立的关键。5.3 清除浮动古典手段与现代替代方案浮动float在当年布局工具匮乏的年代是撑起双列、三列布局的主力。它的设计初衷其实只是“文字环绕图片”所以浮动元素会脱离正常文档流导致父容器高度塌陷。于是就有了清除浮动。最经典的clearfix.clearfix::after { content: ; display: block; clear: both; }原理是给父容器末尾追加一个看不见的块级伪元素强制它去避开左右两侧的浮动元素从而把父容器高度重新撑起来。还有一个野路子是给父容器设overflow: hidden也能触发BFC把浮动元素包住但副作用是溢出内容会被剪掉容易出问题。现在Flex和Grid已经完全可以替代浮动做页面布局浮动基本回归到文字环绕这个本职。如果你在维护老项目还是会遇到clearfix在新项目里遇到布局问题先别用float改成flex会省很多事。但“脱离文档流”这个概念必须掌握因为后面学position: absolute、定位布局时它还会反复出现。6. 五种布局方式的横向对比与选型思路6.1 常规流和浮动最原始也最容易理解的排版HTML里每个元素的默认布局方式就是常规流normal flow。块级元素从上往下排列宽度默认填满父容器行内元素从左往右排列宽度随内容撑开。这是最开始接触网页时看到的那种一列一列的朴素效果。在常规流基础上float可以让元素向左或向右浮动让后面的文字环绕它。举个例子把一张图片float: left后面几段文字就会自动绕到图片右侧形成报纸排版的效果.article img { float: left; margin-right: 16px; }但浮动布局最大的问题是计算高度和间距需要不少人工干预。每个浮动元素都要想着怎么清除不同列表项之间还要手动margin撑出间隔。理解它没问题日常开发尽量少用。6.2 定位布局堆叠、吸顶与绝对定准position属性的值从static到relative、absolute、fixed、sticky每一档都有不同语义。relative是相对元素原本的位置做偏移偏移的间隙不会把其他元素挤走。它最常见的用法是做absolute的定位参考系。absolute是相对最近的定位祖先来定位如果祖先里没有relative、absolute或fixed它就会一路向上找到body甚至视口。fixed是相对视口固定滚着滚着还在那里适合导航栏、悬浮按钮。sticky是relative和fixed的混合体元素在滚动到指定阈值之前是普通文档流过了阈值就像fixed一样吸住.sticky-nav { position: sticky; top: 0; }定位布局适合做浮层、弹窗、吸顶场景不太适合搭建整个页面的骨架。因为绝对定位脱离文档流后后续内容会自动往上补造成高度错乱。把所有元素都用absolute拼页面后期想改上下顺序会痛不欲生。6.3 Flex与Grid现代布局的分工与选择现在绝大多数页面布局基本就在Flex和Grid之间做选择。简单记Flex擅长一维排列Grid擅长二维网格。Flex的核心理念是“沿主轴排列”适合导航栏一排按钮、卡片横排、按钮组、表单一行多个输入框这类场景。几条常用规则.flex-row { display: flex; align-items: center; justify-content: space-between; }justify-content控制主轴方向的对齐align-items控制交叉轴方向。空间不够时可以让子项换行flex-wrap: wrap。只要记住主轴和交叉轴这两个概念大部分flex布局都能推导出来。Grid则更适合经纬分明的页面骨架.grid-page { display: grid; grid-template-columns: 240px 1fr; grid-template-rows: auto 1fr auto; gap: 16px; }这段代码的意思是整个页面分两列左边固定240px右边占剩余空间行分三行上下自动中间撑满。gap是网格间的统一间距省去了一大堆margin计算。五种布局方式列个表方便快速对比布局方式维度适用场景主要缺陷常规流一维文档类页面、正文排版做不了复杂结构浮动一维文字环绕、古典双列高度塌陷需要清除定位二维语义弹层、吸顶、角标脱流需小心处理层级Flex一维导航、表单、卡片横排二维网格别扭Grid二维页面级网格、栅格系统兼容性要求现代浏览器选型时先问自己这是一行排列还是一块网格一行用Flex一块用Grid弹层用定位正文用常规流。浮动不要主动用。7. 悬停、过渡与3D旋转从鼠标移入到涟漪光圈7.1 hover结合transition鼠标移入事件的基础玩法很多搜索结果都在问“CSS鼠标移入事件”。严格说CSS里没有事件只有伪类:hover。鼠标移入元素时:hover匹配成功你可以改变它的样式.btn { background: #4a6cf7; transition: transform 0.2s ease, box-shadow 0.2s ease; } .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(74, 108, 247, 0.3); }注意这里的transition非常关键。如果不写鼠标移入瞬间元素会“啪”一下跳到新状态写了transition浏览器会在0.2秒内平滑过渡。transition四个关键部分是属性、时长、缓动函数、延迟例如transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s;除非调试否则不建议用all因为它会把所有可过渡属性都拖进动画过程性能开销变大。比如只想改变transform和box-shadow就明确列出来。做hover效果时还有两个小细节一是hover上不写display属性因为display无法过渡会出现闪跳二是把动画都放在默认状态别只放在:hover里不然鼠标移出时元素会瞬间弹回原状。7.2 拆解transform: rotateY(60deg) translateZ(300px)这个写法一看就是在做3D卡片效果。想理解它先记住transform的执行顺序从右往左看最右边的变换先生效。来看这行transform: rotateY(60deg) translateZ(300px);按“从右往左先生效”的规则元素先沿自身Z轴向前移动300px也就是从屏幕里朝你的方向推出来300px然后整体绕Y轴旋转60度。所以最终效果是一张先向前推出一段距离、再向右偏转60度的卡片。配合透视属性才有效果.stage { perspective: 800px; } .card { transform: rotateY(60deg) translateZ(300px); }perspective要写在父元素上它给整个舞台建立透视感越小的值近大远小的效果越强烈。如果没有perspectiverotateY只会造成各种非均匀缩放和位移看起来像一张纸被压扁而不是立体的旋转。如果把两个变换顺序反过来transform: translateZ(300px) rotateY(60deg);同样是按从右往左执行元素会先绕Y轴旋转60度再沿着已经偏转后的局部Z轴方向推进300px。视觉上卡片就不是“向前推再旋转”而是“旋转之后沿着新的Z轴飞出去”落点完全不同。这就是transform顺序的威力。7.3 3D旋转正负判断与涟漪光圈扩散动效实现3D旋转里的正负方向很多人栽跟头。CSS里有一个右手定则拇指指向坐标轴正方向四指弯曲的方向就是正角度旋转方向。X轴正方向朝右Y轴正方向朝下Z轴正方向指向屏幕外朝向你。rotateX正角度上边缘向后倒下边缘向前翘。rotateY正角度右边缘向你转过来左边缘向后去。rotateZ正角度按顺时针旋转。用这个规则能解释很多现象。比如rotateY(60deg)是一张卡片右边向你翻过来看起来像翻开一本书的右侧页如果你想要左边翻起来就要用负角度rotateY(-60deg)。涟漪光圈扩散是另一类常见动效。一个按钮或卡片被鼠标移入时从中心向外扩散一个光圈。纯CSS可以做简化版.ripple { position: relative; overflow: hidden; background: #4a6cf7; } .ripple::after { content: ; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); transform: translate(-50%, -50%); opacity: 0; } .ripple:hover::after { animation: ripple 0.6s ease-out; } keyframes ripple { from { transform: translate(-50%, -50%) scale(1); opacity: 0.4; } to { transform: translate(-50%, -50%) scale(20); opacity: 0; } }这段代码在鼠标移入时用::after伪元素生成一个小圆点通过animation把它从scale(1)放大到scale(20)同时透明度降到0形成光圈扩散消失的视觉效果。用transform做缩放而不是直接改宽高是为了让动画只作用在合成层上避免反复触发重排性能更稳。纯CSS的涟漪只能固定在元素中心如果希望光圈从鼠标点击的精确位置扩散需要JS把鼠标坐标写入CSS变量比如.ripple::after { left: var(--x, 50%); top: var(--y, 50%); }这算进阶玩法基础阶段能做出中心扩散版已经很够用。8. 原子性CSS与自定义样式让零散的经验沉淀成自己的工具集8.1 原子性CSS的核心理念与争议聊完动效来到一个容易被初学者忽略但实际影响深远的话题原子性CSS。它的思路是不为每个组件写一套独立样式而是把所有基础样式拆成一个个只做一件事的工具类。比如.flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .text-center { text-align: center; }一个按钮可能是这样拼出来的button classflex items-center justify-between px-4 py-2 rounded按钮/button很多人第一次看到这种写法会觉得HTML很脏但用久了会发现它有两个巨大优势一是样式复用率极高所有组件都在同一套原子类上组合不会出现“同样的效果写三份”的情况二是覆盖成本极低改一个间距不需要新增一条更高权重的CSS规则直接换一个class就行。Tailwind CSS这类工具就是原子化思路的代表。原子化CSS的争议也很明显HTML会变得很长设计意图散落在class里非前端同学维护起来不友好。但作为学习方向它至少传递了一个重要观念样式要可组合、可复用而不是复制粘贴。8.2 把自己的常用样式沉淀成“本地小框架”我自己的做法是维护一份base.css把重置样式和频繁使用的工具类放在一起。不需要依赖任何框架纯粹沉淀个人经验/* reset */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } img { max-width: 100%; display: block; } /* 工具类 */ .text-overflow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .flex-center { display: flex; align-items: center; justify-content: center; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }这份文件是我CSS学到现在的“个人词典”。每学到一种看起来高频的写法我就把它抽象成一个短类名放进base.css里。下次做新页面先查自己的词典而不是又去搜索框里重新找一遍。记录本身也会倒逼你思考这段样式的核心职责到底是什么能不能与其他页面共用8.3 在第三方浏览器/工具里用自定义CSS美化主页有很多场景没法等你自己搭站点比如某个浏览器或工具支持给指定页面注入自定义CSS。这也是热搜里“via里的自定义css怎么用”这类问题出现的背景。这类功能本质上和浏览器自带的“开发者工具临时加样式”是同一回事工具启动时会把你写入的样式作为额外样式表附加到页面上优先级通常够用能覆盖不少默认效果。如果你想美化一个自己的起始页最常见做法是去目标页面右键检查元素找到想改的背景、字体、间距对应的选择器然后写一小段自定义CSS粘贴到设置框里。别指望一上来就改出精美主页先做三件小事调页面背景、统一字体、隐藏不喜欢的按钮。我把这个过程写得具体一点按F12或右键“检查”定位目标元素的class或id。在自己的样式里复刻这个选择器加上想要的样式。注意优先级如果覆盖不掉可以在选择器后面补一层祖先比如 body .xx或者用带“自定义”语义的类名挂载。每次改完保存并刷新观察变化再做下一步。这种临时自定义CSS的本质和写正常项目完全一样只是把CSS职责从“设计一个页面”变成了“修整一个页面”。它同样要求你会看选择器、懂优先级、理解层叠。等你在这类小工具里反复改过几轮再回头写正经项目很多基础概念已经变成肌肉记忆了。我在这条路上最有体会的一点是CSS学多少很大程度上取决于你“拆”过多少真实页面。照着书学一遍属性表远不如找一个现成页面尝试复刻它、覆盖它、改造它来得扎实。第一篇基础内容先聊到这里后面我会继续拆CSS变量、响应式断点、以及如何用工程化工具组织你的样式。学CSS不用急把每一层规则想清楚页面自然会替你说话。