第七十六章 一些共性

因为我们已经有了一套布局方法,虽然有很多缺点,但是目前,论兼容性,这是最好的,所以这一套不能丢。就算是在过渡时期吧,也可以两者结合着用。

然后我们这里有两套系统:弹性(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 的意思是“流”,有了默认的、基本的,我们很容易想到,我们后面的就是不默认,不基本的了。

对,所以我们用这两种方式布局的第一步其实都是定义流……的基本设置。因为我们在选择了布局方式的时候就已经规定了流的规则,但是它还需要一些具体的参数来规范当前的元素。

一些具体的参数就是说……这两种方式的流都是复合属性(快捷属性,简写属性,怎么叫都可以,反正你明白是什么就好)。那么下一章我们开始展开。

未经允许不得转载-易看设计:易看设计 - 创意.极致.传达 » 第七十六章 一些共性

打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏