PeacefulWinter的博客

本篇为《CSS in Depth》全新第2版8.4小节内容，主要介绍了 CSS 最新引入的一个新语法糖特性——嵌套的用法及注意事项，并将其与 Sass 中的同名写法进行了对比，实战性与指导性极强，生动直观地呈现了CSS最新的发展趋势及最佳实践，强烈建议收藏！

本篇为《CSS in Depth》全新第2版新增第八章层叠图层的8.3小节内容，主要介绍了 :is() 和 :where() 两个较新的特性功能的具体用法及相关注意事项，并结合本章层叠图层演示的示例进行对比，算是对层叠图层应用场景的一个补充。适合 CSS 进阶，建议收藏！

本篇为《CSS in Depth》全新第2版第8.2节内容，主要介绍了 CSS 最新推出的层叠图层（cascade layer）特性的一个较流行的推荐组织方案，并针对每个图层的含义和用法，结合具体的CSS示例代码进行了详细阐述。完美解决了CSS样式优先级之前存在的各种问题。非常适合进阶CSS的朋友强化相关基础。强烈建议收藏。

本篇为《CSS in Depth》全新第2版第8.1节内容的下篇，主要介绍了 CSS 层叠图层（cascade layer）的排序规则以及各自的优先级判定方法，同时结合具体的使用场景，通过大量生动形象的示意图和示例代码进行讲解，帮助大家快速掌握CSS图层的用法。最后，通过revert-layer关键字，补充说明了另一种常见的基于图层的样式还原操作。强烈建议收藏。

本篇为《CSS in Depth》全新第2版新增的第8章8.1节的上篇，主要介绍了CSS层叠图层（cascade layer）的诞生背景、适用场景即图层的具体命名等，并重新修订了传统CSS的层叠规则（引入 layer 图层的判定节点），反映了当前 CSS 在解决样式冲突问题上的主流观点即最佳实践，强烈建议收藏。

本篇为《CSS in Depth》全新第2版第7章最后部分的内容，主要介绍了CSS响应式设计中对图片的特殊处理以及相应的注意事项。最后还对第7章的重要知识点进行了复盘梳理，并提到了容器查询这一CSS最新强大功能特性。感兴趣的朋友可以先收藏，跟着作者思路在本地实操练习。

本篇为《CSS in Depth》全新第2版7.3节内容，主要介绍了CSS响应式设计中的最后一个设计原则——流式布局原则；并通过该原则的具体实施，完成了示例页面大尺寸屏幕的断点样式设计，最后顺便探讨了表格型数据内容在流式布局中的应对策略。文章深入浅出，通俗易懂，通过大量案例将CSS响应式设计的三大原则细细道来，实为有志进阶CSS的初学者必备参考资料。建议收藏，并在本地同步练习。

本篇为《CSS in Depth》全新第2版第7.2节内容的下篇，主要介绍了中等尺寸屏幕断点样式的最后一部分——正文区三列布局的具体实现及相关注意事项。同时，结合近年来媒体查询的最佳实践，补充了几个实用的知识点，并对前一版中的内容进行了小幅调整，整体结构上更加合理，也更能反映当前媒体查询的最新趋势。想要进阶 CSS 的朋友可以先收藏起来，以备后用。

本篇为《CSS in Depth》全新第2版7.2节CSS响应式设计原则的中篇，主要介绍了如何在前面移动端样式的基础上，实现中等尺寸屏幕断点样式的设计与实现。文章配合详细的讲解及样式代码、插图，从各个维度深入考虑，带您掌握媒体查询在具体应用时在应用时要考虑的关键细节和业内主流编程实践，非常适合CSS进阶，强烈建议收藏。

本篇为《CSS in Depth》全新第2版7.2节内容的上篇，详细介绍了 CSS 响应式设计中的第二大原则——媒体查询，并对媒体查询的具体类型分四个方面逐一进行了讲解，在前一版的基础上对相关知识点进行了大幅扩充和整理，是CSS进阶阶段学习媒体查询相关语法不可多得的参考资料，强烈建议收藏！

本篇为《CSS in Depth》全新第2版7.1节的后半部分内容，主要介绍了移动端优先设计原则指导下，实现主导航菜单的动态切换效果的具体细节及相关的注意事项。并介绍了视口 meta 标签相关的配置知识。涉及知识点的讲解，无一不深入浅出，循循善诱，强烈建议收藏！

本篇为《CSS in Depth》全新第2版7.1节的概述部分，主要介绍了 CSS 响应式设计里的第一大原则：移动端优先设计。本文通过一个实际案例进行讲解，将移动端优先的实现流程及需要注意的主要问题逐一进行了介绍，为后续实施响应式改造奠定了基础。另外，新版还对一些描述进行了补充和完善，非常适合CSS进阶学习，建议收藏！

本篇为《CSS in Depth》全新第2版第7章响应式设计的概述部分，重点介绍了前端响应式设计理念诞生的相关背景。篇幅限制，本篇暂不与7.1节合并。学习过程中可以先准备好相应的章节源码，以便后续跟随介绍进行实操演练。建议先收藏。

本篇为《CSS in Depth》全新第2版6.5小节内容，主要介绍了CSS中新增的粘性定位技术，并对本章的示例页略作调整，在实际演练的过程中对粘性定位的用法及注意事项进行了详细讲解。对上一章中的部分兼容性方面的描述也做了删减。建议有志进阶CSS的朋友收藏、实测。

本篇为《CSS in Depth》第2版6.4节的下篇，主要介绍了CSS中处理元素堆叠问题的一个核心概念：堆叠上下文（stacking context），并结合一个简单的案例，深入浅出进行了演示。最后对常见的堆叠顺序问题做了归纳，并给出了应对相关问题的最佳实践。建议收藏。

本篇为《CSS in Depth》第2版6.4节内容的上篇，主要介绍了页面元素定位后、定位元素间发生相互堆叠时的常见解决方案，进而进入了渲染树、探讨了浏览器做在页面渲染时的绘制顺序、以及 z-index 属性的概念及用法。本节为CSS定位技术中一个非常重要的知识点，学习时务必结合示例在本地实操，再多加体会。建议先收藏。

本篇为《CSS in Depth》全新第2版6.3小节的后半部分内容，主要介绍了CSS定位在绘制下拉菜单三角形箭头中的详细过程，并结合示例对该方案进行了复盘总结。新版内容对下拉箭头的实现做了大幅更新，用按钮单击事件取代了鼠标悬停事件，同时类比了图片和SVG元素在绘制三角形方面的优缺点，考虑之细致全面令人叹服！强烈建议收藏并在本地实测。

本篇主要介绍了CSS的相对定位技术（relative positioning），通过一个下拉菜单的简单示例，详细讨论了相对定位的特点及适用场景，以及应用过程中需要考虑的一些问题（如页面可访问性等）。本节对上一版作了大幅更新，最后还针对正文提到了一个功能点进行了补充完善。感兴趣的朋友不妨动手试试，一定会有新的收获。建议先收藏！

本篇为《CSS in Depth》全新第2版6.2小节内容，主要介绍了CSS的绝对定位的相关概念及用法，通过对示例页中的关闭按钮设置绝对定位，还顺便对HTML的语义化及页面可访问性等相关问题进行了讨论，非常具有参考价值。建议收藏、实测。

本篇为《CSS in Depth》全新第2版第6章6.1小节内容，主要介绍了CSS定位中最简单的固定定位的相关概念及用法。由于新版删除了浮动定位的所有内容，这一章也在第三章引入逻辑属性的概念后，对相关代码及正文叙述进行了全面升级。强烈建议收藏，跟随作者的思路在本地实践一遍，相信一定大有收获。

本篇为《CSS in Depth》全新第2版5.6与5.7小节内容，主要介绍了网格布局在设置元素对齐时与上一章 Flexbox 布局的一些关联，同时介绍了网格布局特有的对齐属性。为加深理解，我还特地结合Word中对齐文本的相关操作进行了截图对比。建议收藏。

本篇为《CSS in Depth》全新第2版5.5节最新增补章节，主要介绍了CSS网格布局中的子网格的相关概念、应用场景、具体用法及注意事项。时隔六年，第一版中草草带过的一段说明增补为网格布局的一个全新子章节，足见子网格在业内受欢迎的程序。建议感兴趣的CSS爱好者以及有志在前端开发领域深耕的长期主义者，都能与我一道潜心积累，彻底掌握子网格这个知识点。强烈建议收藏、转发！

本篇为《CSS in Depth》全新第2版5.4小节的最后一部分内容，主要介绍了Grid网格布局中的隐式网格在处理图片与网格单元对齐时的一些细节问题，并引入了 object-fit 属性。虽然内容不多，但想要真正掌握这个知识点，还得在本地实际运行一下较为妥当。建议先行收藏，再对照本文进行实测。

本篇为《CSS in Depth》全新第2版5.4小节的中篇，主要介绍了隐式网格在面对尺寸大小不一的图片布局时具体的用法及相关注意事项。同时介绍了网格布局算法的设置，以及 grid-auto-flow 在使用时容易踩到的坑。建议结合本书示例代码，在本地同步验证介绍的核心知识点。新版的彩色图片大幅提升了内容的可读性，强烈建议收藏。

本篇为《CSS in Depth》全新第2版5.4小节的上篇，主要介绍了 Grid 网格布局中的显示网格（explicit grid）与隐式网格（implicit grid）的基本概念，并通过引入一个新的示例页面，详细演示并讲解了基础网格布局的实现过程，为后续隐式网格的用法做铺垫。建议收藏，并跟随本篇上传的同步源代码在本地进行验证。

本篇为《CSS in Depth》全新第2版5.3小节内容，主要介绍了网格布局的另外两种替代语法——带命名的网格线与带命名的网格区域。本节在前一版的基础上做了部分更新，通过深入浅出的介绍以及重点突出的示例讲解，让读者全面了解并掌握这两种写法的特点及应用场景。文中还附有我本人对部分知识点所做的补充说明，并配有实测截图。建议收藏。

本篇主要对 Grid 网格布局中的网格结构进行了深入剖析，重点演示了网格布局对各页面内容的排布方法，同时与 Flexbox 布局的区别与联系进行了归纳。通过具体的案例阐述了两种布局方法所适用的场景，非常适合希望进阶 CSS 的朋友完善 CSS 知识体系，强烈建议收藏。

本篇为《CSS in Depth》全新第2版5.2小节的上篇，主要对网格布局中的另外四个概念（网格线、网格轨道、网格单元、网格区域）进行了重点讲解。并结合上一章 Flexbox 布局用到的示例页，讨论了网格布局适用的HTML结构，并对新样式中的几个特殊写法逐一进行了介绍，例如 repeat() 工具函数等。本篇是深入理解网格布局的核心基础，配有大量生动直观的彩色插图，非常值得收藏！

本篇为《CSS in Depth》全新第 2 版第 5 章网格布局5.1小节内容，对前一版内容进行了全面更新，很多六年前还在试验阶段的属性都改为了正式写法，非常适合希望 CSS 进阶突破的朋友。建议收藏、多练。

本篇为《CSS in Depth》最新第2版4.4节的后半部分内容，主要介绍了弹性子元素上两个常用属性 align-self 与 order 的用法，接着使用本章介绍的其他属性，完成示例页面最后一个部分（价格区）的样式设置，并对其中的一些细节问题进行了讨论。感兴趣的朋友可以跟着作者的思路，在本地动手实操一下，以加深印象。建议收藏。

本篇为《CSS in Depth》第2版4.4小节的上半部分，主要介绍了Flexbox布局在处理元素对齐与间距设置时的一系列细节配置项，并在第1版的基础上做了大量版面优化和内容增补，并重新整理了 Flexbox 布局属性的三个大表，非常适合初学者进阶CSS布局，对于资深CSS玩家也有较好的参考价值，强烈建议收藏！

本篇为新版《CSS in Depth》4.3小节内容，主要介绍了 Flexbox 弹性布局的方向设置，并结合一个典型的两列布局案例，对垂直方向的弹性布局做了进一步讨论，最后还对表单元素的细节样式问题进行了讨论，这些都是平时容易忽略的非常有价值的知识点，建议收藏并在本地实测。

本篇为《CSS in Depth》新版4.2小节内容，主要介绍了 Flexbox 布局中 flex 属性在控制弹性子元素尺寸大小时的各种配置要领，深入浅出的讲解配合图文并茂的呈现方式，新版中的 Flexbox 布局讲得更透彻、更接地气了（毕竟删除了 float 浮动布局整个章节），建议需要 CSS 进阶的朋友收藏起来，空了在本地实测一下。

本篇为《CSS in Depth》最新第2版第四章4.1小节内容，主要介绍了 Flexbox 弹性盒布局的基本原理，并结合一个简单的示例页面，对顶部的导航菜单进行了深入浅出的讲解。经过了多年的实践，Flexbox 布局技术已经相当成熟，本节较前一版内容也更为凝练，删除了一些不合时宜的表述。非常适合新手进阶，强烈建议收藏实操。

本篇根据《CSS in Depth》第2版第3章3.6+3.7小节内容整理而成，详细介绍了呆头鹰选择器在设置容器内各元素间距场景下的具体应用及最佳实践、注意事项。稍加改动即可用于实际开发项目中，非常实用。此外，新版对上一版相关章节做了大量优化，可读性和可操作性都大大增强，强烈建议需要进阶 CSS 的朋友收藏起来以备后用。

本篇为《CSS in Depth》第2版3.4、3.5小节内容，详细介绍了CSS外边距的两个应用场景：外边距为负值，以及外边距的折叠问题（Collapsing）。本节较第一版作了大幅更新，删除了旧版中很多冗余描述，学习脉络更加清晰，值得收藏借鉴。

本篇为《CSS in Depth》全新第二版第 3.3 小节内容译文，对前一版的内容做了大幅更新，新版知识点更加凝练、体系性更为突出，非常适合前端新手固本强基，夯实基础。这也是前端高手 CSS 进阶的不二法门，强烈建议先收藏，再动手实测一遍，切莫束之高阁。

本篇为《CSS in Depth》全新第二版第3.2小节内容，主要介绍了盒模型的相关概念及注意事项，并对第一版内容上做了大幅更新。建议基础薄弱的朋友先收藏起来，再跟着书中示例慢慢学习体会盒模型的用法。

本篇重点介绍了CSS常规流中的一个重要的基础概念——逻辑属性。它是理解flexbox及grid布局核心概念的基础。文章通过详细的对比和示例进行了深入讲解，并列举了常见的逻辑属性与对应的传统属性。最后还介绍了一种将逻辑属性作为样式简写的巧妙方法，值得广大CSS爱好者收藏并实践。

本篇是《CSS in Depth》全新第二版第三章3.1小节的上半部分内容，在前一版基础上做了大幅更新。主要介绍了常规流的相关概念，并结合实例讨论了常规流下的文本居中样式的设置及注意事项。非常适合基础较薄弱的朋友参考和练手，建议收藏。