1. 从一份PPT说起为什么我建议你重新梳理HTML与CSS的基础知识前端圈子里有个挺有意思的现象很多人能熟练使用各种主流框架搭建项目但一旦被问到“行内元素和块级元素的区别到底是什么”“margin塌陷怎么解决”“BFC是什么”这类基础问题就开始支支吾吾。我自己也经历过这个阶段——刚入行那会儿觉得写页面嘛能跑起来就行基础不基础的无所谓。直到有一次接手一个老项目布局怎么调都调不对排查了大半天才发现是浮动没有清除导致的父元素高度塌陷。那一刻我才意识到基础知识的欠账迟早是要还的。这份参考PPT整理的内容本质上就是一套HTML和CSS的基础知识体系。它适合谁呢如果你是刚入门前端的新手这套内容可以帮你建立完整的知识框架避免东学一点西学一点导致概念混淆如果你已经有一定经验但基础不够扎实这份梳理可以帮你查漏补缺把那些“好像知道但又说不清楚”的知识点彻底搞明白。HTML负责页面的结构和内容CSS负责页面的表现和样式这两者构成了整个Web世界的基石。不管上层框架怎么变底层的东西是不会变的。我打算按照自己的理解把这份PPT里的核心知识点重新组织一遍不只是罗列概念而是把每个知识点背后的“为什么”讲清楚再配上实际开发中容易踩的坑和应对方法。这样你拿到的不只是一份知识清单而是一套能直接用在项目里的实战经验。2. HTML骨架与语义化别让页面变成一堆没有意义的div2.1 文档结构的基本组成一个标准的HTML文档从最外层开始依次是!DOCTYPE html声明、html根元素、head头部区域和body内容区域。很多人写页面的时候习惯性忽略!DOCTYPE html觉得不写也能正常显示。确实现代浏览器对不写DOCTYPE的页面会进入“怪异模式”渲染大部分情况下看起来没什么区别但在某些盒模型计算和行内元素高度处理上会出现偏差。我实测过一个不写DOCTYPE的页面里给行内元素设置padding-top渲染结果和标准模式完全不同。所以这个声明不是可有可无的装饰它是在告诉浏览器“请用标准模式来渲染我的页面”。head里面最常出现的是meta标签、title标签和资源引入标签。meta charsetUTF-8必须放在head的最前面否则如果标题里有中文在某些浏览器里会出现乱码。meta nameviewport contentwidthdevice-width, initial-scale1.0是移动端适配的标配没有它页面在手机上会按照桌面宽度渲染然后整体缩小字小得根本看不清。2.2 语义化标签的真正价值PPT里专门强调了语义化标签我觉得这一点值得展开说。header、nav、main、article、section、aside、footer这些标签用div加class完全可以替代视觉效果一模一样。那为什么还要用语义化标签三个层面的原因。第一是对搜索引擎友好。搜索引擎的爬虫在解析页面时会根据标签来判断内容的权重和结构。你用div classnav和用nav在爬虫眼里是两回事。第二是对屏幕阅读器等辅助设备友好视障用户通过屏幕阅读器浏览网页时语义化标签能帮助他们快速定位到导航区、主内容区或侧边栏。第三是对开发者自己友好三个月后你回头看自己的代码header和div classtop-bar-wrapper哪个更容易理解不言而喻。注意语义化不等于完全抛弃div。当一块内容纯粹是为了布局或样式需要而存在的容器时用div是合理的。不要为了语义化而强行给每个容器都套一个语义标签那样反而会造成结构混乱。2.3 常见标签的使用边界PPT里列举了大量HTML标签我挑几个实际开发中容易用错的来说。strong和b在浏览器里默认都显示为粗体但strong表示内容的重要性b只是视觉上加粗。类似地em表示强调i只是斜体样式。如果你只是想让文字变粗而不强调重要性用CSS的font-weight更合适。ul和ol的区别大家都知道但实际项目中我见过有人用ul做面包屑导航这其实不太合适因为面包屑是有顺序的应该用ol。还有table它只应该用于展示表格数据不要用它来做页面布局。用table布局是上世纪的玩法现在用table布局会导致代码臃肿、响应式适配困难而且语义完全错误。表单元素方面input的type属性远不止text和password。email类型会在移动端唤起邮箱键盘tel类型会唤起数字键盘number类型会限制只能输入数字。这些细节在移动端开发中非常实用能显著提升用户的输入体验。3. CSS选择器与层叠机制为什么你的样式总是不生效3.1 选择器体系的完整梳理CSS选择器是样式规则的“抓手”你得先选中元素才能给它设置样式。PPT里把选择器分成了几大类我按照实际使用频率重新排一下。基础选择器包括标签选择器、类选择器、ID选择器和通配符选择器。类选择器是日常开发中使用最多的ID选择器因为权重太高一般只用于锚点跳转或JavaScript钩子不建议用来写样式。通配符*选择器会选中页面上所有元素性能开销较大除了做全局重置比如* { margin: 0; padding: 0; box-sizing: border-box; }平时尽量少用。复合选择器包括后代选择器空格、子代选择器、相邻兄弟选择器和通用兄弟选择器~。这里有个容易混淆的点后代选择器选中的是所有层级的后代元素而子代选择器只选中直接子元素。举个例子.parent .child会选中parent里面所有class为child的元素不管嵌套多深而.parent .child只选中parent的直接子元素中class为child的那些。伪类选择器里:hover、:active、:focus、:first-child、:last-child、:nth-child()这些都很常用。:nth-child()的公式写法值得记一下2n表示偶数位2n1表示奇数位-n3表示前三个。伪元素选择器::before和::after必须配合content属性使用否则不生效这个坑我见过太多人踩了。3.2 层叠与优先级样式冲突的裁决规则多个样式规则同时作用于一个元素时浏览器按照一套明确的规则来决定谁生效这就是层叠机制。核心规则是先比优先级优先级相同再比书写顺序后写的覆盖先写的。优先级的计算方式可以用一个四元组来表示(行内样式, ID选择器数量, 类/伪类/属性选择器数量, 标签/伪元素选择器数量)。比较时从左到右逐位比较高位大的直接胜出。比如一个规则是#nav .item另一个是.nav .item.active前者是(0,1,1,0)后者是(0,0,3,0)前者ID位为1后者为0所以前者胜出。!important会强制提升优先级到最高但它是一把双刃剑。偶尔用来覆盖第三方库的样式可以接受但如果项目中大量使用!important说明样式架构本身出了问题后期维护会非常痛苦。我的建议是能通过调整选择器权重解决的问题就不要用!important。3.3 继承与默认样式有些CSS属性会自动从父元素继承到子元素比如color、font-family、font-size、line-height、text-align等。利用继承可以减少大量重复代码——在body上设置一次字体和颜色整个页面就都有了。但要注意width、height、margin、padding、border这些盒模型属性是不继承的。还有一个容易忽略的点a标签的颜色不会从父元素继承浏览器默认给它设置了颜色需要显式覆盖。h1到h6的font-size和font-weight也有浏览器默认样式不会继承父元素的设置。不同浏览器的默认样式有细微差异所以项目中通常需要做一次CSS Reset或Normalize。Reset是把所有默认样式清零Normalize是保留有用的默认样式、修正浏览器之间的不一致。现在更推荐用Normalize的方案因为它不会把有用的默认样式也干掉。4. 盒模型与布局核心从margin塌陷到BFC的完整拆解4.1 标准盒模型与IE盒模型CSS盒模型是布局的基础每个元素在页面上占据的空间由内容区content、内边距padding、边框border和外边距margin四部分组成。标准盒模型下width和height只包含内容区IE盒模型下width和height包含内容区、内边距和边框。box-sizing: border-box可以让元素使用IE盒模型的计算方式这是现代前端开发中的标配。为什么因为用标准盒模型时如果你给一个width: 100%的元素加padding: 20px它的实际宽度会变成100%40px导致横向溢出。而用border-boxpadding和border会被算在width里面内容区自动缩小不会溢出。我建议在全局重置里直接设置*, *::before, *::after { box-sizing: border-box; }省去后续大量计算。4.2 margin塌陷与合并的三种场景margin塌陷是面试高频题也是实际开发中经常遇到的坑。它发生在三种场景下。第一种是相邻兄弟元素之间。上面元素的margin-bottom和下面元素的margin-top会合并取两者中的较大值而不是相加。比如A元素margin-bottom: 30pxB元素margin-top: 20px它们之间的间距是30px而不是50px。第二种是父子元素之间。如果父元素没有上边框、没有上内边距且子元素是第一个子元素那么子元素的margin-top会和父元素的margin-top合并导致父元素也跟着往下移。解决方法是给父元素加overflow: hidden、加padding-top、加border-top或者给父元素创建BFC。第三种是空元素自身的margin-top和margin-bottom合并。一个空的div如果同时设置了上下margin它们会合并成一个。提示margin合并只发生在垂直方向水平方向的margin不会合并。另外浮动元素和绝对定位元素的margin不会发生合并。4.3 BFC块级格式化上下文的实际应用BFC全称是Block Formatting Context翻译过来叫块级格式化上下文。你可以把它理解为一个独立的渲染区域区域内部的元素布局不会影响到外部外部的布局也不会影响到内部。触发BFC的方式有好几种设置overflow不为visible、设置display为inline-block或flex或grid、设置position为absolute或fixed、设置float不为none。其中overflow: hidden是最常用的方式但它有个副作用——会裁剪掉溢出容器的内容。如果容器内有需要溢出的元素比如下拉菜单就不能用这个方式。BFC能解决什么问题第一解决父子元素margin塌陷。第二清除浮动带来的父元素高度塌陷。第三阻止元素被浮动元素覆盖。这三个场景在实际项目中都非常常见理解BFC的原理比死记硬背解决方案重要得多。4.4 浮动与清除浮动的正确姿势浮动最初是为了实现文字环绕图片的效果后来被大量用于页面布局。浮动元素会脱离标准文档流向左或向右移动直到碰到父元素边缘或另一个浮动元素。浮动带来的最大问题是父元素高度塌陷——如果父元素的所有子元素都浮动了父元素的高度会变成0。清除浮动的方法有几种在浮动元素后面加一个空元素并设置clear: both不推荐会产生多余标签给父元素设置overflow: hidden简单但可能裁剪内容给父元素加伪元素清除浮动推荐。.clearfix::after { content: ; display: block; clear: both; height: 0; visibility: hidden; }这是最经典的清除浮动方案兼容性好不会产生多余标签也不会裁剪内容。虽然现在有了flex和grid布局浮动布局的使用频率降低了但维护老项目时还是会经常遇到这个方案值得记住。5. 定位与层叠上下文那些让你抓狂的z-index问题5.1 五种定位方式的区别与选择CSS的position属性有五个值static、relative、absolute、fixed、sticky。static是默认值元素按照标准文档流排列设置top、left等偏移属性无效。relative是相对定位元素相对于自己原来的位置偏移但它原来的空间仍然保留不会影响周围元素的布局。relative最常用的场景是作为absolute子元素的定位参照物。absolute是绝对定位元素脱离文档流相对于最近的已定位祖先元素即position不为static的祖先进行定位。如果没有已定位的祖先元素则相对于初始包含块可以理解为视口或html元素。绝对定位元素不占据原来的空间后面的元素会顶上来。fixed是固定定位元素相对于浏览器视口定位滚动页面时位置不变。常见的“回到顶部”按钮、固定导航栏都是用fixed实现的。需要注意的是如果祖先元素有transform、filter或perspective属性fixed会相对于那个祖先元素定位而不是视口这是一个很容易踩的坑。sticky是粘性定位元素在滚动到某个阈值之前表现为relative超过阈值后表现为fixed。做吸顶导航栏时特别好用但需要指定top、bottom、left或right中的至少一个值否则不生效。5.2 z-index与层叠上下文z-index只对已定位元素position不为static或flex/grid子元素生效。它的值可以是正整数、负整数或0数值越大越靠上。但z-index不是简单的数值比较。它受到层叠上下文的约束——不同层叠上下文中的元素z-index再大也不能覆盖到另一个层叠上下文中的元素上面。层叠上下文的创建条件包括根元素html、position为absolute或relative且z-index不为auto、position为fixed或sticky、flex/grid容器的子元素且z-index不为auto、opacity小于1、transform不为none等。实际开发中遇到的“z-index设了很大但就是盖不住”的问题十有八九是因为两个元素不在同一个层叠上下文里。排查方法是沿着DOM树往上找看两个元素的最近公共祖先是否创建了层叠上下文以及它们各自处于哪个层叠上下文中。5.3 定位实战中的经验技巧绝对定位居中是一个高频需求。传统方案是left: 50%; top: 50%; margin-left: -宽度的一半; margin-top: -高度的一半;但需要知道元素的具体尺寸。更通用的方案是用transform.center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }这个方案不需要知道元素尺寸兼容性也很好。如果父元素是flex容器直接用justify-content: center; align-items: center;更简单。还有一个经验绝对定位元素的宽度如果设置为百分比是相对于最近的已定位祖先元素的padding box计算的不是content box。这个细节在做精确布局时需要注意。6. 从基础到实战把这些知识点串起来用6.1 一个完整页面的结构规划思路学了这么多零散的知识点最终要落到实际项目里。拿到一个页面设计稿我的习惯是先划分大区块头部、导航、主内容区、侧边栏、底部。然后决定每个区块用什么布局方式——整体框架用flex或grid局部微调用margin和padding。HTML结构先写出来确保语义合理、层级清晰。然后再写CSS从全局样式开始重置、字体、颜色变量再到布局样式容器宽度、flex/grid设置最后到组件样式按钮、卡片、表单。这个顺序能避免很多样式冲突问题。6.2 常见布局需求的实现方案对比布局需求推荐方案备选方案注意事项水平垂直居中flex centerabsolute transformflex方案更简洁但要注意兼容性两栏布局左固定右自适应flex flex:1float margin-leftflex方案不需要清除浮动三栏布局左右固定中间自适应grid fr单位flex ordergrid代码更直观等高列flex默认拉伸table布局flex的align-items:stretch是默认值吸顶导航position:stickyposition:fixed JSsticky不需要JS但要注意父元素overflow6.3 移动端适配的核心要点移动端适配绕不开viewport的设置。meta nameviewport contentwidthdevice-width, initial-scale1.0是基础配置。在这个基础上用rem或vw做尺寸单位可以让页面在不同宽度的设备上等比缩放。rem是相对于根元素font-size的单位。常见方案是用JavaScript根据屏幕宽度动态设置html的font-size比如设计稿宽度750px屏幕宽度375px那么html的font-size设为50px基准值100px的一半所有尺寸按设计稿除以100再乘以基准值来写。vw是视口宽度的百分之一100vw等于视口宽度用vw做单位不需要JavaScript但要注意浏览器滚动条会占据宽度导致100vw出现横向滚动条的问题。6.4 调试CSS问题的系统方法样式不生效时不要盲目改代码按照系统的方法排查。第一步打开浏览器开发者工具选中目标元素看Styles面板里有哪些规则作用在了这个元素上哪些被划掉了。第二步检查选择器是否写对了类名有没有拼错层级关系是否正确。第三步检查优先级看是不是被更高优先级的规则覆盖了。第四步检查属性是否拼写正确值是否合法。第五步检查是否是继承问题或默认样式问题。我踩过最多次的坑是给元素设了宽度但没生效最后发现是display属性不对——行内元素设置width无效需要改成inline-block或block。还有一次是给浮动元素设margin: 0 auto想居中怎么都不生效后来才反应过来浮动元素不能用margin auto居中。7. 我整理这份基础知识时的一些个人体会把HTML和CSS的基础知识过一遍最大的感受是这些东西看起来简单但真正吃透的人不多。很多人学的时候觉得“差不多懂了”一到实际项目里就发现处处是坑。我的建议是不要只停留在“知道”的层面每个知识点都要动手验证一遍。比如margin塌陷你看十遍文章不如自己写个demo跑一下亲眼看到父元素跟着子元素往下移这个印象才深刻。另外基础知识和框架并不矛盾。你越理解盒模型、定位、层叠这些底层机制用框架时就越得心应手。遇到样式问题你能够从原理层面去分析而不是靠猜和试。这份PPT里的内容值得反复看每次回顾都会有新的理解。我在不同阶段看同一份基础知识材料关注点和收获完全不同——刚入门时关注“怎么用”有经验后关注“为什么这样设计”带人之后关注“怎么讲清楚”。最后分享一个我自己的学习习惯每学完一个知识点试着用自己的话把它讲出来或者写一篇笔记。如果你能给别人讲明白说明你真的懂了。讲不清楚的地方就是你的知识盲区回去补上就好。HTML和CSS的知识体系不算庞大但细节极多建立自己的知识框架比死记硬背重要得多。