CSS必懂核心概念（从入门到进阶）

CSS 必懂核心概念完整知识点00.什么是CSSCSS 是用来控制网页“长什么样”的语言它决定了 HTML 元素在屏幕上如何显示、排列和响应。但它跟 JS 完全不是一个路子理解这一点以后就不会被样式“折磨得莫名其妙”。HTML 负责“有什么内容”。CSS 负责“这些内容长啥样”。✅CSS 不关心逻辑只关心表现。CSS 的全称Cascading Style Sheets。三个关键词每一个都在“折磨你”单词含义实际影响Cascading层叠多个样式冲突时谁赢Style样式颜色、大小、位置Sheets样式表可以分开写、统一管理“层叠”是 CSS 最难、也是最重要的特性CSS 本身的设计就不是“严格编程”CSS 是声明式的不是命令式。CSS 写的不是“怎么做”而是“要什么结果”但浏览器怎么算出来的是看不见的。一旦不生效只能靠经验反推是不是被覆盖了是不是 BFC是不是盒模型 这和 JS 那种“一行一行执行”完全不同调试心智负担更大。CSS 的核心工作方式重点1️⃣ 选择器 → 找元素.container .btn { ... }意思是找到.container里面的.btn2️⃣ 声明 → 设样式color: #1677ff; font-size: 14px;每一条都是一个“声明”。3️⃣ 层叠 → 决定谁生效当多条规则作用在同一个元素上优先级高的赢优先级一样后写的赢这就是常说的“我明明写了为什么没生效”这也是它难的根本原因。CSS 在网页里的位置从加载角度HTML ├─ 结构内容 ├─ CSS外观 └─ JavaScript行为浏览器做的事是解析 HTML → DOM解析 CSS → CSSOM合并 → Render Tree计算布局 → Paint → 显示CSS 会阻塞渲染这就是为什么样式没加载完页面会白屏一个“人话版”比喻HTML毛坯房墙、门、窗CSS装修刷漆、铺地板、摆家具JS智能家居开门、亮灯、响音乐CSS 的问题通常是房子结构已经定了只能在里面“想办法装得好看”CSS 能做什么✅ 布局Flex / Grid✅ 响应式手机 / 平板 / PC✅ 动画过渡 / 关键帧✅ 主题暗黑模式✅ 打印样式✅ 无障碍高对比、聚焦态01、基础核心语法选择器Selector基础通配符*、元素、类.、ID#组合后代、子元素、相邻兄弟、通用兄弟~属性选择器[]、^、$、*伪类:hover/:active/:focus/:nth-child()/:not()/:root伪元素::before/::after/::first-line/::placeholder声明块、属性、值语法结构选择器 { 属性: 值; }关键字值、长度单位、颜色、函数rgb()/rgba()/hsl()/calc()注释、优先级、层叠CascadeCSS 层叠规则来源权重 → 特殊性 → 源码顺序权重计算!important 行内样式 ID 类 / 属性 / 伪类 元素 / 伪元素继承inherit、初始值initial、重置unset、还原revert02、盒模型重中之重一切样式的起点90% 的布局问题本质都是盒模型没想清楚1.标准盒模型content-box宽高 contentpadding、border 向外扩张box-sizing: content-box;content padding border marginwidth / height仅代表内容区 content的尺寸元素实际占用宽度 width padding-left padding-right border-left border-right示例div { width: 100px; padding: 10px; border: 5px solid #000; } /* 实际宽度 100 10*2 5*2 130px */2.IE 怪异盒模型border-box宽高 content padding borderCSS样式box-sizing: border-box;width / height是最终可视总宽度包含content padding border内容区会自动收缩不会撑大盒子实际内容宽 width - padding左右 - border左右同上例子div { width: 100px; padding: 10px; border: 5px solid #000; } /* 整体宽度严格100px内容区域只剩 100 - 20 -10 70px */记住只要看到“宽度不对”“超出容器”第一反应就是检查box-sizing对比表格特性content-box标准盒border-boxIE 盒box-sizing 值content-boxborder-boxwidth 包含仅内容 contentcontent padding border加 padding/border盒子整体变大整体尺寸不变内容缩小适用场景极少使用开发通用布局、百分比布局、栅格相关属性width/height、padding、border、marginbox-sizing、box-shadow、outline不占盒空间3.margin 塌陷垂直外边距合并什么是 margin 塌陷只有垂直方向上下 margin会合并水平左右 margin 永远不会塌陷。多个块元素垂直相邻时它们之间的外边距会合并成一个值而非相加。只发生在普通文档流块级元素浮动、绝对定位、flex/grid 子元素不会塌陷。满足全部前提才会出现 margin 垂直塌陷1.发生 margin 塌陷前提条件缺一不可只作用于普通文档流块级元素浮动元素、absolute/fixed/sticky 定位元素、flex/grid 子元素 → 不会塌陷只发生在垂直方向margin-top /margin-bottom 左右 margin 永远不会合并元素之间没有分割屏障无 border、无 padding、无 inline 内容、无内联元素隔开2.父子嵌套塌陷父容器没有border / padding / inline/ BFC内容隔开时子元素 margin 会“溢出”子元素的margin-top会 “穿透” 父元素跑到父元素外面。记住margin 是用来“隔开兄弟”不是“撑开父子”div classfather div classson/div /div.father { background: #ccc; } .son { margin-top: 30px; } /* 30px 间距出现在 father 顶部而非父子之间 */3.兄弟塌陷,相邻兄弟元素两个上下相邻块上元素margin-bottom 下元素margin-top合并取较大值div classa/div div classb/div.box1 { margin-bottom: 20px; } .box2 { margin-top: 30px; } /* 中间间距不是50而是 30px */4.空元素塌陷一个没有内容、宽高的空 div上下 margin 互相合并。.empty { margin-top: 20px; margin-bottom: 30px; } /* 最终只产生 30px 间距 */合并计算规则两个都是正数取最大值上 10下 25 → 间距 25一正一负相加上 20下 - 10 → 间距 10两个负数取绝对值更大的负数上 - 15下 - 25 → 间距 - 25元素互相重叠 25px如何解决 margin 塌陷BFC、padding、border、浮动、flex本质触发父元素 BFC或隔断父子边距。方案 1父加 border /padding最简单.father { padding-top: 1px; /* 或 border: 1px solid transparent; */ }方案 2父元素触发 BFC推荐工程用法任意一种即可/* 1. overflow 非 visible */ .father { overflow: hidden; } /* 2. display: inline-block */ .father { display: inline-block; } /* 3. 浮动、absolute/fixed 定位 */ .father { float: left; }方案 3使用 flex /grid 布局现代最优flex/grid 容器内部子元素不会发生 margin 塌陷.father { display: flex; flex-direction: column; }方案 4伪元素隔断不影响布局.father::before { content: ; display: table; }03、文档流Normal Flow定位position脱离文档流脱离文档流 开始失控1.普通文档流块级自上而下、行内自左向右排布块级元素 block独占一行可设宽高行内元素 inline同行排列宽高无效行内块 inline-block同行 可设宽高块级从上到下行内从左到右自动换行2.定位 positionstatic默认文档流relative相对自身不脱离流absolute相对最近非 static 祖先脱离流fixed相对视口脱离流sticky粘性定位relativefixed 结合四种定位的本质区别值是否脱流参考物static否无relative否自身absolute是最近非 static 祖先fixed是视口记住absolute 不是“随便飞”而是“相对最近的定位祖先飞”3.层叠上下文Stacking Contextz-index 堆叠上下文仅定位元素生效父层堆叠上下文限制子层级opacity / transform / filter 会新建堆叠上下文z-index 失效的真正原因创建层叠上下文的常见方式position: relative/absolute z-index opacity 1 transform filter will-change记住z-index 只在同一个层叠上下文里比较才有意义4.脱离文档流三方式float、absolute、fixed方式特点float半脱离需要 clearfixposition: absolute/fixed完全脱离position: sticky条件脱离记住能用文档流解决就别脱离文档流04、浮动 Float 清除浮动floatleft right none文字环绕脱离标准流浮动带来问题父元素高度塌陷清除浮动方案伪元素清除法通用最优父元素设 overflow:hidden/auto触发 BFC额外空标签 clear:bothclearleft/right/both05、BFCBlock Formatting Context 块级格式化上下文CSS 里最重要的“隔离单位”BFC 是什么独立渲染区域内部布局不受外部干扰触发 BFC 的条件float 不为 none而为left/right;overflow 不为 visibleposition absolute / fixeddisplay: inline-block / table-cell / flex / grid / flow-root; /* 推荐 */contain: layout常见触发方式overflow: hidden; display: flow-root; /* 推荐 */ float: left/right; position: absolute;BFC 三大作用解决 margin 垂直塌陷清除浮动撑起父高度阻止文字环绕浮动元素记住遇到“margin 没了”“高度塌陷”“被盖住”优先考虑 BFC06、Flex 弹性布局现代主流容器属性父display:flex、flex-direction、flex-wrap、flex-flowjustify-content主轴对齐、align-items侧轴单行、align-content多行、gap项目属性子flex-grow放大比例、flex-shrink缩小比例、flex-basis基准尺寸flex简写、align-self、order排序核心规则弹性容器、主轴 / 交叉轴、自适应分配空间Flex 不难难的是“默认值”必须记住的几个默认值属性默认值常见坑flex-directionrow方向搞反flex-wrapnowrap溢出align-itemsstretch高度被拉长justify-contentflex-start没居中三个核心属性flex-grow /* 放大 */ flex-shrink /* 缩小 */ flex-basis /* 初始大小 */记住能用justify-content / align-items解决的就别乱算宽度07、Grid 网格布局二维布局容器display:gridgrid-template-columns/rows、gap、grid-template-areasjustify-items、align-items、place-items子项grid-column、grid-row、grid-area、justify-selffr 单位、repeat ()、minmax ()、auto-fit/auto-fill什么时候用 Grid整体页面骨架卡片网格表格型布局核心思想grid-template-columns grid-template-rows grid-area记住Grid 负责“大结构”Flex 负责“内部排列”08、布局系统本身就很复杂1. 盒模型 文档流每个元素都涉及content / padding / border / margin标准盒模型 vs IE 盒模型外边距合并BFC / IFC / 层叠上下文很多“莫名其妙”的问题本质都是这些底层规则在起作用。2. Flex / Grid 也不是万能的它们很强但默认值很坑stretch、nowrap父级/子级相互影响响应式下容易崩以为是“对齐问题”其实是整个布局体系在联动变化。09、单位体系绝对单位px相对文本em父字体、rem根字体 html视口单位vw vh vmin vmax弹性单位frGrid、%百分比参照父尺寸函数calc()混合单位计算10、响应式 媒体查询不只是 mediamedia媒体查询屏幕宽度、设备、横竖屏移动优先、桌面优先写法media print打印样式媒体特性min-width/max-width、prefers-color-scheme暗黑模式一句话定义media 用来“按条件生效 CSS”最常见的条件是屏幕宽度。同一个页面在不同屏幕 / 设备上长得不一样最常见用法也是 90% 会用到的media (max-width: 768px) { .container { padding: 12px; } }意思是当屏幕宽度 ≤ 768px 时这些样式才生效/* 移动端优先推荐 ✅ 默认手机 */ .container { padding: 12px; } /* 平板 */ media (min-width: 768px) { .container { padding: 24px; } } /* 桌面 */ media (min-width: 1200px) { .container { padding: 32px; } }/* ❌ 桌面优先不推荐但会经常看到 默认PC */ .container { padding: 32px; } media (max-width: 1199px) { .container { padding: 24px; } } media (max-width: 767px) { .container { padding: 12px; } }坑点越写越多小屏样式容易被覆盖维护成本高media 到底在判断什么1️⃣ 视口宽度99% 场景⚠️ 注意这里判断的是viewport 宽度不是屏幕分辨率2️⃣ 必须有的 meta很多人忘了meta nameviewport contentwidthdevice-width, initial-scale1没这句media 等于废的三个核心点viewportmeta nameviewport contentwidthdevice-width, initial-scale1, maximum-scale1, user-scalableno这一行到底在说什么拆开读属性部分含义建议nameviewport告诉浏览器这是视口配置✅ 必须widthdevice-width视口宽度 设备的 CSS 像素宽度✅ 必须initial-scale1初始不缩放✅ 必须maximum-scale1禁止放大⚠️ 慎用user-scalableno禁止双指缩放❌ 不推荐viewport 和 media 的关系重点viewport 设置 ↓ 浏览器知道“视口有多宽” ↓ media 才能正确判断相对单位 viewport 和这些 CSS 概念强相关rem / em / vw / vhCSS 概念关系vw / vh基于 viewportmedia基于 viewport100vw等于 viewport 宽度移动端 1px 边框和 viewport scale 有关弹性布局max-width / min-width记住不要为某一个分辨率写死样式11、颜色、背景、渐变颜色命名色、hex、rgb/rgba、hsl/hsla背景background-color、background-image、repeat、position、size、clip、origin渐变函数linear-gradient()、radial-gradient()、conic-gradient()12、文本与字体文本color、text-align、line-height、text-indent、text-decoration、text-shadow、word-wrap、white-space字体font-family、font-size、font-weight、font-style、font简写自定义字体font-face13、变换、过渡、动画动效三剑客transform静态变换translate、scale、rotate、skew、matrixtransition过渡属性、时长、缓动、延迟keyframesanimation关键帧动画循环、反向、暂停、填充模式缓动函数ease/linear/ease-in-out/cubic-bezier ()14、兼容性、前缀、重置厂商私有前缀-webkit- /-moz-/-ms-Normalize.css统一浏览器默认样式vs Reset.css全部清零CSS 模块化方案CSS Modules、Less/Sass、Tailwindimport导入样式、link 外部样式表15、高级特性CSS 变量自定义属性--varvar()、calc()配合变量:root全局变量滤镜 filterblur、grayscale、opacity、brightnessclip-path裁剪图形pointer-events鼠标穿透content-visibility渲染性能优化aspect-ratio固定宽高比16、渲染性能核心概念浏览器渲染流程解析 HTML→DOM、解析 CSS→CSSOM、合成渲染树、布局reflow 回流、绘制repaint 重绘、合成composite回流重排元素几何尺寸变化代价最高重绘仅颜色 / 背景变化无布局改动合成层transform/opacity 单独分层不触发回流性能优化原则优先使用 transform、opacity 做动画17、选择器权重与继承补充可继承属性字体、颜色、行高、文本对齐等不可继承盒模型、定位、浮动、背景!important滥用危害覆盖规则CSS 有一整套“权重计算”规则权重规则从高到低!important 行内 ID Class 标签!important行内样式ID / class / 标签继承、层叠、覆盖实际项目里经常是“明明写了这个样式为什么没生效”然后发现是某个组件库、全局样式、第三方插件悄悄覆盖了。计算公式记不住也没事(0,0,0,0) ↑ ↑ ↑ ↑ | | | └─ 标签 | | └── class | └──── id └────── !important记住不要靠“多加一层选择器”去覆盖那是灾难的开始会继承的属性colorfont-*line-heighttext-align不会继承的margin / paddingborderbackgroundwidth / height记住样式“莫名其妙生效”多半是继承了18、视觉格式化模型高级但关键解释“浏览器到底怎么算布局”BFC / IFCInline Formatting Context包含块Containing Block百分比参照对象记住width: 50%是相对于“包含块”不是父元素那么简单19、CSS 变量现代 CSS 拓展嵌套语法CSS Nesting:has()父选择器容器查询container逻辑组合伪类:is():where()层叠层layer控制样式优先级CSS 变量:root { --primary-color: #1677ff; } .btn { color: var(--primary-color); }记住主题、暗黑模式、统一间距全靠它20、Reset / Normalize别裸写样式为什么要 reset浏览器默认样式不一致button / input / ul 都有默认样式推荐normalize.css保留语义或轻量 custom reset21、调试思维比知识更重要调样式时的固定流程打开 DevTools → 看盒模型看 computed style看是否被覆盖看是否脱离文档流看是否是 BFC / 层叠问题记住不要猜用眼睛验证22.一张“CSS 心智模型图”盒模型 ↓ 文档流 ↓ BFC / 层叠上下文 ↓ Flex / Grid ↓ 细节调整margin / padding / font