说到margin，通常我们会想到一层透明的外边距，用于划分元素与元素之间的界限，然而margin除了可以划分边界，还可以改变元素"可视尺寸"，注意这里我没有用内部尺寸，因为margin和padding在改变元素可视尺寸方面几乎是互补的。对于设定了width或者元素保持"包裹性"…

HTML中只有两种元素，块级元素和内联元素。块级元素拥有“换行”的特性，一般用于结构（骨架），内联元素能够同行显示，一般用于内容展示。需要注意的是，块级元素并不是指“display:block”的元素，同样的，内联元素也不单单是“display:inline"的元素。但是，这两…

本系列的许多专业知识来自张鑫旭写的书 ——《CSS世界》。 原本我想给这个系列命名为CSS世界的，但想到这实在有些“侵权”，或者说，这有意无意的蹭了原著的热度，同时我也不想起一个很有噱头的名字来吸引别人的注意力，如你不知道的CSS之类的，最终我选择一个实在普通不过的——“CSS…

既然都是三维世界的层叠关系，那我们以自己的世界为例，来谈谈05年春晚的一个节目——千手观音。 千手观音这个节目很好的展现了三维世界的层叠关系与所展现的“视觉效果”。以图片平面为xy平面，视觉上呈现了排在第一个的人的完整图像，已第一个人为准，排在他后面的人，构成了三维世界的z轴，…

BFC是block formatting context的缩写，中文名为“块级格式化上下文”。前面也多次提到了这个听起来十分拗口的属性，那么CSS设计这个属性的初衷是什么呢？ 记住一句话：拥有BFC特性的元素会形成类似“结界”的封闭内部空间，该元素内部的元素以及该元素本身都不会…

在深入了解float之前，相信大家都听过一个传说，就是float被设计出来的目的是为了实现文字环绕图片的效果，可能是初学的时候忘了，还是受了“清浮动”的毒，我自己都忘了有没有用float去实现过这个效果。因此下面我们先来实现一下float的设计初衷，文字环绕图片效果。 非常简单…

要了解内联元素，就不得不提到字母x，正是有了x，内联元素才确定了自己的基线（baseline），有了baseline之后，才有了line-height和vertical-align。因此在学习后面的内容之前，必须要了解一个概念： 既然x那么重要，因此CSS还给了它一个特殊的称呼…

padding是盒模型的内边距（也称内补间），在CSS中，box-sizing默认的值是content-box，所以使用padding会增加元素的尺寸，例如 {width : 60px;padding : 0 20px},如果不考虑其他CSS干扰，此时content-box的宽…

在了解content之前，我们需要掌握CSS中一种常见的元素——替换元素。替换元素是“内容（content）可以被替换”的元素，常见的有“input”、“img”、“iframe”、“video”等。以图片为例 《img src="1.png" /》我们只需要将src的图片替换…