上次发完 HTML 快速入门之后后台收到不少留言标签、属性都能看懂照着模板也能改几个页面可一旦自己动手做一个组件样式要么死活不生效要么改一处崩三处。问题出在哪儿我看了几个读者的代码基本都卡在 CSS 上。HTML 的规则简单直接它只负责告诉浏览器“这里是个标题、这里是一段文字、这是一张图片”。CSS 却完全不同它更像一套“看情况决定结果”的规则系统——同样的声明放在不同位置、选不同选择器、遇到不同父级最终效果可能都不一样。这篇是系列第二篇专门把 CSS 讲透。我不打算把所有属性罗列一遍那对新手是最低效的学法。整篇按“浏览器怎么算样式 → 单元素外观如何控制 → 多元素布局怎么排 → 页面如何自适应 → 出问题了怎么查”这条真实干活顺序展开最后用一个很常见的卡片组件把所有知识点串起来。适合刚学完 HTML 基础、打算认真写出“能看且好看”页面的同学也适合写过一些样式但从未系统梳理过优先级、盒模型和 Flexbox 的读者。1. 先搞清楚 CSS 是怎么把样式“计算”到标签上的选择器、层叠与盒模型很多人把 CSS 理解成“给标签加样式”这个说法没错但容易让人忽略一个关键事实浏览器并不是直接按你写的顺序应用样式而是先计算每条规则的权重再决定最终哪个声明生效。不理解这一层就会频繁遇到“我明明写了为什么没变化”的怪事。1.1 选择器优先级不是谁写在后面谁赢而是谁权重高谁赢先来看一个几乎所有新手都会遇到的场景。有这样一段 HTMLp idintro classdesc这句话是什么颜色/pCSS 里写了三条规则#intro { color: blue; } .desc { color: green; } p { color: red; }最后浏览器显示的是蓝色。为什么不是后写的p { color: red; }覆盖掉前面因为 CSS 在选择规则时要先算权重权重不只看书写顺序。权重从高到低大致是这样排序的内联style属性 ID 选择器 类选择器、属性选择器、伪类 标签选择器、伪元素。怎么快速记住我个人的理解方式是给它们简单打分内联样式算 1000 分ID 选择器算 100 分类、属性、伪类是 10 分标签和伪元素是 1 分。两条规则竞争同一个元素时比分高者胜比分相同再看谁写在后面。这个知识点对应一个非常常见的排查场景你在外部样式表里给某个元素设了背景色但页面上没反应。打开开发者工具一看发现是项目里另一条类名选择器的样式把你这层的覆盖了。因为不得不用 CSS 权重去推算哪条规则“更重”。这也是为什么我一般建议新手在项目里少用 ID 选择器来设置样式虽然它方便但权重太高后面想覆盖得额外加类名甚至!important。说到!important它的优先级凌驾于所有常规规则之上甚至能压过内联样式。但我的真实建议是平时尽量别用。它是绕过整个权重体系的开关偶尔用来救急可以一旦分散在项目各处样式表很快会变成“谁也没法准确判断哪条会生效”的泥潭。排查 CSS 问题时先把所有!important摘出来往往能发现不少莫名问题的来源。1.2 盒模型你现在写下的 width到底是不是最终视觉宽度每个元素在页面上都是一个矩形区域从里到外分成四层content 内容区、padding 内边距、border 边框、margin 外边距。这个结构叫盒模型听起来很像概念但它是排查“宽度不对”问题的关键。新手最常见的困惑是我给一个 div 设置了width: 400px;但在页面上量出来实际占据了 440px。原因很简单默认的盒模型下width只代表 content 区的宽度padding 和 border 的宽度要额外计算。比如width: 400px; padding: 20px; border: 1px solid #000;这里 400 是内容区两侧 padding 40两侧 border 2视觉总宽度 442px差出的部分会顶到父容器之外。解决办法非常省事全局加一句* { box-sizing: border-box; }改成border-box之后你写的width: 400px就已经把 padding 和 border 全部包含在内视觉宽度一目了然。这也是现在各种组件库的默认选择因为大部分时候我们希望的是“说 400 就是 400”。盒模型里另一个让人栽跟头的点是 margin 的合并现象。上下两个相邻元素的 margin 会合并,而不是相加。比如上面元素margin-bottom: 30px;下面元素margin-top: 20px;你直觉上认为间距是 50px实际浏览器只取较大的 30px。我后来养成了一个习惯列表项之间的间距只设置margin-bottom或者只设置margin-top绝不上下两头都设置这样能天然躲开很多 margin 合并带来的“间距忽大忽小”问题。1.3 继承、默认 display以及那些“设置了却不生效”的属性CSS 里还有一类规则叫继承。某些属性设置父元素后子元素会自动套用。最典型的就是文字相关属性font-size、color、line-height等。所以你会看到给body设置字体颜色后页面所有文字都跟着变了这就是继承的功劳。但布局相关的属性基本不继承。你给父容器设置width: 600px;子元素不会自动也变成 600px。所以面对 CSS 时可以把属性粗略分成两类来记忆影响文字内容外观的倾向于继承影响块级空间占位的基本不继承。这个划分不能覆盖所有例外但足够应付绝大多数基础场景。还有一个高频困惑是默认display带来的“属性设置了没反应”。浏览器给每个标签都有默认displaydiv那一类是块级元素独占一行宽高设置有效span、a那一类是行内元素width和height设置了无效上下 margin 和 padding 也不会推动周围内容。很多新手在span上写宽高怎么看都无效就是因为忽略了这一层。遇到文字并排又需要设置宽高的时候display: inline-block是个过渡方案它既保留了行内元素从左到右排列的特性又允许设置宽高和上下间距。不过说实话现在我更多是在遇到旧代码时看到这种写法新布局基本都交给后面要讲的 Flexbox 了。技术选型就是这样新方案不是因为它新才受欢迎而是它真的省掉了大量手工补偿工作。2. 布局是 CSS 的分水岭从文档流、浮动一路走到 Flexbox如果说文字颜色、盒模型这些只是单元素的“外观”那布局就是让你从“装饰一个盒子”升级到“排一排盒子”的核心能力。这也是 CSS 学习中最容易产生挫败感的地带。很多人学了好几个月写单个样式都没问题一上手排版面就懵根源就是没有建立起“页面上元素如何摆放”的直觉。2.1 文档流与浮动老派布局为什么让新手崩溃先建立一个底层概念文档流。页面在没有额外干预时块级元素从上往下垂直堆叠每个占据完整一行宽度行内元素从左到右排列排满自动换行。这就是默认的“正常文档流”天然适合阅读文章。但做网站时光靠文档流是不够的因为你会想把多个元素横向摆放。浮动float的本意特别简单为了文字环绕图片。写了float: left之后图片会靠左文字围绕在它右侧排布这是它在文档用途中的正确用法。后来开发者发现它能横向排列多列就硬拿它搭网页栅格问题也集中爆发了浮动元素相当于脱离了普通文档流父容器不再“看见”它的高度于是父容器高度塌陷成 0背景色消失、下方内容异常顶上来。应对浮动塌陷旧项目里经常能看到一个叫 clearfix 的小技巧.clearfix::after { content: ; display: table; clear: both; }它的原理是在父容器末尾生成一个不可见的伪元素并强制它清除两侧浮动从而把父容器高度撑回来。今天的项目我不建议再用浮动做多列布局不是赶时髦而是它有太多需要手工补偿的地方清除浮动、处理间距、考虑塌陷。这些原本不必由开发者承担的工作等你看完下一节的 Flexbox 就会明白为什么它可以被取代。但读旧代码时遇到 float 也不用慌知道它是干嘛的、塌陷怎么解就足够了。2.2 Flexbox 主轴与交叉轴一句话点破排列逻辑Flexbox全称 Flexible Box Layout弹性盒布局。它解决的核心问题是一行或一列内多个元素的空间如何分配。这一节我会尽量少列属性先帮你在脑子里建起坐标系。一个父容器设置display: flex;后它就变成了一个 flex 容器里面的直接子元素变成 flex item。这时容器内部会有两条轴线一条主轴一条交叉轴。主轴的方向由flex-direction决定默认row也就是水平方向改成column就变成垂直方向。交叉轴永远垂直于主轴。所有子元素默认会沿着主轴排列。想控制它们在主轴上的对齐用justify-content想在交叉轴上对齐用align-items。初学者最容易把这两个属性记混我的土办法是justify和文字排版中的text-align: justify同源所以你直觉上可以关联到“水平”方向而align-items管的是垂直方向。一旦把主轴方向搞清楚这两个属性的使用就不会错位。这里放一个几乎人人都在用的例子让某个子元素在容器中水平和垂直同时居中。.parent { display: flex; justify-content: center; align-items: center; height: 200px; }这是前端布局里使用频率最高的三五行代码。理解了主轴和交叉轴再看其他 flex 属性比如flex-grow、flex-shrink、flex-basis就不会觉得它们是一堆离散难记的参数了它们本质上都是在回答一个问题主轴上的空间到底按什么规则分给各个子项2.3 常用布局三件套居中、等分、两栏根据我日常做页面的经验Flexbox 用到最多的场景可以归纳成三件套居中、等分、两栏。先把这三个场景吃透你就能覆盖一大半实际布局需求。第一居中。前面已经给了 flex 实现水平垂直居中的方法。但也要区分场景如果只给一行文字居中父容器用text-align: center就够了没必要上一整套 display:flex。Flexbox 是为复杂对齐设计的不是所有居中都必须用它。第二等分。父容器display: flex;三个子项都写flex: 1 1 0%;这三个值分别代表flex-grow、flex-shrink、flex-basis。翻译成人话就是允许放大、允许缩小、初始宽度为 0。三个子项基于同样的参数最后会把容器宽度平均分成三份。如果还要控制子项之间的间距直接在容器上加gap: 16px就行。这里有个新手常犯的误解以为设置了 flex 之后子项会自动产生间距其实不会间距必须显式设置。第三两栏。比如左边固定 200px右边占满剩余空间.left { flex: 0 0 200px; } .right { flex: 1 1 auto; }0 0 200px的意思是不放大、不缩小、固定 200px。右边1 1 auto则表示可以放大去吃掉剩余空间。这套组合拳简单可靠我写了多年的页面局部组件绝大多数都在用这几种模式。至于同样出名的 Grid 网格布局它和 Flexbox 的分工关系我的理解是Flex 擅长一维排列也就是一行或一列内处理多个元素Grid 擅长二维排列可以同时控制行和列。做页面整体栅格时 Grid 威力很大但作为快速入门先把 Flex 这一维吃透比两个一起学从效果上更扎实。3. 让页面自己去适应屏幕响应式设计不是附加题是基础功现在打开任何网站只会看到一种屏幕尺寸的时代早就过去了。手机、平板、各种宽度的笔记本窗口都可能是你页面的访问环境。响应式这件事对新手来说不是最后才考虑的加分项而是写样式时就要一直带着的底层意识。如果页面在窄屏下一派混乱就算桌面端再精致也很难称得上合格。3.1 媒体查询的断点不要按设备型号背按页面内容定响应式最基础的手段是媒体查询。简单说它可以在满足某个屏幕条件时覆盖原有的样式。最常见的写法是media (max-width: 768px) { .card-item { width: 100%; } }意思是窗口宽度小于等于 768px 时.card-item的宽度变成 100%。很多人学到这里会去背各种设备的宽度值比如 iPhone 是多少、iPad 是多少。我的建议是别这么干。设备更新速度快今天背的数值明天就不准了。更实用的方法是把浏览器窗口从宽慢慢拖到窄边拖边看哪个宽度下页面布局开始变得难受比如卡片挤成一团、文字折行非常狼狈就把那个宽度记下来作为断点。真正好的断点是从内容出发的而不是从设备表格出发的。另外可以养成“移动优先”的书写习惯先把默认样式写成一个窄屏下也能正常显示的版本再用媒体查询在屏幕变宽时做增强布局。这样做的好处是基础样式必须尽量精简而且窄屏体验被优先保证桌面端只是在这个基础上加内容。3.2 用好这几种单位自适应效果比“缩放”自然得多响应式不只是媒体查询的断点更基础的是你的容器宽高尽量不要写死。宽度可以用百分比max-width: 1200px加上margin: 0 auto是撑起整页内容区的经典组合。但这些单位新手很容易混我先用表格梳理一下最常用的几个单位相对什么计算常见使用场景px固定像素边框、固定尺寸的小控件%父容器的宽高流式布局、撑满容器em当前元素的字体大小局部间距微调嵌套多时容易失控rem根元素 html 的字体大小全局字号与间距的比例统调vw / vh视口宽度 / 高度的 1%全屏背景、大块区域撑满窗口其中vw和vh对新人来说比较陌生但也很好用。比如想让一个引导页的背景图占满整个屏幕高度直接写height: 100vh;就好它永远和视口一样高不用去猜父容器的高度到底是多少。字体自适应还有一种省事写法用clamp()这个函数font-size: clamp(16px, 1.5vw 8px, 28px);这里三个参数分别是最小值、理想值、最大值。意思是字号至少在 16px 以上理想状态下随视口宽度微调超过 28px 就不再放大。我最近几个页面标题就是用的这种写法比起在多个媒体查询里反复改字号代码量小了很多实测在手机和桌面间过渡非常顺滑。3.3 图片、间距和点按区响应式里容易被忽略的细节布局的响应式比较容易注意到但有几个细节经常被忽略等你发现时往往已经在真机上翻了车。一是图片撑破容器。很多图片默认宽度是自身像素宽度如果不做约束一张 1920px 的截图会把手机端的容器瞬间撑爆。最省事的方法是在全局样式中写img { max-width: 100%; height: auto; }加了这条所有图片在窄屏下都会按容器宽度自动缩放并且保持宽高比例。二是两侧安全边距。手机屏幕上文字和按钮如果贴到屏幕边缘视觉和触感都很差。我的习惯是正文两侧至少保留 16px 的 padding这个数值不需要随屏幕宽度变化固定就好它保证的是内容在圆角屏和普通屏上都有呼吸空间。三是触控区域。手机端指尖点击的最小舒适区域一般是 44px 高。如果某个链接或按钮做得太小可以给它增加 padding把可点击区域扩大而不是单纯调大字号。这个优化桌面端看不出差别但移动端的体验差距非常大。顺带提醒一个关于 viewport 的细节。响应式布局有一个前置条件就是页面 head 里要有这句meta nameviewport contentwidthdevice-width, initial-scale1.0没有这句话手机浏览器会为了模拟 PC 宽屏而把整个页面缩小显示你所有的媒体查询都会失效。这种问题发生时页面不是乱了而是整体变成“小人国”排查起来非常迷惑。4. 完整组件实战写一个能端得上台面的卡片前面讲了不少原理和零散属性但学 CSS 最忌讳的就是只看不写。这一节我把前面所有知识点串起来做一个完整的博客文章卡片包含图片、标签、标题、摘要和按钮。这类卡片在任何内容型站点里几乎是必备组件做完之后你可以直接改成作品集卡片来用。4.1 先把 HTML 结构理清楚类名取对了CSS 就成功一半先写 HTML 骨架div classcard img classcard__img src你的图片地址 alt封面图 / div classcard__body p classcard__tag前端入门/p h2 classcard__title这是一个卡片标题/h2 p classcard__desc这里是卡片摘要内容两三行文字长度正好多写几句可以让卡片看起来更完整。/p button classcard__btn typebutton阅读全文/button /div /div我推荐类名用card和card__body这类写法这是一种从命名思想上借鉴来的习惯card__btn一看就是卡片内部的按钮card__desc是卡片的描述文字。每个模块用自己的专属前缀写样式时不会误伤其他区域。很多新手写 HTML 时比较随意直接用classbox、classbtn这种通用名字。短期看着方便等页面复杂起来样式互相覆盖、改一个地方牵连一片再回去重命名成本远高于一开始花十秒钟好好取类名。4.2 CSS 一步步叠先整体后局部先布局后美化第一步给卡片定基本外观和容器约束.card { width: 360px; margin: 24px auto; background: #ffffff; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); font-family: PingFang SC, Microsoft YaHei, sans-serif; }这里overflow: hidden很容易被忽略但它很重要它把图片的四个角裁剪进卡片的圆角范围内否则图片会直直地顶出圆角边框。margin: 24px auto用于让卡片在页面中水平居中方便单独预览。第二步给正文区域加内边距并设计标签、标题、摘要的间距和字体.card__body { padding: 20px; } .card__tag { display: inline-block; padding: 4px 10px; font-size: 12px; color: #2575fc; background: #edf3ff; border-radius: 999px; margin-bottom: 12px; } .card__title { font-size: 20px; line-height: 1.4; margin-bottom: 8px; } .card__desc { font-size: 14px; line-height: 1.6; color: #666666; margin-bottom: 16px; }标签这里有个细节display: inline-block是必须的因为如果不设置span或p这类标签默认占满一行padding 上下撑开的效果会很奇怪。现在把它改成 inline-block就能既不独占一行又正常接受 width 和 height。字号从小到大依次排开阅读层次自然就出来了。第三步把按钮做成全宽可点击的完整操作区.card__btn { width: 100%; padding: 10px 0; border: none; border-radius: 8px; background: #2575fc; color: #ffffff; font-size: 14px; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } .card__btn:hover { background: #1b5fd0; transform: translateY(-2px); }按钮原生控件默认不继承页面字体也带着自带的边框和背景所以我把border、font-size、cursor都显式写出来。hover 效果用了transform: translateY(-2px)配合transition鼠标悬停时按钮会有轻微浮起的感觉。这种微交互不复杂但能让组件显得精致不少。4.3 让卡片适应屏幕补一个媒体查询最后再补一个窄屏适配。前面已经提到过断点取舍的原则这里直接把之前的知识用起来media (max-width: 480px) { .card { width: 100%; margin: 12px 0; } .card__body { padding: 16px; } }你可以把浏览器窗口从宽慢慢拖到窄观察卡片在哪个宽度下不再舒适然后按实际情况调整断点。这个组件整体做完之后居中、间距、圆角、交互反馈、自适应都覆盖到了可以作为一个很好的日常练习模板。5. 调试与误区很多 CSS 问题答案就在开发者工具里前面讲完怎么写 CSS这一节我想聊聊怎么查 CSS 问题。很多初学者遇到样式异常第一反应是去编辑器里乱改改几轮再刷新实在不行就删了重写。这样试下去效率太低。实际上浏览器自带的开发者工具就是 CSS 的显微镜和 X 光机用好了大多数问题的答案都藏在那里。5.1 开发者工具不是摆设样式面板和盒模型面板怎么用遇到样式问题第一步不应该是搜索或者猜而是右键点击出问题的元素选择“检查”打开浏览器开发者工具。切到 Elements 面板后左侧可以看到页面的 HTML 结构右侧的 Styles 区域会列出所有命中这个元素的 CSS 规则。你会发现有些规则前面有一条横线划掉这说明它被同优先级或更高优先级的规则覆盖了。这时候你就能看到“为什么我写的样式没生效”的直接答案要么是权重不够要么是规则被后面的覆盖。把鼠标放到规则上还可以临时勾选或取消某一条声明立刻看到效果变化这一招在定位问题对象时极高效。盒模型面板则是查看元素尺寸的工具。点选一个元素后在开发者工具里通常会看到一个四色块图里面分层标出 content、padding、border、margin。鼠标在各个区块上悬浮可以直观看到这个元素在页面上的真实占用空间。如果父元素高度异常比如明明有内容却显示为 0这个面板会立刻暴露问题所在。我一直觉得CSS 排错能力的快慢不在于你是不是记住了更多属性而在于你能不能熟练把问题的分子锁定到“选择器没命中的某一层、规则被覆盖、盒模型尺寸算错、文档流位置偏”等几个小方向里。开发者工具就是帮你做这种拆分的。5.2 高频踩坑清单这几个现象背后是同一个根源这里我把平时见到的几个高频问题整理一下它们表面症状不同但排查思路是相通的。第一个是父元素高度塌陷为 0。子元素明明有内容父元素却像被掏空一样。点开父元素的盒模型面板如果高度真的是 0第一想法去看子元素是不是全部浮动了。浮动元素脱离了文档流父容器自然不知道要撑起多高。解决方案是换 Flex 布局或者给父容器加 clearfix。第二个是上下 margin 没有按预期形成间距。两个相邻元素各自设置了不同方向的 margin结果间距看起来比设置的小。这就是 margin 合并。前面讲盒模型时说过处理的方法就是同一方向只设一边比如只在列表项上设margin-bottom不在下一项的margin-top上再设值。第三个是 z-index 明明设得很大元素仍然被压在下面。z-index 并不是全局的“层数排行榜”它只在同一个层叠上下文内进行比较。如果两个元素处于不同的父级容器而父级容器各自形成了层叠上下文比如有transform、opacity这些属性时子元素的大 z-index 只能在它所属的上下文内部起作用。遇到这类问题别急着把 z-index 调到 999999先检查两个元素所在的父级是否各自创建了独立的分层环境。第四个是按钮或输入框的文字样式设置无效。原生表单控件默认不继承页面的字体和颜色所以你在body上写的font-family、font-size、color对它们不生效。需要给按钮等元素单独设置font-family: inherit;或者像我在卡片组件里那样显式写全所有文字属性。5.3 三条让我少走弯路的 CSS 书写习惯分享三个我实际用了多年、强烈建议早点养成的 CSS 习惯。第一样式表开头先做全局重置。我个人最小的重置版本是这样* { margin: 0; padding: 0; box-sizing: border-box; }这行代码清掉了浏览器默认的间距和盒模型差异。你会发现后面写的每个 margin 和 padding 都是自己有意识加上去的而不是跟默认值暗中较劲这种“确定性”对新手尤其重要。第二用 CSS 变量管理颜色和尺寸。把常用的主题色、圆角、间距先定义为变量:root { --primary: #2575fc; --radius: 8px; } .card { background: var(--primary); border-radius: var(--radius); }以后想换主题色改一个位置全站生效。现代 CSS 自带这个能力不需要引入任何额外工具。这种设计对于不打算使用大型前端框架的页面也完全够用。第三写完一小段样式就刷新看一下不要一口气写出几十行再统一检查。这个习惯看着简单但能显著降低排错成本。每写完一个模块就确认一下效果出问题时基本能立刻定位到刚写的几行代码而不是在整份样式表里大海捞针。说个我个人的体会CSS 的进步往往不是靠背熟更多属性而是出现问题时能下意识地在心里把可能原因分成三类——“选择器有没有命中”“规则是不是被覆盖了”“盒模型和文档流有没有出问题”然后到开发者工具里一一验证。刚接触的前两周可能会觉得吃力等这个排查思路固定下来你写样式的速度会明显上一个台阶。这篇我们就聊到这里下一篇讲 JavaScript 时我们会用同样的方式先搞懂运行机制再动手写。