CSS中常见布局介绍.doc

开篇 内容决定形式，不同的应用场景需要不同的展现形式。布局最终的目的是为了让内容能够更加灵活和便捷的呈现在最终用户的眼前。 用户只关心他是否能从不同的设备上能够访问到你的内容，而不会关心你通过使用什么技术手段能够达到这种效果。 布局的目的 页面的布局方式是页面构成的主骨架 以下针对一些常见的布局方式进行描述： 固宽布局 固宽布局比较简单，这种布局有一个设置了固定宽度的外包裹里面的各个模块也是固定宽度而非百分比。重要的是容器（外包裹）元素是设置为不能移动的，它为固定宽度为980px。 上图展示的是一个固定宽度布局的基本轮廓在所有浏览器中宽度一样，所以不会受到图片、表单、视频和其他固定宽度内容的min-width、max-width等属性，因为有些浏览器并不支持这些属性 即使需要兼容800×600这么小的分辨率，网页的主体内容仍然有足够的宽度易于阅读对于使用高分辨率的用户，固定宽度布局会留下很大的空白。因此出现了“黄金比例”，“三分定律”，综合平衡和其他设计原则屏幕分辨率过小时无缝纹理，连续的图案需要适应更大的分辨率W3School调查的一个结果： 当使用固定宽度布局时，应该确保至少居中外包裹DIV以保持一种平衡（margin:0 auto）否则，对于使用大分辨率的用户，整个页面会被藏到一边去。 上图是一个简单流动（流体）布局的轮廓。有些设计师可能给流动布局中某些元素设置了固定宽度，比如margin，只要主体元素是百分比宽度，就可以让布局自适应适应各种分辨率。禅意花园就是采用液态布局： 1440*900 800*600 优点： 对用户更加友好，因为它能够部分自适应用户的设置 页面周围的空白区域在所有分辨率和浏览器下都是相同的，在视觉上更美观 如果设计良好，流动布局可以避免在小分辨率下出现水平滚动条 设计者需要在不同的分辨率下进行测试，才能够看到最终的设计效果 不同分辨率下图像或者视频可能需要准备不同的对应的素材。 在特别大的分辨率下，内容会被拉成长长的一行，变得难以阅读设计越少依赖图片和困难的技术，就越容易被制作和维护。它将能够兼容各种分辨率。使用更为简洁的代码和设计，可以更好的防止、发现和解决兼容性问题。弹性布局能和其他两种主要布局类型（固定宽度和流动）结合使用就采用的是弹性布局。 弹性布局使用em作为单位。1px是电脑显示屏上一个无法度量的一个点，而1em是和元素本身的字体一致。em是相对单位，随用户字体大小变化而改变px和em的区别 优点应用恰当的弹性布局对用户十分友好。页面中所有元素可以随着用户的偏好缩放。 对于同时喜欢流动和定宽布局的设计师来说，弹性布局是完美的，因为前两种布局的优点在弹性布局中都能找到。 缺点正是因为第一个优点，这种布局会产生的可用性问题。需要花更多时间理解和测试，让布局适合所有用户。 这种布局类型相对于其他两个更难，它能带来的可用性提升看起来并不值得。 根据布局的具体情况，一些弹性设计需要专门为IE6追加一些样式。弹性布局会同时拥有布局的优点。设计师经常使用弹性布局的原则，字体和容器大小使用em，然后巧妙地混合使用百分比和像素设置的布局元素。 淘宝TED上有一个系列介绍文章。 注：下面所描述的都是固宽情况 什么是栅格化 栅格系统英文为“grid systems”，是一种平面设计的方法与风格。运用固定的格子设计版面布局 栅格系统的原理 下面介绍栅格系统中的宽度是如何计算出来的： 在网页设计中，我们把宽度为“W”的页面分割成n个网格单元“a”，每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如下：W =a*n）+（n-1I，由于a+i=A，可得：(A×n) – i = W这个公式表述了网页的布局与网页“背后”的栅格系统之间的某种关系。yahoo为例，来看一下栅格系统的应用： yahoo的网站页面宽度为W=950px，每个区块与区块的间隔为i=10px；如果应用上面的公式，可以推出A=40px，yahoo首页横向版式设计采用的栅格系统为：（40×n）- 10 = W下面列出当n等于不同数值时W变化的数值表格： 从表格可以看出：yahoo首页的布局是按照栅格系统进行设计的，每个区块的宽度对应的n值分别为：4，11，9。在这里看到一个很有意思的事情：只要保证一个横向维度的各个区块的n值相加等于24，则即可保证页面的宽度一定是950px。然而，950px的宽度也恰好就是当n=24的时候，W的宽度值。由此得出以下的应用模式： 设计师根据需要制定不同的版式或者划分区块，他们的依据将是上面的对应表进行设计 16*60 栅格化的优点以及应用场景 主要优点： 能大大提高网页的规范性。在栅格系统下，将页面模块的尺寸标准化这对于大型网站的开发和维护来