CSS in Depth 2
关注
分享
扫一扫
文章平均质量分 95
全新第二版《CSS in Depth》翻译专栏。旨在自学 CSS 最新语言特性的同时增强自身的英语阅读与翻译水平。所有翻译内容均为原创，欢迎转载交流，转载请注明出处。
安冬的码畜日常
决心转行，投身IT，心怀感恩，潜心积累，做自己喜欢的事，让梦想照进现实。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
【CSS in Depth 2 精译_021】3.4 负的外边距 + 3.5 外边距折叠
本篇为《CSS in Depth》第2版3.4、3.5小节内容，详细介绍了CSS外边距的两个应用场景：外边距为负值，以及外边距的折叠问题（Collapsing）。本节较第一版作了大幅更新，删除了旧版中很多冗余描述，学习脉络更加清晰，值得收藏借鉴。原创 2024-08-27 17:35:37 · 1035 阅读 · 0 评论 -
【CSS in Depth 2 精译_020】3.3 元素的高度
本篇为《CSS in Depth》全新第二版第 3.3 小节内容译文，对前一版的内容做了大幅更新，新版知识点更加凝练、体系性更为突出，非常适合前端新手固本强基，夯实基础。这也是前端高手 CSS 进阶的不二法门，强烈建议先收藏，再动手实测一遍，切莫束之高阁。原创 2024-07-21 12:18:08 · 1438 阅读 · 0 评论 -
【CSS in Depth 2 精译_019】3.2 CSS 的盒模型
本篇为《CSS in Depth》全新第二版第3.2小节内容，主要介绍了盒模型的相关概念及注意事项，并对第一版内容上做了大幅更新。建议基础薄弱的朋友先收藏起来，再跟着书中示例慢慢学习体会盒模型的用法。原创 2024-07-18 18:14:28 · 1522 阅读 · 0 评论 -
【CSS in Depth 2 精译_018】3.1.2 逻辑属性 + 3.1.3 用好逻辑属性的简写形式
本篇重点介绍了CSS常规流中的一个重要的基础概念——逻辑属性。它是理解flexbox及grid布局核心概念的基础。文章通过详细的对比和示例进行了深入讲解，并列举了常见的逻辑属性与对应的传统属性。最后还介绍了一种将逻辑属性作为样式简写的巧妙方法，值得广大CSS爱好者收藏并实践。原创 2024-07-14 14:06:29 · 956 阅读 · 0 评论 -
【CSS in Depth 2 精译_017】第三章 文档流与盒模型 + 3.1 常规文档流
本篇是《CSS in Depth》全新第二版第三章3.1小节的上半部分内容，在前一版基础上做了大幅更新。主要介绍了常规流的相关概念，并结合实例讨论了常规流下的文本居中样式的设置及注意事项。非常适合基础较薄弱的朋友参考和练手，建议收藏。原创 2024-07-12 17:56:34 · 1627 阅读 · 0 评论 -
【CSS in Depth 2 精译_016】2.6 CSS 自定义属性（即 CSS 变量）+ 2.7 本章小结
本篇为《CSS in Depth》全新第二版第2.6小节内容，主要介绍了 CSS 自定义属性（即 CSS 变量）的概念及适用场景，并由此对比了 CSS 变量与其他 CSS 预处理器中的变量，还针对前者特有的对层叠规则和继承规则的支持，通过一个案例加以说明。建议初学者收藏备忘。原创 2024-07-09 11:56:31 · 1097 阅读 · 0 评论 -
【CSS in Depth 2 精译_015】2.5 无单位的数值与行高
本篇为《CSS in Depth》全新第二版中第2.5小节内容，主要介绍了 CSS 继承样式中一个很容易出错的知识点：继承的属性值的计算问题。通过对比带单位与不带单位的值对比设置行高来进行说明。有助于强化 CSS 基础知识点。原创 2024-07-07 19:19:42 · 923 阅读 · 0 评论 -
【CSS in Depth 2 精译_014】2.4 视口的相对单位
本篇为《CSS in Action》最新第二版第2.4小节全新改版内容。文章在第一版的基础上，对视口的新增相对单位做了细致入微的探讨，还进行了分类汇总。在视口相对单位的应用方面，也对旧版内容做了全新升级，新加 clamp 函数实现响应式设计，非常值得前端开发人员用心积累。原创 2024-07-03 23:42:51 · 1349 阅读 · 0 评论 -
【CSS in Depth 2 精译_013】2.3 告别像素思维
本篇为《CSS in Depth》全新第二版中第二章2.3小节内容。文章详细解释了摒弃传统像素思维的原因以及转为以相对单位为基础的样式设计的必要性，并结合大量实用案例与配图，加深对重点知识的理解，最后还大幅更新了上一版对CSS3的展望。值得收藏。原创 2024-07-01 17:41:22 · 1218 阅读 · 0 评论 -
【CSS in Depth 2 精译_012】2.2.2 使用 rem 设置字号
本篇为《CSS in Depth》最新第二版中第二章2.2 小结的收尾部分。主要介绍了相对单位 rem 的使用及其注意事项。文章的最后还简要讨论了页面默认字体大小的设置方法及网页可访问性的相关知识。原创 2024-06-28 22:28:59 · 783 阅读 · 0 评论 -
【CSS in Depth 2 精译_011】2.2 em 和 rem + 2.2.1 使用 em 定义字号
本篇为《CSS in Depth》最新第二版第二章2.2小节的前半部分内容。主要介绍了 CSS 中相对单位在响应式设计方面的强大作用，以及使用过程中容易出现的问题。配合大量的示例代码与插图，让读者逐渐放下对em的戒备心理，为后续学习奠定坚实基础。原创 2024-06-28 20:33:19 · 1476 阅读 · 0 评论 -
【CSS in Depth 2 精译_010】第二章 相对单位 + 2.1 相对单位的威力
本篇为《CSS in Depth 2》最新第二版中第二章概述以及 2.1 小节内容的译文。主要讲述了 CSS 相对单位的一些基本情况，并在 2.1 小节详细介绍了相对单位的适用场景，为本章后续内容中更多相对单位的演示打好必要的铺垫。原创 2024-06-28 01:21:19 · 1131 阅读 · 0 评论 -
【CSS in Depth 2 精译_009】1.5 渐进式增强 + 1.6 本章小结
本文为《CSS in Depth》最新第二版第一章1.5小节内容精译，同时也是改版后的全新内容。文章详细讲解了 CSS 中渐进式增强的相关概念与使用方法、主要的注意事项，并对常见的CSS特性查询的写法进行了归纳。原创 2024-06-23 16:51:10 · 1358 阅读 · 0 评论 -
【CSS in Depth 2 精译_008】1.4 简写属性
本节主要讲解了 CSS 简写属性的基本用法和一些重要的注意事项。对于简写属性的样式值的顺序做了详细说明，并结合示例分别给出了两类记忆口诀。原创 2024-06-22 17:21:25 · 1079 阅读 · 0 评论 -
【CSS in Depth 2 精译_007】1.2 继承~1.3 特殊值
本文介绍了CSS样式设置的另一种方式——继承，以及与样式重置密切相关的四个常见关键字：inherit、initial、unset 以及 revert。通过具体示例对这些知识点进行了详细说明。原创 2024-06-20 18:01:37 · 987 阅读 · 0 评论 -
【CSS in Depth 2 精译_006】1.1.4 源码顺序
本节为原书1.1.4小结的内容。主要介绍了 CSS 在处理样式冲突过程中的最后一个层叠规则节点——源码顺序。并结合几个小案例给出了一些实用建议。原创 2024-06-19 15:47:55 · 1138 阅读 · 0 评论 -
【CSS in Depth 2 精译_005】1.1.2 行内样式~1.1.3 选择器的优先级
本文对应原书1.1.2与1.1.3小节内容，主要讲解了行内样式规则和选择器优先级规则的相关知识，并结合具体示例，对不同选择器的优先级进行了深入浅出的分析和细致的讨论。原创 2024-06-19 02:20:06 · 987 阅读 · 0 评论 -
【CSS in Depth 2 精译_004】1.1.1 样式表来源
本节介绍了层叠规则中的第一个常见规则：样式表来源规则。根据几个小案例，并结合 CSS 中 `!important` 标记的使用，对六类常见的样式表来源的优先级按照从大到小的顺序作了排序。原创 2024-06-17 12:26:42 · 1250 阅读 · 0 评论 -
【CSS in Depth 2 精译_003】1.1 层叠
第一章第一节，主要介绍了 CSS 中的层叠的相关概念，以及最新的样式冲突判定规则。仅供个人学习参考，欢迎交流。原创 2024-06-17 00:54:48 · 1013 阅读 · 0 评论 -
【CSS in Depth 2 精译_002】第一章：层叠、优先级与继承
第一章开篇词及主要内容。原创 2024-06-16 00:04:31 · 723 阅读 · 0 评论 -
【CSS in Depth 2 精译_001】写在前面的话
对本专栏创作背景的简要说明。原创 2024-06-14 13:09:55 · 612 阅读 · 0 评论