当前位置:海盈网站工作室 >> 新闻中心 >> 设计前沿

CSS禅意花园 - 正文布局 - CS(S) Monk(三)

点击数:23322012-09-22 18:47:32 来源: 海盈网络

    2. 内容区域
    虽然CS(S) Monk的主题内容为居中的单栏布局,但每一节的内容和标题都用不同外边距区分开来,看上去就像分为两栏一样。如图用简单的蓝色高亮展示了这两栏在页面中的分布,二者比例匀称,与页面配合的非常好。

    左栏的宽度大概为右栏的2/3,即左右宽度比率为2:3。两栏之间的这种较为精确的比例可以自动划分:当指定好左蓝的宽度之后,右栏的宽度就由剩下的空间决定了。2:3也是个经典的和谐比例,这样的比例使作品中的文字韵律十足,显得极为自然,让人愉悦。

    若想了解更多设计中的比例知识,请参考Kimberly Elam的Geometry of Design: Studies in Proportion and Composition一书。

    3.5.4 跳出网格的限制


    Savarese的CS(S) Monk作品大部分基于网格布局,但仍然恰到好处的让一些元素打破了网格的限制,为郑州个人做网站作品增色不少。

    无论是绝对定位还是相对定位,CSS的定位模型都能让我们游刃有余的实现这样的想法。接下来对这两种定位方式的比较分析将帮助你做出最合理、恰当的选择。


    1. 绝对定位

    理解绝对定位的前提就是理解文档流(document flow)的概念。HTML是线性的——文档中可能首先出现一个h1元素,接下来是一个p元素,随后是个div元素。虽然元素允许嵌套,但若在不应用任何样式的情况下,我们很容易就能看出HTML解释器将从头到尾按顺序解析文档中的元素,并自上向下将元素印次显示在浏览器中。

    而绝对定位则不仅可以将某元素置于页面中的任何位置之上,还能够将其从文档流中移除。绝对定位元素不会影响到文档中的其他元素,其他元素依然会以线性的方式进行布局,就像这个绝对定位元素根本不存在一样(图3-5-8)。绝对定位元素将被呈现于指定的位置,但考虑到页面中显示的其他元素,设计师一般都需要仔细斟酌,以处理元素之间可能出现的相互覆盖问题。

    在唯一一种情况下,绝对定位元素也会影响到页面中的其他元素,即当某个元素被包含在该绝对定位元素中,且同样应用了CSS定位时。CSS定位模型将认为该元素的定位是基于其包含块( ontaining block)的——大多数情况下元素的包含块都是文档的根元素htmlo但若是在定位元素与文档根元素的层次关系中还存在着另一个定位元素,则子元素的定位将改为基于其父元素进行。
若想了解更多包含块的知识,请参考CSS规范中的“10 Visual formatting model details"页面( www.w3.org/TR/REC-CSS2/vi-sudet.ht-ml#containing-block-details)。

    2.相对定位

    相对定位则不会把元素从文档流中移除,而是基于其原位置进行一定的偏移。页面中其他的元素不会占据其偏移后留下的空白空间,就像该元素仍在原位一样(图3-5-9、图3-5-10和图3-5-11)。

    若想为某元素应用一定的偏移,那么相对定位将是最好的选择:传统网格布局中的元素可以轻松地摆脱其束缚,移动到网格之外;在其他定位方案难以应用时,相对定位仍可广泛适用。例如,avarese就用相对定位将那条龙的图案从其原本位置(正文开始处)移动到了页脚的左边。用绝对定位将元素置于页面底部附近要比将其置于顶部困难得多,这时使用相对定位将会更易于实现。
【责任编辑:(Top) 返回页面顶端