1. 写在前面这份笔记到底记什么先坦白讲我学 HTML 和 CSS 的过程挺狼狈的。最开始照着网上的教程敲代码敲了三天问自己到底学会了什么答不上来。标签认识了不少能对着教程做页面但删掉教程自己写就卡壳。后来我发现问题出在“记笔记”的方式上——把标签和属性抄一遍根本不是笔记那是说明书。真正有用的笔记是在踩坑之后把“为什么”记下来。这篇笔记我是按照自己实际解决问题的路径整理的。不是从第一章语法讲到第十章表格那种教科书结构而是挑出学习过程中最容易卡住的知识点包括初学阶段必踩的坑、CSS 选择器到底怎么用、布局定位的思路、以及几个高频特效的现代写法。适用对象有两类。第一类是刚学完基础语法、还处于“好像会但写不出来”阶段的新手第二类是做过小页面但想系统补一遍概念、尤其想搞懂 CSS 布局原理的同学。如果你已经能独立完成完整页面这份笔记仍然有参考价值——最后一部分的常见问题排查是我从自己项目里总结出来的很多问题不踩一遍根本想不到。2. HTML 骨架的细节DOCTYPE 和基础标签不能只靠背2.1 为什么每个页面都要写三行“废话”搜索引擎热词里反复出现!doctype htmlhtml langzh-cnheadmeta charsetutf-8这一串说明很多人在复制网页源码时对前三行代码充满疑惑。这三行不是可有可无的模板每一行都在干具体的活。第一行!doctype html是文档类型声明。它的作用是告诉浏览器“请用标准模式解析这份文档”。那为什么不写会怎样不写就会触发浏览器的怪异模式同一个 CSS 代码在不同浏览器里渲染结果可能完全不一样。具体表现很多最典型的比如盒模型的计算规则不同——同样的width: 200px在怪异模式下可能包含 padding 和 border在标准模式下就不包含。这会导致布局完全错乱排查起来十分痛苦。第二行html langzh-cn里的lang属性很多人直接忽略其实它有三个作用告诉拼写检查器用什么语言规则、帮助屏幕阅读器按正确语言发音、对搜索引擎收录也有辅助效果。我见过不少页面写成en页面实际是中文这在 SEO 上吃了暗亏。第三行meta charsetutf-8控制字符编码。如果缺失或写错中文会变成乱码——不是“看起来乱”是彻底读不出来的那种乱。UTF-8 是现在的主流通用编码能覆盖绝大多数语言字符。这里有个经验就算所有本地文件都能正常显示我也建议保留这一行因为你不知道文件将来会在什么环境下部署、被什么程序读取。2.2 head 里还藏着哪些细节除开charsethead 里最常用的就两个title和meta nameviewport。meta nameviewport contentwidthdevice-width, initial-scale1.0是移动端适配的命脉它的作用是让页面的宽度等于设备的宽度并且初始缩放比例为 1。如果没有这一行手机浏览器会按照 980px 的默认宽度渲染页面再手动缩小。这意味着你用手机访问一个没有 viewport 设置的页面字会小到看不清基本属于不可用状态。viewport 里的参数我常用widthdevice-width, initial-scale1.0。如果你想禁止用户缩放可以加user-scalableno但我强烈不建议这样做——这会影响无障碍访问。也有人说加上maximum-scale1可以防止输入框在 iOS 上自动放大但现代 iOS 版本已经有了更好的处理方式不建议为旧问题牺牲用户体验。title 标签的作用不只是浏览器标签页上的文本显示它同时是搜索引擎结果页的标题也是分享到微信、微博时展示的强相关标题。极简做法是“页面名 - 站点名”的结构。2.3 语义化标签不是给浏览器看的是给人看的HTML5 带来了header、nav、main、article、section、aside、footer这些语义化标签。很多初学的人觉得“反正 div 也能实现同样的效果为什么要用这些新标签”这个想法刚开始不算错但长期看是不利于维护的。举个例子你接手一个别人写的页面如果用清一色的 div 且没有清晰注释你根本分不清哪里是头部哪里是侧边栏必须逐个看内部内容才能判断效率极低。而语义化标签相当于给页面各个区块贴上了名牌header 就是页头nav 是导航footer 是页脚信息扫一眼就明白。更重要的是语义化标签对 SEO 和辅助设备友好。搜索引擎需要理解页面结构来判断内容权重屏幕阅读器依赖文档结构帮助视障用户导航。爬虫和读屏程序无法通过视觉判断“哪个 div 是导航”只能依靠语义标签。我自己在使用时的原则是这样能用语义化标签就用不到逼不得已不用 div 包裹一切。section 和 article 的区别也简单说一下——article 强调独立成篇的内容单元比如一篇博客或一条评论section 则倾向于表示文档中的一个分区。虽然边界有时很模糊但“内容是独立的吗”这个判断标准基本够用。3. CSS 加载与选择器入门第一道坎的完整解法3.1 CSS 的三种引入方式以及我为什么推荐第三种CSS 有行内样式、内部样式和外部样式三种写法。行内样式是写在标签的style属性里的比如p stylecolor: red;。它的优点是写起来快、优先级最高不考虑!important时但缺点极其致命无法复用。同一页面上有十个段落需要统一红色你就得复制粘贴十次改颜色时需要改十处。一句话总结行内样式就是给自己挖坑。内部样式指把style标签放在 head 里能解决当前页面的复用问题但无法跨页面复用。如果两个页面都要一样的按钮样式又得复制一遍。外部样式是用link relstylesheet hrefstyle.css引入独立 css 文件这才是生产环境的正道。一个 css 文件可以被多个页面引用修改一处全局生效浏览器缓存也只需要请求一次。算一笔账你有一个导航栏样式在十个页面里都用外部样式文件让你只维护一处这对后期迭代的影响是巨大的。3.2 基础选择器ID、class 和标签选择器的正确姿势选择器是 CSS 的第一道核心关卡热词里“css id选择器”、“css 伪类选择器怎么用”、“css从入门到精通——基础选择器”这些搜索都指向同一个痛点选择器种类太多不知道什么时候用哪个。标签选择器就是直接写标签名比如p {}、div {}。它的选择范围最广适合设置全局默认样式最典型的场景是 reset——把 margin、padding 清零。但正因为范围广如果对单个元素想特殊处理它就力不从心了。class 选择器写法是英文点加类名比如.nav-item {}用classnav-item标记目标元素。它的核心价值在于复用同一个类名可以挂在无数个元素上什么场景都适用是我日常用的最多的选择器。ID 选择器用井号加 ID 名比如#header {}。它的特点是唯一性——页面里同 ID 只能出现一次。ID 选择器的优先级远高于 class 选择器具体数值后面会说所以它适合用于定位页面唯一的结构元素。但要注意ID 的语义是“唯一标识”如果只是想要一个样式用 class 更合理。那优先级到底怎么算CSS 的层叠规则决定了当多个选择器同时命中同一元素时谁说了算。一个简单的记忆法则是ID class 标签。更精确的计算方式是把选择器拆成三组数字分别是 ID 数量、class 数量、标签数量然后从左往右比较。比如#header .nav p是 (1, 1, 1).nav .item是 (0, 2, 0)前者胜出。这个规则是学好 CSS 的底层逻辑我强烈建议花时间彻底搞明白。3.3 伪类选择器不是给元素起类名是给状态起类名伪类选择器这个词听起来抽象实际操作起来非常好用。它选择的是元素的特定状态或位置而不是元素本身。最常见的是鼠标移入事件也就是:hover。热词里专门有人搜“css 鼠标移入事件”其实在 CSS 里就一行a:hover { color: orange; }这是一切网页交互体验的地基。按钮悬停变色、图片悬停放大、导航悬停显示子菜单底层都是这个原理。结构类伪类常用的还有:nth-child()它按照元素在其父元素中的位置来选取。比如ul li:nth-child(odd) { background: #f5f5f5; }这段代码可以实现斑马纹表格的效果——奇偶行颜色交替可读性瞬间提升。:nth-child(2n1)写了公式也是同一个道理奇数行就是 2n1偶数行就是 2n。还有一个关键伪装类:not()可以排除特定选择器。比如想给所有段落加底边距但排除最后一段p:not(:last-child) { margin-bottom: 16px; }这段代码比给每个 p 单独写 class 再排除干净得多。说到:last-child它就是选中父元素里的最后一个子元素。伪类选择器是初学者的一个门槛因为不常用就容易忘但实际上手后会发现极大提高效率。现在写样式我会默认优先思考“能不能用伪类解决”而不是在 HTML 里加多余的 class。3.4 组合与层叠的选择器写法选择器单独用是一套组合起来又是另一套世界。常见的组合方式有子选择器、后代选择器、相邻兄弟选择器和属性选择器。后代选择器写法是空格分隔比如.container a {}选择的是 .container 内部所有 a 标签不管嵌套多深。子选择器写法是大于号比如.container a只选直接子元素不包含孙子层级的 a。两者区别在嵌套结构复杂时很关键一个能穿透多层一个只认第一层。属性选择器是[typetext]这种形式按属性值选择元素。我处理表单元素时用它比较多比如input[typesubmit] { background: green; }这条规则只对提交按钮生效不影响文本框样式。组合选择器最常见的一个坑是书写顺序。CSS 渲染时是从右往左匹配的这意味着.container a这个选择器会先找所有 a 标签再往上过滤是否有 .container 祖先。理解了这一点就能明白为什么要控制选择器的深度和复杂度——最深的选择器写多了页面渲染性能会受影响。虽然现代浏览器强大了很多普通项目影响不大但这是职业习惯问题写得简单明了对自己和别人都有好处。4. 盒模型与布局定位从玄学走向科学的必经之路4.1 盒模型是理解 CSS 布局的第一块基石每个 HTML 元素在页面上的形状都可以理解成一个矩形的盒子这就是“盒模型”。盒模型由四层构成内容content、内边距padding、边框border和外边距margin。初学阶段最容易摔跤的地方就是width到底指哪部分的宽度。默认情况下box-sizing: content-boxwidth只代表内容的宽度padding 和 border 会在内容宽度外面叠加。所以当你设置width: 200px; padding: 20px; border: 1px solid;的时候元素实际占用的宽度是 200 202 12 242px而不是 200px。这个问题的经典解法是* { box-sizing: border-box; }将全局盒模型切换为 border-box 后width就是包含 padding 和 border 的总宽度。内容区域会被压缩但布局的宽度计算变得直观可控。现在主流 UI 框架也是默认 border-box说明这是经过实践检验的正确选择。我建议在项目一开始就把这个规则写好可以少掉一半布局问题。4.2 margin 合并与塌陷两个最常见的布局陷阱先回忆下面的代码div stylemargin-bottom: 20px;第一行/div div stylemargin-top: 30px;第二行/div这两个 div 之间的间距是多少很多人会脱口而出 50px正确结果是 30px。这就是 margin 合并——垂直方向相邻的外边距不会相加而是取较大的那个。水平方向则不会合并。另一个更隐蔽的坑是 margin 塌陷子元素的 margin-top 可能会传给父元素导致父元素整体向下移动而不是子元素在父元素内部向下偏移。触发条件是父元素没有设置 padding-top、border-top、overflow 或成为 flex/grid 容器。我遇到这个问题的次数实在太多放一个典型场景就能理解一个父 div 里有标题想给标题加margin-top: 30px结果整个父 div 往下跑了 30px。这个现象让人摸不着头脑。解决方式最简单的就是给父元素加padding-top让子元素用 margin 的意图变成修正后的保持间距方式或者用现代布局工具后面说的 flex 天然就不存在这个问题。4.3 定位的四种模式以及 z-index 的真实规则CSS 定位一共四种static、relative、absolute、fixed还有 sticky算是 relative 和 fixed 的结合体。我见过很多人对 absolute 认识不清导致布局飞出预期位置根本原因是没有搞清楚定位参考系。static 是默认值元素按文档流排队不受 top、left 影响。relative 是“相对自己原来位置偏移”设置了 top、left 之后元素从原本位置挪开但原空间仍然保留——旁边的元素不会因此移动。absolute 的参考系是最近的“定位过的祖先元素”即这个祖先的 position 不是 static。如果祖先里没有定位过的元素那它就会参照整个页面其实是根元素 html来定位。这个机制用熟之后很强大因为可以让某元素相对于它的父容器精确定位。fixed 是相对于浏览器视口定位页面滚动时它不动。常见的“回到顶部”按钮就靠它实现还有固定在屏幕底部的导航栏、侧边栏等。z-index 的坑在于它只对定位元素或 flex/grid 子项生效。两个 static 元素之间设置 z-index 是没有意义的。真正决定层叠顺序的首先是比较 z-index 数值数值大的在上但如果 z-index 相同后面的元素按文档顺序盖住前面。我给一个建议z-index 不要乱用大数字从一个体系里走比如全站最大 100弹窗 90下拉 80别出现 z-index: 99999 那种暴力写法否则后期维护非常痛苦。4.4 Flex 布局是考试重点也是日常主力Flex 布局彻底改变了传统页面布局思维从“调整 margin 和 float 去碰位置”变成“告诉容器怎么排子元素”。开启方式display: flex;更准确地说现代前端实践中display: flex已经基本解决了 90% 的常规布局问题。主轴方向由flex-direction控制默认是 row水平改成 column 就是垂直排列。justify-content控制主轴上的对齐方式align-items控制交叉轴对齐方式。这是两个最高频、必须熟练的属性。举例.container { display: flex; justify-content: center; align-items: center; }这段代码是水平垂直居中的标准答卷。在 flex 出现之前垂直居中一直是 CSS 里的大难题各种 hack 层出不穷。现在三行代码搞定。子项的主要属性是flex-grow、flex-shrink、flex-basis。初学阶段可以简化记忆flex: 1表示“尽量占满剩余空间”三个子项都设flex: 1就平均分配宽度。如果你想固定某一列宽度就给它一个固定 width 且不设置 flex 属性。Flex 还有一个容易被忽略的特性是它天然解决了 margin 塌陷问题因为 flex 容器会创建新的格式化上下文。这也是我反复推荐优先使用 flex 的原因之一。4.5 Grid 布局适合整体页面骨架Grid 与 Flex 的核心区别只有一句话Flex 是单轴布局Grid 是双轴行和列同时控制布局。Grid 更适合页面骨架Flex 更适合局部组件内部排列。Grid 最基本的用法.page { display: grid; grid-template-columns: 200px 1fr 200px; grid-template-rows: auto 1fr auto; gap: 20px; }这三行代码定义了一个经典的页面骨架左右各固定 200px 的侧栏中间自适应上下是自动高度的页头页脚。如果这些用 Flex 或 float 来做代码量至少翻倍。Grid 的fr单位是相对单位理解为“剩余空间的分配比例”即可。1fr 1fr就是平均分成两列。repeat(3, 1fr)是三等分。我个人的分工习惯是整个页面的区域划分用 Grid区域内部的具体布局用 Flex。这个组合能做出现实中绝大部分界面而且代码结构稳定清晰。5. 文本样式与常见特效实现把页面做出品质感5.1 字体、渐变、删除线细节决定观感CSS 控制字体有基础三件套font-family、font-size、font-weight。font-family通常要备好回退字体比如font-family: PingFang SC, Microsoft YaHei, sans-serif;系统字体栈会根据当前系统选择第一个已安装的字体。字体渐变是实现设计感标题的热门需求。基础思路是给文字设置透明色再让背景渐变透过来h1 { background: linear-gradient(90deg, #ff6a00, #ee0979); -webkit-background-clip: text; background-clip: text; color: transparent; }核心是background-clip: text它把背景裁剪成文字的形状配合透明文字色渐变就从文字里透出来了。-webkit-前缀目前还在需要保留的范围内因为部分浏览器对无前缀属性的支持还不够一致。删除线是另一个高频需求可以用text-decoration: line-through实现一个字搞定。但如果你要的是一条带样式、距离更可控的删除线就得换个思路——用背景画一条线。这种做法可以精准控制删除线的颜色和位置不过日常场景直接内置属性已经足够用了。5.2 段落分割线和两行文本省略段落之间的分割线样式如果只是底线加一条border-bottom就能解决。要那种横在两段之间的单行分割线传统做法是用 hr 标签配合边框.divider { border: none; border-top: 1px solid #eee; margin: 20px 0; }更高级的分割线是“中间有字两边是线”的效果典型如登录框里的“其他登录方式”。实现方式是 flex 加伪元素.divider { display: flex; align-items: center; color: #999; font-size: 14px; } .divider::before, .divider::after { content: ; flex: 1; height: 1px; background: #eee; } .divider::before { margin-right: 12px; } .divider::after { margin-left: 12px; }两行超出省略是我在日常开发中反复要写的需求。比如资讯列表标题、卡片式布局的摘要文本统一要求两行以内、超出显示省略号。标准的写法是四行组合配方.two-line-ellipsis { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }这个技术利用了-webkit-line-clamp属性限制行数再加上-webkit-box-orient指定盒模型方向最后用overflow: hidden把超出的部分裁掉。要做三行省略就把2改成3。这四行连很多工作一两年的同事都未必写得全。因为只要少任何一行省略号都不会正常出现。建议直接存进代码片段用到时直接复制。5.3 涟漪光圈扩散与优惠券圆切两个实战特效拆解特效一涟漪光圈扩散效果。常见于新消息提示的“呼吸感”动画视觉上是一圈一圈光波从中心向外扩散。核心是两个关键点伪元素加动画。.ripple { width: 16px; height: 16px; border-radius: 50%; background: #1890ff; position: relative; } .ripple::after { content: ; position: absolute; inset: 0; border-radius: 50%; background: rgba(24, 144, 255, 0.4); animation: ripple-animation 2s ease-out infinite; } keyframes ripple-animation { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(3); opacity: 0; } }核心就在于动画从 scale(1) 到 scale(3)透明度从 1 到 0配合 infinite 无限循环产生一层层光圈扩散的视觉错觉。实际上那里只有一个点在循环变大变淡但因为时间差和透明度变化看起来就像多圈波纹在推进。特效二优惠券圆切边效果。电商页面里的优惠券左侧常常有一个半圆缺口设计上是为了模拟“撕开”的质感。实现方法有两种一种是直接用包一块背景图但更通用更轻量的做法是 CSS 径向渐变画圆。参考思路如下.coupon { background: radial-gradient(circle at left center, transparent 8px, #fff 8px); padding: 16px; border-radius: 8px; }radial-gradient(circle at left center, transparent 8px, #fff 8px)的意思是在左边中间位置画一个半径 8px 的圆形渐变圆心范围内是透明的从 8px 往外是白色。这样在纯色背景下就形成了一个完美圆形缺口。如果想要两边都有缺口就把关键词改成at left center与at right center放在同一个声明里联合使用。这两个特效是典型的“看着复杂拆开简单”类需求。第一个考的是 animation 和伪元素第二个考的是背景渐变。两者都不需要新增图片资源而且适配高分辨率屏幕比切图方案更实用。5.4 CSS 过渡与动画从 0 到 1 的交互感很多初学者分不清 transition 和 animation 的关系。简单说transition 是“从 A 状态变到 B 状态”的过程控制必须有状态改变才会触发animation 则是主动执行的“关键帧动画”不依赖状态改变可以自动运行循环。过渡的用法.btn { background: #1890ff; transition: background 0.3s ease; } .btn:hover { background: #ff5500; }鼠标悬停时背景色从蓝色渐变到橙色耗时 0.3 秒。如果没有 transition颜色会瞬间切换。那些看起来“高级”的按钮交互很多就是加了过渡时间。动画的用法在涟漪光圈里已经展示过。animation属性的完整写法可以包含动画名、时长、速度曲线、延迟、循环次数等参数。常用速记写法.element { animation: mymove 2s linear infinite alternate; }alternate关键字的作用是让动画正着走完倒着走回来形成来回运动的效果。如果你做的是一个“从透明到可见再回到透明”的闪烁效果可以用它简化代码。6. 从静态到动效网页交互体验的进阶之路6.1 一键返回顶部的实现逻辑现在主流网站的页面通常都很长从底部返回顶部如果只滚动滚轮体验很一般。传回顶部按钮的交互已经成为标配热词里就有人搜“html一键返回顶部算法”。实现思路分两部分HTML 里放一个按钮CSS 控制它的显示隐藏JavaScript 使用平滑滚动行为。最基础也最实用的写法如下.back-top { position: fixed; right: 30px; bottom: 30px; width: 40px; height: 40px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); color: #fff; text-align: center; line-height: 40px; cursor: pointer; display: none; transition: background 0.3s; }配合一点 JSconst btn document.getElementById(backTop); window.addEventListener(scroll, function () { btn.style.display window.scrollY 300 ? block : none; }); btn.addEventListener(click, function () { window.scrollTo({ top: 0, behavior: smooth }); });这个功能有三个关键细节。第一按钮在页面刚加载时不显示滚动超过 300px 才出现避免遮挡首屏内容。第二window.scrollTo的behavior: smooth能实现平滑滚动不用自己去写 requestAnimationFrame 补帧。第三按钮文字推荐用 CSS 样式中的内容值或 unicode 箭头符号。这个需求本身不大但它把固定定位、滚动事件、平滑滚动三个知识点串联了起来是入门阶段很好的综合练习。6.2 原子性 CSS 是什么值得学吗热词里出现了“原子性css”这其实是一个被前端工程化反复讨论的概念。原子化 CSS 是指每个 class 只承担一个职责比如.text-red { color: red; }、.p-16 { padding: 16px; }组合多个 class 来组成完整的样式效果。这种写法的优势在于样式类可以在不同场景反复使用改颜色的需求大部分情况不用动 HTML。劣势也很明显——HTML 的 class 列表会变得又长又丑同时和语义化思路有冲突。如果你在团队项目里工作需要统一规范原子化 CSS 是个值得认真考虑的方向。如果只是个人项目我建议因地制宜页面核心组件用语义 class 维护个别高频样式用原子工具类辅助二者结合比极端地只用一种要舒服。6.3 HTML 邮件和 WPS 表格转换冷门但好用的场景搜索词里有“html邮件”和“html格式转换wps表格”说明除了做网站HTML 还被用在电子邮件和办公文档场景。HTML 邮件开发的规则和网页完全不同几乎所有主流邮件客户端尤其 Outlook都不支持 CSS 中的复杂布局最好的写法是表格嵌套表格、行内样式写到底并且不要用 JavaScript。这意味着 HTML 邮件的技术栈接近“用 HTML 属性实现布局”的老式页面这对现在的开发者来说反而有点复古。至于 HTML 转 WPS 表格本质上就是把 HTML 表格结构通过另存或导入的方式导入表格软件。WPS 支持直接打开 html 格式文件但结果经常标签错位。更可靠的方式是先把 HTML 表格转为 CSV再导入 WPS或者复制粘贴到空白表格里再分列处理。这类“办公化”的需求虽然不常用但在实际工作里真遇到时知道有这条备选路径会省下不少时间。7. 常见问题与排查技巧实录7.1 样式不生效九成是这三类问题样式不生效是初学和进阶都绕不开的烦恼。我排查这个问题有一个固定的顺序先看选择器是否匹配再看优先级是否被盖住最后看书写语法有没有低级错误。先说选择器不匹配。常见的错误非常低级但就是很难发现——div 里的 class 名写错了或者 class 名里多了一个空格。比如div classcontainer 末尾多了一个空格有些浏览器会正常处理但选择器的匹配规则可能就出问题。建议写完之后打开开发者工具Elements 面板看对应元素是否被选中没选中就说明选择器本身有问题这一步能立即发现。再说优先级。很多人在团队协作时写了不少重复样式规则后来的人加了新规则却不生效就是因为优先级低。排查方式是检查是否有更高优先级的选择器在覆盖新规则。!important是最后的手段不要乱用一旦引入就很难再覆盖会让代码可维护性急剧下降。最后是语法问题。少写一个分号、多写一个花括号、中英文标点混用这些是新手高频错误。我的建议是写 CSS 时用编辑器自带的颜色提示做初步判断——如果某个属性的颜色看起来不对大概率是标点或拼写出错了。7.2 HTML 文件无法预览的几种可能本地 HTML 文件双击能打开但某些编辑器里点预览却显示不对我遇到过的原因有三种。一是文件编码问题。编辑器默认编码不是 UTF-8而 HTML 声明的是 UTF-8中文全都变成乱码。解决方法是把编辑器默认编码改成 UTF-8或者用带 BOM 的 UTF-8 保存。BOM 会在文件头加一个隐藏字符有些编辑器能正确解析有些则会在页面顶部多出一个空白行要根据环境权衡。二是文件路径问题。HTML 里引用 CSS 和 JS 用了绝对路径比如/css/style.css这在服务器环境没问题但本地直接打开时文件系统不认可这种路径样式全部丢失。检查一下引用路径是相对路径还是绝对路径即可。更规范的做法是只用相对路径例如css/style.css或者./css/style.css。三是 MIME 类型问题。如果你在本地安装了一些静态服务器工具或通过特定方式访问文件服务器返回的 MIME 类型不对会导致 CSS 文件被浏览器拒绝加载。遇到时优先检查请求响应头部确认 Content-Type 是否为text/css。7.3 图片显示异常与布局错位的排查清单图片无故不显示的现象90% 是路径写错了。相对路径的基准是当前 html 文件所在目录很多人拿图片直接和 html 放在同目录然后用images/xxx.jpg这种写法结果自然是 404。正确的做法是确认 html 文件与图片目录之间的相对层级如果 html 在根目录、图片在根目录/images写法就应该是images/xxx.jpg。如果 html 在子目录而图片在根目录就要用../images/xxx.jpg返回上一级。图片显示但布局错乱一般是宽度和高度没有设置约束。大图片会把容器撑出预期范围解决方法是设置img { max-width: 100%; }让图片在任何容器里都不会超宽。其实这个规则应该直接写进全局样式能预防一大堆响应式问题。布局错乱还有一种常见原因是图片是行内元素它在行内框中的基线对齐会造成图片底部和下一个元素之间有一条神秘的空隙。解决方式是把图片的display设为block或者设置vertical-align: middle。这一点很多做了两三年的开发者也未必能立刻答上来。7.4 伪类选择器的使用注意事项伪类虽然强大但有几个使用注意点值得单独说。:hover在移动端没有实际的鼠标概念触摸时可能会变成“点击后保持状态”这会导致样式异常。处理方式是用媒体查询把 hover 效果限定在支持 hover 的设备上media (hover: hover) { .btn:hover { background: #ff5500; } }:nth-child()的一个隐式坑是系列计数基于父元素的所有子元素类型而不仅仅是同类型。比如div下有 3 个p和 2 个span写p:nth-child(2)选的并不是第 2 个 p而是父元素里的第 2 个子元素——即使第 2 个子元素是 span 也一样。如果想按同类型计数要用p:nth-of-type(2)。实际在列表和表格中用nth-of-type通常更符合直觉。:not()的选择器参数不能写组合选择器这也是现在仍然存在的限制所以想排除多个条件时效率不高。可以两条规则分开写或者直接用 class 处理。7.5 常见问题速查表问题现象大概率原因优先排查方向中文乱码charset 缺失或编码不一致检查 head 里的 meta 和编辑器编码样式不生效选择器不匹配 / 优先级不够开发者工具看元素是否被选中子元素 margin-top 把父元素带跑margin 塌陷给父元素加 padding-top 或 overflow: hidden元素实际宽度比设置的宽box-sizing 是 content-box全局设置 border-box图片撑爆容器没设 max-width全局加 img { max-width: 100%; }垂直居中失效flex 只有 justify-content检查有没有 align-items: center普通元素设置了 z-index 没效果元素不是定位元素给元素加 position: relative文字省略号不出现四行配方缺行查 display、line-clamp、box-orient、overflow移动端点击后 hover 样式卡住:hover 在触屏设备的状态残留用 media (hover: hover) 限定CSS 文件加载但样式全丢文件路径错误或 MIME 错误看 Network 面板里 CSS 请求状态8. 最后的实操心得这份笔记从 HTML 骨架开始走到 CSS 选择器、盒模型、布局、特效和问题排查基本覆盖了我从入门到能独立写页面的完整路径。如果让我把学 HTML 和 CSS 的经验浓缩成几句话大概是下面这些。第一不要抄代码。抄一遍只是手指记忆要亲手从头写一个完整页面哪怕是仿一个静态页面遇到卡点再回头查印象会深刻得多。第二学会用开发者工具任何样式问题都先在 Elements 面板里实时调试调好了再同步到代码里一是快二是能即时看到原因。第三优先学好 Flex 和 Gridfloat 布局可以了解但别浪费太多精力因为它在实际开发里的比重已经越来越低。第四善用伪类和伪元素可以减少大量不必要的 HTML 嵌套但不要太依赖它们过度使用会降低可读性。第五不要排斥写全局基础样式* { box-sizing: border-box; }和统一的字体栈能避免很多坑。最后再分享一个我做笔记的小技巧遇到搞不懂的 CSS 属性不要只在笔记里记它的作用而是额外记一个“不用它时会发生什么”的例子。比如box-sizing如果不用 border-box宽度计算就要手动加减 padding 和 borderposition: relative如果不用子元素的 absolute 参照系就去找更外层。这种“反例笔记”建立起来的认知网络比按照文档结构记笔记牢固得多。HTML 和 CSS 的门槛其实不高真正拉开差距的是踩坑之后能不能总结出规律并把规律沉淀成自己的知识体系。