阅前必看：本文总结了各种常见的布局实现,每个方法的优缺点分析往后在github上陆续补充。还有就是这篇文章没提到的其他布局，待本人后续想到或遇到定会在github上及时更新。 由于文章篇幅较长,排版有些混乱,希望别介意哈。掘金PC端是会自动生成目录的,为了方便移动端阅读，还特意…

前言： “伪元素”在我们创建样式的时候用处很多，它可以大大简化我们的代码量，还可以做一些出乎意料的动作。 用于创建一些不在文档树中的元素，并为其添加样式。 其中 content 是必不可少的。 | rotateZ(angle) | 定义绕着 Z 轴的 3D 旋转。 | 后记： …

前言： 这一篇我们主要探讨“定位”和 BFC 是怎样让“盒子”动起来的。 学习方法依然是：打开 JS Bin，拷贝代码运行查看效果，然后搞定每一行代码的前世今生。 “定位”就是通过设置 position 属性的值来脱离正常的文档流。 当你设置为绝对定位后，文档流上的其他元素就看…

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

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

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

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

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

前言： 作为 Web 页面最基本的组成部分，“文本”的重要性不言而喻。对于“文本”来说，我们需要掌握两个与之相关的属性——“字体属性”和“文本属性”。 CSS 文本属性：主要定义“文本”的外观——如缩进和水平对齐、垂直对齐、字间隔和字母间隔、文本转换、文本装饰、文本阴影、处理空…