Web CSS布局介绍

最新推荐文章于 2024-07-18 11:31:54 发布

masonsxu

最新推荐文章于 2024-07-18 11:31:54 发布

阅读量464

点赞数 1

本文链接：https://blog.csdn.net/one_a_xiaobai/article/details/105459956

版权

Web CSS布局介绍

一、布局方式

1、固宽布局

设置了固定宽度的外包裹，里面的各个模块也是固定宽度而非百分比。重要的是容器（外包裹）元素是设置为不能移动的。一般为适应主流的分辨率，设置固定宽度为950px左右。如果小于这个宽度，则会出现滚动条。

优点
1. 设计师所设计的就是最终用户所看到的
2. 设计更加简单，并且更加容易定制
3. 在所有浏览器中宽度一样，所以不会受到图片、表单、视频和其他固定宽度内容的影响
4. 不需要min-width、max-width等属性，因为有些浏览器并不支持这些属性
5. 即使需要兼容800*600怎么小的分辨率，网页的主体内容仍然有足够的宽度易于阅读
缺点
1. 对于使用高分辨率的用户，固定宽度布局会留下很大的空白。因此出现了“黄金比例”、“三分定律”，综合平衡和其他设计原则
2. 屏幕分辨率过小时会出现横向滚动条
3. 背景图像的平铺，无缝纹理，连续的图案需要能适应更大的分辨率
4. 在某些情况下，可用性会很低

另外在考虑固定宽度布局的时候，可能会需要调查实际用户常用的分辨率。当使用固定宽度布局时，应该确保至少居中外包裹DIV以保持一种平衡（margin: 0 auto），否则，对于使用大分辨率的用户，整个页面会被藏到一边去。

2、液态布局

液态布局通常也被称作流动布局。通常采用相对于分辨率大小的百分比的方式自适应不同的分辨率

优点
1. 对用户更加友好，因为他能够部分自适应用户的设置
2. 页面周围的空白在所有分辨率和浏览器下都是相同的，在视觉上更美观
3. 如果设计良好，流动布局可以避免在小分辨率下出现水平滚动条
缺点
1. 设计者需要在不同的分辨率下进行测试，才能够看到最终的设计效果
2. 不同分辨率下的图像或者视频可能需要准备不同的对应素材
3. 在特别大的分辨率下，内容会被拉成长长的一行，变得难以阅读

液态布局设计越少依赖图片和困难的技术，就越容易被制作和维护，它能够兼容各种分辨率。使用更为简洁的代码和设计、可以更好的防止、发现和解决兼容性问题

3、弹性布局

它能够和其他两种布局类型（固定宽度和流动）结合使用。示例：https://clearleft.com/

弹性布局使用em作为单位，1px是电脑显示屏上一个无法度量的一个点，而1em是和元素本身的字体一致。em是相对单位，随用户字体大小变换而变换。参考：em和px的区别

优点
1. 应用恰当的弹性布局对用户十分友好。页面中所有元素可以随着用户的偏好缩放
2. 对于同时喜欢流动和固宽布局的设计师来说，弹性布局是完美的，因为前两种布局的优点在弹性布局中都能找到
缺点
1. 正是因为第一个优点，这种布局会产生很大的可用性问题。需要花很多的时间理解和测试，让布局适合所有用户
2. 这种布局类型相对于其他两个更难设计，它能带来某些可用性提升看起来并不值得
3. 根据布局的具体情况，一些弹性设计需要专门为IE6追加一些样式

弹性布局会同时使用固定宽度和液态布局的原则，如字体和容器大小使用em，然后巧妙地混合使用百分比和像素设置其他的布局元素

4、栅格化布局

格栅化布局是现在比较流行的一种布局方式，

1）什么是栅格化

栅格系统英文为grid system，是一种平面设计的方法与布局风格。运用固定的格子设计版面布局。能以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。

2）栅格系统的原理

一个标准的栅格系统，包括以下部分

Flowline 流线
Column 列
Gutter 槽
Margin 外边距

栅格系统中的宽度的计算原理

$W = (A * n) - i$
A：一个栅格单元的宽度

a：一个栅格的宽度

A = a + i

n：正整数

i：栅格于栅格之间的间隙

W：页面/区块的宽度

在网页设计中，我们把宽度为W的页面分割成n个网格单元a，每个单元与单元之间的间隙为i，此时我们把a + i定义为A。

它们之间的关系如下：
$W = (a * n) + (n - 1) * i$
由于：
$A = a + i$
由此可得：
$W = (A * n) - i$
最左、右两边没有边距（margin-left，margin-right）

这个公式表述了网页的布局与网页“背后”的栅格系统之间的某种关系

主要优点
1. 能大大提高网页的规范性和可重用性。在栅格系统下，将页面模块尺寸标准化，这对于大型网站的开发和维护来说，能节约不少成本
2. 基于栅格进行设计，可以让整个网站各个页面的布局保持一致。这能增加页面的相似度，提升用户体验
3. 对于设计师来说，灵活的运用格栅系统，能做出很多优秀和独特的设计

一般来说只实现宽度的栅格化，高度的栅格化由于字体的大小等的限制会出现得不偿失的情况。另外如果一味地追求将所有设计都删格化，则会立刻陷入地狱一般的黑暗中。主要涉及到一个粒度问题：任何设计都有适用范围，超出最佳适用范围，强行使用只会带来无尽的烦恼

适合栅格话的场景
1. 页面的总体宽度布局，比如两栏、三栏等布局
2. 一些固定区块的尺寸，比如广告图片的尺寸
3. 区块之间的间距，可以参考栅格系统的槽宽（Gutter）
4. 一些可以删格化的小区域，“按盒”栅格往往能简化布局上的考虑

删格化布局实例

Bootstrap 实现了删格化布局。
- 具体使用教程可在官网查看，很详细

5、响应式布局

起因
- 移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题，“如何才能在不同大小设备上呈现同样的网页？”
- 手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366*768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上都呈现出满意的效果，并不是一件容易的事。很多网站的解决办法是为不同的设备提供不同的网页，比如专门提供一个moblie版本，或者iPhone/iPad版本。但是导致维护很复杂。于是“一次设计，普遍适用”进入人们的视野。当然“响应化”本身不是目的，我们真正需要的是一种机制，它能够帮助网站根据不同的设备平台（不同屏幕大小，方向）对内容，媒体文件和布局结构进行相应的调整和优化，从而使网站在各种环境下都能为用户提供一种最优且行对统一的体验模式
提出
- 2010年，Ethan Marcotte提出了“响应式网页设计”（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并作出相应调整的网页设计。
实现关键技术
- 实现响应式设计的关键方法，允许页面宽度自动调整、利用媒体查询根据不同的宽度设置不同的样式、液态布局、自适应媒体（图片、视频等）
相关框架实现
- Bootstrap
- Fundation

6、自适应布局

自适应布局和响应式布局的目的都是为了适应不同分辨率的情况，但是具体的区别不是很明显，主要是实现技术的区别

RWD(Responsive Web Design)
- 采用CSS的Media Query技术
- 流体布局（Fluid Grids）
- 自适应的图片。视频等资源素材
AWD(Adaptive Web Design)
- CSS Media Query技术（仅针对有限几种预设的屏幕尺寸设计）
- 用JavaScript来操作HTML内容
- 在服务器端操作HTML内容（比如为移动端减少内容，为桌面端提供更多内容）

7、瀑布流布局

视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据快并附加至当前尾部。

优点
- 有效的降低了界面复杂度，节省了空间
  - 我们不再需要臃肿复杂的页码导肮链接或按钮了
- 对触屏设备来说，交互方式更符合直觉
  - 在移动应用的交互环境中，通过向上滑动进行滚屏的操作已经成为最基本的用户习惯，而且所需要的操作精准程度远远低于点击链接或按钮
- 更高的参与度
  - 以上两点所带来的交互便捷性可以使用户将注意力更多的集中在内容而不是操作上，从而让他们更乐于沉浸在探索于浏览当中
缺点
- 有限的用例
  - 无限滚动的方式只适用于某些特定类型产品当中一部分特定类型的内容。例如，在电商网站中，用户时常需要在商品列表于详情页面之间切换，这种情况下，传统的，带有页码导航的方式可以帮助用户更稳妥和准确的回到某个特定的列表页面当中
- 额外的复杂度
  - 那些用来打造无限滚动的JS库虽然自称很容易使用，但是你总会需要在自己产品中进行不同程度的定制化处理，以满足你们自己的需求；另外这些JS库在浏览器和设备兼容性等方面表现也参差不齐，你必须做好充分的测试与调整工作。
- 没有页脚
  - 如果使用了比较典型的无限滚动加载模式，这就意味着你可以和页脚说拜拜了。最好考虑一下页脚对于你的网站，特别是用户的重要性；如果其中确实有比较重要的内容或链接，那么最好换一种更传统和稳妥的方式。千万不要耍弄你的用户，当他们一次次的浏览到页面底部，看到页脚，却因为自动加载的内容突然出现而无论如何都无法点击页脚中的链接的时候，他们会变得越发愤怒。
- SEO
  - 集中在一页当中动态加载数据，与一页一页的输出相比，究竟那种方式更利于SEO，这是你必须考虑的问题。对于某些网站来说，在这方面进行冒险是很不划算的。
- 关于页面数量的映像
  - 其实站在用户的角度来看，这一点并非负面；不过，如果对于你的网站来说，通过更多的内容页面展示更多的相关信息（包括广告）是很重要的策略，那么单页无限滚动的方式对你并不适用。
前提
1. 主体是足够简单的内容、而且用户行为以消费为主，而不是生产（专业性较低）
2. 计算需求弱
3. 无法预期用户的访问设备。如果明知别人一定会用Desktop设备访问，或是使用场景本来就只有移动端，就没有必要再去做响应式了，直接针对特定尺寸设计会受到更少的限制
不适用的范畴
1. 工具平台网站，因为它们又过于复杂的用户行为。比如Google的众多手机版本应用其实都对复杂功能有做很多裁剪，而且基本不用响应式的方式来做
2. 游戏，因为计算量会比较大