第七十五章 现代布局方法

这是一个重头戏,它们其实不难,只是复杂。复杂到我们最开始看到它们的时候都是相同的感觉——不知所云,无从入手。

读书么,就是把书读薄,再把书读爆的一个过程。所谓读薄,就是从描述中抓住梗概,提取出里面的脉络。这样你就获得了一个提纲。

然后再根据这个提纲往里面补充内容,不只是书中的内容,还有你自己的思考。反正提纲被你握在手里,再无需担心迷路的问题,这时候就可以疯狂的往其中汲取知识,最后获得超出书本的知识,这是把书读爆。

先抓住梗概,然后纲举目张。

我只能尽力的帮大家做到第一步,把这件事情的梗概抓住交给你们。至于能不能抓住这条正在噗楞楞翻腾的梗概……我看好你们呦~

以下的描述都是建立在对前面知识足够了解,并已经进行了不少于十个页面的练习,的基础之上。如果没有,那么新旧知识容易混在一起,就不好弄了哦~

回顾一下,我们在前面是如何进行排版布局的。纵向是靠块元素在文档流里面的自然排列状态;横向是靠行内元素和浮动实现的;层叠则是借助定位方式。所以三个方向(三维),通过三种方式解决,最后交织在整个页面之中,这,不优雅!

而且,面对着移动设备的崛起,现在的页面必然需要面对响应式的问题,尺寸跨度太大。原本通过种种方法的相互作用,创建起来布局效果,现在居然要动起来。这就不只是复杂度翻倍那么简单了。这,不友好!

我们可不可以制定一套规则,让一切元素按着规则排布,从而解决问题?答案是可以的,而且我们不只有一套规则可供选择。

这里要说两个问题:首先,规则。我们以前的方法是指定了排队的方法和次序,然后努力消除我们不需要的效果。这是在现有的资源中为了实现效果而打补丁的方法。打比方说就是我们喊了一声:大家要排队!但是怎么排队并没有一个确定的规则,全靠人群中的保安按着自己的想法去维护(局部施行的规则),最后勉强形成了队伍,达到了有序的目的。但是让这个队伍,整体换个地方,就很容易产生混乱。

而我们要讲的新方法则是制定规则,只要一切都遵守这个规则,那你只要调整有限的几个参数,所有内容就都跟着动了起来。这就像是纪律严明的战士,令行禁止,和临时排队的乌合之众有着本质的区别。

其次,选择。CSS3 很美好,但是浏览器是否已经支持一定要看好。而我们这次讲的东西虽然基础部分已经被现代浏览器所支持,但是高级属性依旧一片飘红,甚至还没有浏览器支持。这就要求我们根据情况,合理的去选择方法,进行应用。而且,因为各具特点,就各具优势,那么合理的选择,也会让我们书写页面变得更加容易。

说明一下:我讲解的顺序和别人不太一样。因为一共二十多个属性吧,但是和我们前面所学的不一样。我们前面所学的属性单拿出来,写下就有效果,这很直观,无论有多少个取值,我按需查询就行了。而后面的属性是需要共同作用的,单拿出来一个没用,共同作用就意味着你有五种取值,我有四种取值,最后面对的就是四五二十种……这就吓得我赶紧抱住可爱的自己。

所以先放下其他,跟着我的思路去看,去想。听帅气的老鼠导游的话,不许乱跑~

现在,做好准备,让我们开始认识一下这两套规则吧。

未经允许不得转载-易看设计:易看设计 - 创意.极致.传达 » 第七十五章 现代布局方法

打赏

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

支付宝扫一扫打赏

微信扫一扫打赏