CSS提高主要内容.pptVIP

流体布局（3） 处理内容（content）内部的主内容和次要内容的宽度以及视觉隔离带 要让次要内容和导航栏同样宽：23/75×100%=31% 内容列之间隔离带宽度为3% 剩下的主内容就是66%。 流体布局（4） 流体布局在不同分辨率下的效果 弹性布局（1） 弹性布局尺寸相对于字号（不是浏览器的宽度），通过em设置宽度，保证字号增加时整个布局随之扩大，增加可阅读性。 缺点： 不能充分利用可用空间。 文本字号增大时会加大整个布局，导致水平滚动条的出现，为防止这个问题，要在主体标记上添加100%的max-width，但是部分浏览器不支持这个属性。 注意： 弹性布局的技巧就是要设置基字号，让1em大致相当于10像素。 弹性布局（2） 弹性布局比流体布局容易。 弹性布局的技巧就是要设置基字号，让1em大致相当于10像素。 大多数浏览器的默认字号是16像素，10像素相当于16像素的62.5% 弹性布局（3） 固定宽度的三列浮动布局 转变成弹性布局时只要进行换算 弹性布局（4） 弹性-流体混合布局 设置max-width，需要浏览器支持，保证了窗口的宽度不会产生水平滚动条 流体和弹性图像（1） 流体和弹性图像（2） 1：跨越大区域的图像（比如站点也没或品牌区域中的图像）可以采用背景图像（background）而不是图像元素（img