前端理论总结（css3）——页面布局方法

瀑布流

            优点：节省空间，外表美观，更有艺术性
                      对于触屏设备非常友好，通过向上滑动浏览
                      用户浏览时的观赏和思维不容易被打断，留存更容易
            缺点：用户无法了解内容总长度，对内容没有宏观掌控
                      用户无法了解现在所处的具体位置，不知道离终点还有多远
                      回溯时不容易定位到之前看到的内容
                      容易造成页面加载的负荷
                      容易造成用户浏览的疲劳，没有短暂的休息时间

盒模型

             在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border

弹性布局

             优点：应用恰当的弹性布局对用户十分友好。页面中所有的元素可以随着用户的偏好缩放
对于同时喜欢流动布局和固定宽度布局的设计师来说，弹性布局是完美的，因为在弹性布局中都能找到
             缺点：正式因为第一个优点，这种布局会产生很大额可用性问题。需要花更多时间理解和测试，让布局适应所有用户
             这种布局类型相对于其他两个（流动和固定宽度）更难设计

圣杯布局

        中间列为主内容区域，左右两列为侧边栏（父级div给 padding-left 和 padding-right 限制，让字不会被左边和右边挡住）

优点：优先展示center内容
缺点：center的最小宽度不能小于left的宽度,否则left会掉到下一行
           如果其中一列的内容高度比较长,其他两列的背景并不会自动填充

双飞翼

        中间列为主内容区域，左右两列为侧边栏（给中间的div添加一个小div，这个小div使用外边距）

优点：优先展示center内容
 缺点：center的最小宽度不能小于left的宽度,否则left会掉到下一行
            如果其中一列的内容高度比较长,其他两列的背景并不会自动填充