网页设计CSS布局该如何进行方式比对

来源：最后更新：22-04-01 01:34:10

导读：网页设计CSS布局该如何进行方式比对，如果我们把HTML比做是人的身体的话，CSS代码我们就可以看成是穿在人身上的衣服。我们说什么是最完美的页面布局方式？这是一个已经困扰了设计者很多年的问题。CSS的主要功能被很多人误以为就是那些特殊效果的实现。实际上，它的真正核心应该在于强大的页面布局能力，而并不是实现整个网站排版的一致性或细节上。也只有当网页布局和网页内容完美接合时，才能带给用户最好的体验。

　　如果我们把HTML比做是人的身体的话，CSS代码我们就可以看成是穿在人身上的衣服。我们说什么是最完美的页面布局方式？这是一个已经困扰了设计者很多年的问题。CSS的主要功能被很多人误以为就是那些特殊效果的实现。实际上，它的真正核心应该在于强大的页面布局能力，而并不是实现整个网站排版的一致性或细节上。也只有当网页布局和网页内容完美接合时，才能带给用户最好的体验。
　　
　　1CSS布局技术概述
　　
　　CSS（CascadingStyleSheet）中文译为层叠样式表。它是一门经过标准化的WEB标准。最早是在1996年由W3C组织审核通过并推荐使用。针对于网页设计越来越趋向整体结构化，web标准也将网页拆分成了三个相对独立的部分：结构层（structure）,表现层（presentation）及行为层（behavior）。在基于标准的WEB开发中，CSS的作用就是负责控制网页的表现层。

　　2基于CSS布局的几种方式
　　
　　盒模型、流动、浮动、定位这四个概念，是最基础也是最重要的。各种布局技巧的应用都来源于此。选择怎样的布局方式主要取决于站点自身的类型和发展。在做决定之前权衡好它们的两面性，找出适合站点的方案。下面，我们就现今网页设计过程中较常用到的几种网页布局模式做个比较。
　　
　　2.1固定宽度布局
　　
　　固定布局(FixedLayout)，指最外面的包裹层(Wrapper)使用固定宽度，其内部的各个部分均使用百分比或者是固定的宽度来表示。其关键是，外面的包裹层(或称为容器)的宽度是固定不变的，所以不论访问者的浏览器是怎样的分辨率，他们所看到的网页效果都是完全相同的。固定宽度布局是层叠样式表中最早应用的布局效果之一。有一个必须要解决的问题是所设计的页面宽度到底为多少才合适？这涉及到关于现今用户使用浏览器的分辨率大小的问题，据权威组织统计，使用640×480像素的用户占3%，使用800×600像素的用户占4%，使用1024×768像素的用户占36%，而更高像素的用户占到57%。与此同时，我们了解到五大知名网站，网页设计时考虑用户的默认分辨率从800×600的主流设计三年内完全转化为1024×768。由此可知，现在主流用户的屏幕分辨率应该是1024×768或者更高。因此960像素成为了网页设计的最佳宽度。它能够非常好地展现网页的内容。960的网格系统已经成为了固定宽度布局的行业标准了。固定宽度布局的优点非常明显，由于整个布局和布局中的每块都有预设的宽度。设计人员能够根据窗口的宽度和屏幕状况，进行一些精确度量的内部元素的设计。如标语、图像、以及精确定位的文本等，这种方法非常的适用，而且容易使用。在设计方面方便定制。但是它相对于使用高分辨率的用户来说，固定宽度布局会留下很大的空白。而屏幕分辨率过小时则会出现默认的滚动条。
　　
　　2.2流式布局
　　
　　流式布局(FluidLayout)，使用百分比来设置各个部分的具体宽度，以用来适应不同的分辨率。流式布局的意思是从左到右从上到下来进行自适应。当一行不能容纳下内容时则会自动换行。正如它的名字一样，这种布局具有弹性，可以自动填充需要填充的部分。流布式局页面相对于用户来说更为友好，因为它能够自适应用户的设置。在视觉上也能更加美观。合适的技巧会使页面在大屏幕、小屏幕、PDA小屏幕上都能有良好的呈现效果。所以有人说，这种布局可以让人随心所欲的控制自己的网站。当然这种布局也是存在缺点的。如果在特别大的分辨率下，内容会被拉成长长的一行，而当浏览器窗口特别小的时候，行又会变得非常狭窄，逐行阅读变得十分困难。还有就是图像设计同标语元素设计上也会出现问题。因为在流布局中，图片需要随着它包含的元素一起伸缩以适应整体布局的扩大。
　　
　　2.3弹性布局
　　
　　我们了解了在流式布局下，如果用户浏览器窗口变宽，网页内容会变得很难阅读。如果我们想要能够随着网页元素大小的变化而变化的页面布局。如字体变小，栏长度及页面宽度都会相应减少，反之亦然。弹性布局，就能够实现。弹性布局如果用固定宽度布局转换也非常简单，只需要对度量单位进行修改即可。弹性布局（ElasticLayout），指网页宽度不固定，当你改变字体的大小，其他元素也会随之发生变化。我们的布局以字体的大小来进行参照变化的。那么这时我们就用em（字体高）而不是用像素值或百分比来定义宽度。em直接表现了字体的大小，因此如果用em表示一个包含框的宽度，当你增加字体大小时，包含框的宽度也会随之增加。这对于视力弱或有认知障碍的人尤其有用。弹性布局的效果是明显的，也受到广大设计师的欢迎。但它也是有局限性的。如果不对这种布局设置一个最小宽度，当用户缩小窗口到足够小时，会对布局产生的影响是致命的，造成布局严重错位。当然图片的随比例缩放问题，也是一个有待解决的问题。
　　
　　2.4可变固定宽度布局
　　
　　可变固定宽度布局（VaribleFixedWidthLayout又叫做分辨率布局方式）指在CSS代码中设计好关于各种浏览器类型所需要的不同尺寸，实现根据浏览器类型自动调用不同的CSS布局。这种布局方法的思想是布局能够自动变化以提供最适合用户窗口大小的布局效果。例如如果浏览器窗口足够大，那么布局可能包括产生3个固定宽度的列，如果窗口宽度小于某个特定宽度时，那么某一列将无缝地放在另一列下面，从而产生一个两列的布局。运用该布局最可靠的方法就是通过用javascript来自动评估窗口宽度，从而改变网页上所运用的CSS规则。这里指的宽度，是你正在浏览的窗口的宽度。使用这种技术，你可以将页面的某一个视图，作为默认页面，但是对于正在用大窗口访问你的站点的用户来说，你的页面会相应的放大至整个窗口。这种布局与流动式布局不同。流动式布局是当你移动浏览器时，它的尺寸在不断的重新设置，而这种布局一旦达到了一个“触发”点，布局才会改变并进而影响到内容。缺点是可能会导致一些跨平台的问题出现。
　　
　　2.5混合布局
　　
　　顾名思义就是集中各种布局方法组合起来使用，取各自之所长。可以想象，各种布局都有它的优缺点。就例如弹性布局来说，它随着元素的大小而相应发生改变。可是万一它们将东西放得太大，页面超出了浏览器窗口，那怎么办？可能这时，你就想取回一部分的控制权，于是就有了混合性布局。可以用em（字体高）定义文本的尺寸、包含框、导航区和内容块的宽度。但是却为max-width属性设置一个百分比，限制它变得过大，而造成的布局混乱。组合流式布局与弹性布局，以em设置宽度，以百分比设置最大宽度。这就是一种典型的混合式布局。这样的布局方式在极端情况下都能有较好的整体效果。所以，我们说混合布局是结合各个布局的优缺点及布局人员的需要而组合使用的一种良好的布局方式。
　　
　　3小结
　　
　　综上所述，层叠样式表运用在网页布局上的方式多种多样，而我们评价哪种布局方式好的最终目标不是针对它的各种优缺点，而是从三个相关方面来进行探讨：可读性、适应性（方便性）及未来的可维护性。对于网页设计人员来说，选择布局方式同时来源于你网站客户端的需求。只有充分考虑协调好以上各方面，才能实现网站价值的最大化，并且提高网站的竞争力。