聊聊CSS

在Web 页面或 Web 应用程序的开发中，有些元素是需要被隐藏起来。让一个元素隐藏起来的实现方案会有很多种，只不过每种不同的技术方案实现的原理和最终呈现给用户的渲染方式会有所不同。

对于许多 Web 开发者来说，使用 CSS 制作边框动画并不容易，事实上，借助现代 CSS 特性和 CSS 动画，我们有更多技巧可以给边框添加动画效果。而且事情越来越简单，效果越来越优雅和引人注目。

在这个不为人知的CSS Overflow教程中，你将学到如何处理元素溢出的内容，以及如何利用它们来创建出色的用户体验。此外，还包括如何处理内联元素和块级元素的溢出内容，以及如何应对特定情况下的溢出问题

通常情况之下，开发者都习惯了规则的矩形布局的效果，对于 Web 设计师提供的不规则布局，难免会带有一种恐惧。这篇文章将告诉你如何使用 CSS 和 SVG 来实现类似水波纹这样不规则的 UI 效果！

SVG 图标在 Web 应用或网站上得到广泛应用，但 CSS 如何穿透 Shadow DOM，为 use 元素定制样式需要一些特殊的技巧。这篇文章带领你领略其中的奥秘！帮助你实现高可定制化图标样式！

可以说，在 Web 应用或网站上，按钮无处不在。它们是 Web 页面和应用界面中最常见的元素之一，用于触发各种操作和交互。然而，在 CSS 中，我们可以通过各种技巧来改变按钮的外观和行为，使其更加灵活

CSS自定义属性（CSS Variables）为开发者提供了一种在样式表中定义和重复使用的方法，提高了代码的可维护性和灵活性。通过声明变量并在整个样式表中引用它们，可以轻松地实现样式的统一管理和调整。

CSS 中的无穷大，主要要知道的是它本质上是表示特定情况下最大可能值或最小可能值的简写。无穷大可以作为一种表达意图的良好指示，使你的 CSS 更易读！

在CSS中插何一个元素都是一个盒子，甚至是文本节点也是一个盒子（匿名盒子）；都有自己的视觉格式化（不同的盒子）。而其中CSS的display属性又可以显式的修改每个盒子的视觉格式化模型!

近几年 CSS 发展非常的快速，已经发展到了具备条件规则的程度。有趣的是，CSS 规则中并没有像其他程序语言的 if ... else ... ，但 CSS 中的功能却具备了条件化的能力。

大部分 Web 开发者都知道 CSS 中有一个盒模型，但很少有人知道在 CSS 的世界中还有另一个模型，他就是 CSS 的视觉格式化模型。理解了该部分所涉及到的知识点，有助于实现 Web 布局！

在 Web 中，我们时常会碰到文本淡化的效果。这里所说的文本淡化不是淡入淡出的动画效果，而是文本（或元素）的一种视觉效果，其显著特征是，由清晰逐渐变得不可见！

在Web布局中，现代CSS特性就可以更好的帮助我们快速实现，例如等高布局，水平垂直居中，经典的圣杯布局、宽高比例、页脚保持在底部等。在本文中，我将会介绍一些不同的CSS属性来实现这些效果！

Web 中的任何一个元素都是有大小的，即使没有给元素设置任何有关于大小的属性。了解如何设置元素大小是非常重要的，因为它们直接会影响一个元素的渲染，特别是在 Web 布局的时候非常重要！

CSS 的值和单位是 CSS 另一个独立功能模块，今天我们就来聊聊这个模块里的内容。在这篇文章中，我们所涉及到的大部分内容也是聊单位这一块，对于值这一部分只会花一点点内容略为带过。

在学 习 Web 布局 之前有一个非常重要的概念需要理解，这个概念就是盒模型。CSS 盒模型是多个不同的 CSS 规则集合，定义了如何渲染 Web 页面。

CSS 中有三个概念是必须要掌握的：层叠、继承和权重。今天我们主要来了解 CSS 中的层叠和继承。层叠是 CSS 固有的一个东东，它赋予了层叠样式表层叠性，也常称级联。

CSS 的发展速度比以往任何时候都要快。近几年，CSS 已经新增了许多新功能可用，而且还会有更多新功能即将推出。这个发展速度是令人兴奋的，同时也有些压倒性。

你将知道一个CSS属性的制定将会经历哪些过程，为什么会有浏览器的私有前缀以及如何更好的处理这些私有前缀，在文章最后简单的介绍了开发人员如何对CSS新特性做一些渐进增强，优雅降级的处理。

2023年我与掘金小册结缘，在 2023 年，完成了《现代 Web 布局》、《防御式 CSS精讲》和《现代 CSS》三本小册，《Web 动画之旅》正在完成的路上！感谢曾经努力的自己！感谢一路支持我的你