因为我们已经有了一套布局方法，虽然有很多缺点，但是目前，论兼容性，这是最好的，所以这一套不能丢。就算是在过渡时期吧，也可以两者结合着用。
然后我们这里有两套系统：弹性（Flex）和网格（Grid）。你看这两个单词，都只有四个字母，背一下用不了五分钟吧，毕竟后面也要用，在这里就把他们区分开会很清楚。
诶？！说到哪里来着，对，我们有两套系统，他们是可以共存的。所以也就是说在同一个页面内可以同时使用这三套系统，我们面临一个问题：区分。
前面的布局方法不用说了，拿起来就用，那是使用的网页元素的基本特性实现的。另外两种怎么区分？要注意，我们讲到布局，就不是一个元素的事情，而是一组元素的事情。所以，事实上，我们要做的是，给元素分组。
最简单的方法，A 元素里面的所有元素使用弹性（Flex）布局，B 元素里面的所有元素使用网格（Grid）布局。就是给一组元素套上一个父元素，算是打包出售了。因为这时候父元素的对内表现是块元素，我们可以继续排队的比喻，这个单位内部，有自己独特的排队规则。
好，我们引出了最基本的一个属性定义。
#a {display: flex;}#a {display: grid;}通过 dispaly 属性来定义这个元素中的子元素使用哪种布局规则，这很合理。毕竟我们的块元素（block，竖排）和行内元素（inline，横排）也是通过这个属性来定义的。
现在发现一个异类 inline-block。我们说他的意思是什么呢？对外表现为行内，而对外表现为块。上面我刚刚说了一句——“父元素对内表现为块”。所以其实我们也有如下两种写法：
#a {display: inline-flex;}#a {display: inline-grid;}第一种，对外当作块元素看待，第二种对外当作行内元素看待。这和 block 或者 inline-block 没区别。所以它真正影响的，是子元素。即规定了内部的布局规则。
然后我们要先进行一个划分。我们制定这个规则的时候会考虑两个方面，一个是整体上的，一个是个体上的。如果某个属性一旦发生变化，必然的，所有相关元素都会受到影响，这影响就是整体上的；相反，属性一变化，只有一个元素受到影响，那就是个体上的。
整体属性（没有这个名词，仅为方便讲解，临时用一下，下同），我们放在父元素里，因为它会影响到每一个子元素。父亲一制定规则，儿子们就乖乖按着规则去干活了。
个体属性只影响到某一个元素，所以它要写在相应的元素上，也就是布局中的子元素。
有了这个区分，我们就把属性先做了一个归类。后面看到属性，先想一想它属于哪一类，你对它就先有了一个大概的定位。
我们说过文档流，是驱动文档布局的最原始力量。这就是一种布局的规则，那么文档流的英文怎么写呢？Normal flow，怎么样，没想到吧，正常流，普通流，基本流，默认流。要是这么说，估计大家就容易理解的多了。好啦，这个翻译并不是我们的重点。所以 flow 的意思是“流”，有了默认的、基本的，我们很容易想到，我们后面的就是不默认，不基本的了。
对，所以我们用这两种方式布局的第一步其实都是定义流……的基本设置。因为我们在选择了布局方式的时候就已经规定了流的规则，但是它还需要一些具体的参数来规范当前的元素。
一些具体的参数就是说……这两种方式的流都是复合属性（快捷属性，简写属性，怎么叫都可以，反正你明白是什么就好）。那么下一章我们开始展开。
暂无评论内容