先抛两个小问题： 绝对定位相对于谁来定位？大多数人都知道是相对于最近的position设置为relative/absolute/fixed的父元素来定位。那如果所有父元素的position都没有设置上面三个值，那又是相对谁来定位呢？ 包含块是什么？初始包含块又是什么？元素A包含…

flexbox 承诺将我们从万恶的纯 CSS 中拯救出来（如垂直对齐）。 flexbox 也正在实现它的这一目标，但是用户掌握这一新的模型也将会是个挑战。 因此在这里，我们将会用动图介绍 flexbox 是如何工作的，使得我们可以用它来做更好的布局。

FlexBoxLayout 结合 DBFlow

本文主要对 CSS 布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负 margin，清除浮动，居中布局，响应式设计，Flexbox 布局，等等。

什么是响应式？响应式的页面在不同的屏幕有不同的布局，换句话说，使用相同的html在不同的分辨率有不同的排版。如下图所示： 响应式布局是为了解决适配的问题，传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就好了。因为它是用的同样html，所以它的JS…

弹性盒模型是 css3 的一种新的布局方式，是一种当前页面需要适应不同的屏幕大小及设备类型时确保拥有恰当的行为的布局方式。

媒体查询是一个将很多响应式概念和工具连接在一起的粘合剂。这些查询语句都是简单但是功能很强大的，它们允许我们检测设备属性，定义规则，并根据规则等的不同加载不同的 CSS 属性。例如，你可以为不同的设备优化导航菜单，将桌面浏览器上的完整水平菜单转换为经常在移动设备上遇到的 “汉堡包”（垂直或折叠）菜单结构。

视口单位（ Viewport units ) vw : 1vw 等于视口宽度的 1% vh : 1vh 等于视口高度的 1% vmin : 选取 vw 和 vh 中最小的那个 vmax : 选取 vw 和 vh 中最大的那个 转自凹凸实验室（https://aotu.io/notes/2017/04/28/2017-4-28-CSS-viewport-units/）