自Web诞生以来，我们一直习惯于物理CSS属性，比如我们都知道使用margin-top、margin-right、margin-bottom和margin-bottom来设置元素的外边距，但随着书写模式特性的出现，这些物理特性，比如上、右、下和左的概念已经失去了它们的意义。特别是随着越来越多的Web开发人员要处理国际化业务，那么以前的物理特性已经无法满足业务的需求。换句话说，为了具有不同编写模式的多种语言设计页面时，开发人员必须跨多个元素分别调整这些物理属性，这也成了Web开发者的噩梦。幸运的是，CSS的逻辑属性的出现，可以让开发者根据书写模式来维护布局的完整性。即，根据内容的语义顺序进行动态更新。今天这篇文章，我们将和大家一起来探讨CSS的逻辑属性。

CSS布局发展至今可以说变化非常的大，其中Flexbox布局已经取代了以前最为流行的浮动布局。这里所说的Flexbox布局指的就是 CSS Flexible Box Module Level 1（简称Flexbox，弹性布局）。Flexbox模块的出现让Web的布局变得极为简单。虽然Flexbox给Web布局带来了很多优势，而且让布局变得简单，但就Flexbox模块本身来说是非常复杂。在这一章节中，我将和大家一起来探讨CSS的Flexbox 模块相关的知识。

在《图解CSS：Flexbox布局(Part1)》中主要和大家聊了Flexbox布局模块中的技术术语以及运用于Flex容器上的相关属性。在第二部分，主要和大家介绍运用于Flex项目中的属性，比如align-self、order和flex。这一部分也是Flexbox布局中相当复杂的一部分，因为flex的flex-basis、flex-grow和flex-shrink属性的计算非常复杂，也直接影响到Flex项目的尺寸大小。如果你对这部分感兴趣的话，请继续往下阅读。

CSS的border-radius属性是属于 CSS Backgrounds and Borders Module Level 3 的一部分。随着CSS技术的不断变革，border-radius除了我们熟悉的物理属性之外新添加了逻辑属性。而且border-radius取值不同，绘制的圆角效果也会有所差异。当然，在很多开发者眼中，border-radius已经是非常简单的一个特性，但试问一下，你真的理解了该特性呢： border-radius取不同值会发生什么？ 取值为%值时相对于谁计算？嵌套会发生什么？半径重叠时会发生什么？如果你不能非常明确的回答上面提到这几个问题，那么接下来的内容就值得你花时间阅读。

CSS媒体查询（CSS Media Queries）是CSS基本特性之一。它的作用就是让我们在相同的HTML基础上可以以不同的CSS实现适配各种终端的UI效果（比如，桌面端、iPad、双屏幕、折叠设备和移动手机等）。也就是说，我们可以为它们（不同的终端设备）使用相同的HTML，而不是为智能手机维护一个网站，为笔记本电脑、台式机维护另一个网站。但是它们是如何工作的，有哪些是你应该使用的呢？这就是我们接下来要和大家一起探讨的。

CSS的渐变主要分布在 CSS Images Module Level 3 和 CSS Image Values and Replaced Content Module Level 4 两个规范模块中，其中Level 4 和 Level 3相比，新增了conic-gradient()和repeating-conic-gradient()两个属性。在CSS中，CSS的渐变相当于图像，我们可以使用线性渐变（linear-gradient()和repeating-linear-gradient()）、径向渐变（radial-gradient()和repeating-radial-gradient()）和锥形渐变（conic-gradient()和repeat-conic-gradient()）。事实上这三种渐变就相当于背景图像，而且渐变通常是一种颜色渐变到另一种颜色，但是CSS允许你控制渐变发生的每一个方面，从方向、形状到颜色，以及它们如何从一个渐变到另一个渐变。在这篇文章中，主要和大家一起探讨有关于CSS渐变相关的话题。

CSS 滚动捕捉是 W3C 中 CSS Scroll Snap Module Level 1 模块，可以用来创建一个可滚动的容器，可用来替代以往依赖 JavaScript 脚本来创建滑块组件。也就是说，使用该特性（CSS 的滚动捕捉特性）是快速将元素制作成可滚动容器的一种简单快速的方法。另外，CSS 滚动捕捉特性还可以帮助我们给用户更好的体验。接下来和大家一起来探讨这个 CSS 新特性，即 CSS 滚动捕捉。

图解CSS：CSS滚动捕捉这一章节分成两个部分，第一部分主要介绍了 CSS 滚动捕捉理论方面的知识，详细介绍了 CSS 滚动捕捉中的 scroll-snap-type 、scroll-snap-align 、scroll-margin 、scroll-padding 以及 scroll-snap-stop 等属性。并且通过一些示例向大家展示了它们怎么使用。在第二部分，也就是接下来的内容中，从简单的示例着手（有些示例在第一部分也出现过），慢慢过渡到复杂的示例，比如模拟 iOS列表向左滑动的交互效果。如果你感兴趣的话，请继续往下阅读。

Grid 布局指的是 CSS Grid Layout，它和以往 CSS 框架（CSS Framework）中所说的网格系统（Grid System）有所不同。它是一个基于网格的二维布局系统，在 CSS 中有三个版本的规范（Level 1、Level 2 和 Level 3，其中 Level 1 和 Level 2 已进入 W3C 规范 TR 阶段，Level 3 目前还在 ED 阶段）从不同的角度定义 CSS 网格布局模块，这几个模块是专门为解决布局问题而创建的。另外，到目前为止，在 CSS 的系统中，只有 CSS Grid 布局才是二维布局。同时它也是一个复杂的布局系统，所涉及到布局知识要比以往了解的布局模块（比如我们熟悉的 Flexbox 布局）要复杂得多。为此，在图解 CSS 系列中，将分几篇文章来和大家一起探讨 CSS Grid 布局模块。

在上一节中，主要介绍了 CSS 网格布局中的一些重要概念和相关术语。从这些概念和术语中，从侧面也再次说明CSS 网格布局到目前为止是最为复杂的一个布局系统，换句话说，CSS 网格布局系统中会有很多属性，这些属性和 Flexbox 布局有些类似，有些属性只能作用于网格容器，有些属性只能作用于网格项目。而在这篇文章中，先从可用于网格容器的属性，即使用display属性创建网格容器和网格项目， grid-template-areas、grid-template-columns 和 grid-template-rows 以及这三个属性的简写属性grid-template 来定义显式网格。如果感兴趣的请继续往下阅读。