css常见的几种布局优点缺点总结

css常见的几种布局优点缺点总结！

                          页面的布局方式是页面构成的主骨架。

                           布局的目的主要是提供一种抽象，指导设计和开发人员都能够按照某种规范来简化设计和开发的过程。

1 固宽布局：

   固宽布局是一个设定了固定宽度的外包裹，里面的各个模块也是固定宽度而非百分比。

                优点：1  设计更加简单，容易制定，

                            2    不需要min-width，max-width等属性，因为有些浏览器不支持这些属性

               缺点：1   对于使用高分辨率的用户，固定宽度布局会留下很大的空白，因此会出现‘黄金比例’，‘三分定律’。综合平衡和其他的设计原则。

                            2   屏幕分辨率过小时会出现横向滚动条。

                            3.    某些情况下，可用性低。

2 液态布局（流动布局）：

  是采用相对于分辨率大小的百分比的方式自适应不同的分辨率布局。

                      优点：   1  对用户更加友好 ，能够部分自适应用户的设置。

                                      2    页面周围的空白区域在所有分辨率和浏览器下都是相同的，在视觉上更美观。

                                     3   如果设计良好，流动布局可以避免在小分辨率下出现水平滚动条。

                      缺点：  1   设计者需要在不同的分辨率下进行测试，才能看到最终的设计效果 。

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

3 弹性布局：

弹性布局能和其他两种主要布局类型（固定宽度布局和流动布局）结合使用。弹性布局是使用em 做为单位布局的。

                     优点：   1   应用恰当的弹性布局对用户十分友好。页面中所有的元素可以随着用户的偏好缩放。

                                     2   对于同时喜欢流动布局和固定宽度布局的设计师来说，弹性布局是完美的，因为在弹性布局中都能找到.

                     缺点：   1    正式因为第一个优点，这种布局会产生很大额可用性问题。需要花更多时间理解和测试，让布局适应所有用户。

                                    2   这种布局类型相对于其他两个（流动和固定宽度）更难设计；

4 栅格化布局：

栅格化布局：栅格系统英文为“grid systems”,是一种平面设计的方法和风格。运用固定的格子设计版面布局，能以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。（详情百度）

                      优点：   1  能大大的提高网页的规范性和可重用性。在栅格系统下，将页面模块的尺寸标准化，这对于大型网站的开发和维护来说，能节约不少成本；

                                         2   基于栅格进行设计，可以让整个网站各个页面的布局保持一致。这能增加页面的相似度，提升用户体验；

                                         3   对于设计师们来说，灵活的运用栅格系统，能做出很多优秀和独特的设计。

5 响应式布局：（略）

6 自适应布局：

7 瀑布流布局：