CSDN首席阴阳师

根元素默认拥有层叠上下文，这可能跟页面中如果没有定位元素的话，默认会定位到根元素是一个道理，我们可以近似认为根元素的position默认值为relative，这也就很好的解释了，为什么页面中所有元素至少处于一个“层叠结界”中。 在使用z-index属性的时候，我们需要注意该属性…

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

理论上relative/absolute/fixed都能对absolute的"包裹性"以及"定位"产生限制，但只有relative能使得元素保持在正常的文档流中，因此我们往往使用absoluted搭配relative使用。之前讲到，left/right/top/bottom是定…

在前面一文中，我们测试了很多“无依赖绝对定位”的特殊表现，事实上在平时开发的时候我们使用absolute都用的都是他的“绝对定位”特性，这也是absolute被设计出来的本职工作。为了做好自己的本职工作，absolute还需要left，top，right，bottom四个属性的…

（1）根元素（通常情况下就是html）被称为初始包含块，其尺寸等同于浏览器可是窗口的大小。 （2）对于position:relative/static（默认）的元素，其包含块由其最近的块容器祖先盒的content-box边界形成。 （3）对于position:fixed的元素，…

overflow属性用于指定块容器元素的内容溢出时的表现方式——滚动，裁剪，自适应。“BFC的最佳结界”只是其衍生出来的特性，“裁剪”才是其本职工作。在使用overflow做裁剪工作的时候需要注意裁剪的边界时border box的内边缘，来看下面的例子。 HTML中有两个标签是…

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

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

抛开inherit这类全局属性不谈，个人把vertical-align分成五类，作者将第一类和第二类总结成线类。 通常情况下，内联元素默认都是沿着字母x的下边缘对齐的，也就是vertical-align的默认值是baseline。但对于图片等替换元素，往往使用元素本身的下边缘作…