背景 背景定位其实和前面这些定位很相似，它是背景图片相对于当前元素的定位关系。这里面复杂的是图片上的某个点相对于元素的某个点的偏移，而这两个点在各种情况下是不同的。 基本情况 默认图...

在我心目中，都是用坐标系来描述这些问题，然而想到要写这一章内容，进行归纳总结的时候发现，说坐标系有点不确切。很多都是单独的坐标轴，即一维问题，每一个维度都是单独考虑，即便涉及两个维...

又是对齐的问题，其实和我们前面所讲的一样一样一样的啊。 需要明确几个小问题，网格的轴是不会发生变幻的。所以 justify 就是指横向，左边开始，右边结束。align 就是指纵向，...

先来一个简单的 grid-column-gap / grid-row-gap / grid-gap，是说网格线的粗细，默认粗细当然是 0 了，你也可以自定义，但没有颜色，其实也就是网格单元格之间的间隔。最后一个是前两个的...

棋盘已经画好，只要摆上棋子，老夫就以这天地为棋局，与你对弈个天昏地暗！（老鼠忽然中二病发作，快，快灌他喝咖啡~ 我们现在画出了网格，把子元素摆在里面就行了。问题是：每一个子元素放在哪...

先画出格子来，再往里面放东西。现在我们进行第一步，画格子。 那我们如何描述这些网格线的位置呢？想想我们自然语言（就是平时说话）怎么说： 每隔五十像素画一根线；隔五十像素画第一根线，再...

网格布局比弹性布局涉及的属性多了好多。然而其实更简单了。 弹性布局是一维布局，侧轴方向的延伸属于被动技能。网格布局就厉害了，是二维布局，两个轴同等重要。说白了吧，就是在容器里面划上...

前面我们从来没在对齐这个问题上犯过难。 这次么，也还行，反正就是三个情况，每个情况分两个方向（主轴方向和侧轴方向），结合之后六个属性而已。这些属性的取值都差不多，反正相似的地方很多...

于是乎，我们解决了排列的问题，可以方便的横排，竖排，反着排，还不用消除浮动了。但这就够了么？来个新属性吧，order，表示元素在主轴上的排列顺序。额，这个当然不是整体定义，而是对布局中...

我们以前的布局方法，虽然可以完成三个维度，但是每个维度都是各自为政的，一个混乱的体系。 而弹性布局则是一维布局，它有两个轴，优先关心主轴，然后用侧轴辅助。这有点像什么？我们写字，说...

因为我们已经有了一套布局方法，虽然有很多缺点，但是目前，论兼容性，这是最好的，所以这一套不能丢。就算是在过渡时期吧，也可以两者结合着用。 然后我们这里有两套系统：弹性（Flex）和网格...

这是一个重头戏，它们其实不难，只是复杂。复杂到我们最开始看到它们的时候都是相同的感觉——不知所云，无从入手。 读书么，就是把书读薄，再把书读爆的一个过程。所谓读薄，就是从描述中抓住...