揭秘CSS(第 1 版)
9.1.1 固定布局
阅读(

概述

CSS选择器

字体和文本

盒模型

元素的定位

链接和导航

表格和表单

变换、过渡和动画

布局

基本布局类型

Web设计师注定要处理很多未知的东西,如访问者使用哪一种浏览器,访问者的显示器尺寸是多少,等等。但是,设计师面临的最大问题,可能是要针对不同的显示器尺寸来创建引人入胜的设计。

针对这个问题,提出了三种基本的布局类型,分别是固定布局、流式布局和弹性布局。那到底是选择固定布局,还是流动布局,还是弹性布局?这个问题已经困扰了网页设计师们很多年了。最后的选择往往取决于需求,应该是哪种布局更适合,而不是哪种布局更简单。

由于每种布局都有各己的优点和缺点,需要设计师综合考虑各种因素,并通过恰当的设计,充分利用不同布局的优点,来实现完美的布局。在实际应用中,常常是组合使用这几种布局,而不是单独使用某一种布局。

固定布局

固定布局,就是页面上所有元素的宽度都以像素为单位,不管设备屏幕及浏览器宽度是多少,都使用同一套尺寸进行布局,得到的布局结果也完全相同。

在早期Web刚刚兴起的时候,屏幕的分辨率相对稳定,基本都是 800 * 600 和 1024 * 768,固定宽度的布局就很合适。

由于已经知道每个元素的精确宽度,也知道所有元素的具体位置,实现起来相对容易。因此,固定布局是匹配固定像素尺寸显示器的最简单方法。

但是,固定宽度的布局对部分访问者可能造成不便。因为所有元素的宽度都是固定的,无论窗口尺寸有多大,它们的尺寸总是不变。对使用大显示器的用户,无法充分利用空间,浪费了原本可以显示更多精彩内容的空间;对使用小显示器的用户,又会导致出现水平滚动条,他们不得不把页面滚动到最右边,才能看到所有的内容,给阅读带来不便。

随着移动终端的兴起,屏幕尺寸范围越来越大,固定宽度的布局越来越无法适应灵活多变的 Web 应用。因此,固定宽度的布局经不起未来的考验,将慢慢淡出人们的视野。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验