前言： 作为学习“基本视觉格式化”的第二篇，我们在对上一篇中“块盒子”整个“格式化”过程中可以得到——所谓的“格式化”，其实就是确定这个“块/行内 盒子”的自身长度、高度，以及与其上下左右相邻“盒子”之间的距离和协调的过程。在确定这个“长度、高度、距离和协调”的过程中会有很多“…

前言： 本篇也是一篇纯基础、纯理论文章，但重要性毋庸置疑。 在利用 CSS 能做的几乎所有工作中，其基础都是“单位”，这是影响所有属性的“颜色”、“距离”和“大小”的一种元素。如果理解了本篇介绍的相关知识，你就能更快地学习和使用 CSS 的余下内容。 对于“颜色”的学习，让我们…

前言： 通过前 3 篇系列文章，我们对 HTML 有了一个比较详细的了解。接下来的一系列文章，我们将一步步细致地认识 CSS。 届时，我相信我们能够轻而易举地、规范地写出我们看见的任意一个静态页面。 CSS（Cascading Style Sheets 层叠样式表）：用来控制 …

前言： 实际上在很早之前，CSS 就支持媒体查询了。 例如，页面有些部分需要在打印的时候隐藏或者变大，这时候可以使用 media 使某些 style 只在打印的时候生效。 而 CSS3 的 Media Queries 的到来，可以让我们针对不同的设备场景使用不同的 CSS。 a…

前言： 通过前 8 篇文章基础知识的铺垫，我们也算是见识了 CSS 的“神通广大”。 这篇文章，我们就把实际工作中最高频用到的“CSS 加样式”挨个列一列，用一行行代码来展示 CSS 是如何给“盒子”、“背景”、“链接”、“列表”、“表单”、“表格”等加样式的。 本篇的所有知识…

前言： 前 10 篇文章，我们基本上都是在用“理论”学习“理论”，那从这篇开始，我们试着用“实践”来学习理论，然后又用于实践。 假设我们需要有个东西，然后它的排版不是依照盒模型的定义——从上往下依次排列，而是从左到右这种结构，那么我们需要考虑到使用“浮动”。 例如一个网站的头部…

前言： 接下来的几篇系列文章我们讲一个东西——盒子（BOX）。 “盒模型”（Box Model）作为 CSS 看待元素的一种方式，CSS 将每个元素都看作由一个盒子表示。从某方面来说，对于初级、中级学习者的我们，大可将 CSS 的学习看作是对“盒子”的学习。 本篇我们将阐述最基…

前言： 作为上一篇《（05）CSS 给文本加样式：① 字体属性 | CSS》的兄弟文章，我们继续逐一学习“文本属性”怎样给文本加样式的。 大整形：把文本放在最和谐、最养眼的位置——文本布局。 这个就类似于我们用的 Office 的 Word 里：首行缩进、左对齐、右对齐、居中、…

前言： 拿到一张设计稿，我们首要的就是从宏观上考虑这整个页面的“布局”。随着前端技术的不断更替，以前很多老的布局方式现在也慢慢淡化了，那哪些是我们最基本最常用的布局方式呢？ 本篇给出答案，属于必掌握篇。 从上到下、从左到右、定宽、自适应... 现方式——定宽 + 水平居中。 一…