布局的基本概念
多栏布局有三种基本的实现方案：固定宽度、流动、弹性。
固定宽度布局的大小不会随用户调整浏览器窗口大小而变化，一般是900到1100像素宽。其中960像素是最常见的，因为这个宽度适合所有现代显示器，容易计算等宽分栏的数量。
流动布局的大小会随用户调整浏览器窗口大小而变化。越来越多的浏览器都支持CSS媒体查询，适应各种屏幕宽度的可变固定布局正逐步取代流动布局。
弹性布局与流动布局类似，在浏览器窗口变宽时，不仅布局变宽，而且所有内容元素的大小也会变化。
固定宽度布局
为栏设定内边距和边框
防止浮动滑移的三种方法
从设定的元素宽度中减去添加的水平外边距、边框和内边距的宽度和。
在容器内部的元素上添加内边距或外边距。在栏中添加一个没有宽度的div，让它包含所欲内容元素，然后在给这个div应用边框和内边距。如果容器的上、下边框不可见，内部div的上、下外边距会叠加。要是遇到这个问题，可以只为容器设定垂直内边距。
使用CSS3的box-sizing属性切换盒子缩放方式，比如section{box-sizing:bordre-box;}。应用box-sizing属性后，给section添加边框和内边框都不会增大盒子，相反会导致内容变窄。
使用box-sizing:border-box
只要在三个浮动的栏的CSS规则中分别加上box-sizing:bordre-box声明，再给栏添加内边框就不会导致盒子的宽度变化了。IE6和IE7不支持box-sizing属性。
预防过大的元素
添加.inner img {max-width:100%;}声明，限制图片宽度不超过其父元素。
给每个栏添加overflow:hidden声明。
给所有栏的外包装元素应用word-wrap:break-word声明，浏览器会把过长的词断开显示在不同行上。
三栏-中栏流动布局
实现方法有两种，一种是在中栏改变大小是使用负外边距定位右栏，另一种是使用CSS3让栏容器具有类似表格单元的行为。
用负外边距实现三栏布局且让中栏内容区流动的核心问题，就是处理右栏的定位，并在中栏内容区大小改变时控制右栏与布局的关系。
一种解决方案是控制两个外包装容器的外边距，其中一个外包装包围所有三栏，另一个外包装只包围左栏和中栏。
用CSS3单元格实现
CSS可以把一个HTML元素的display属性设定为table、table-row和table-cell，通过这种方法可以模拟向HTML元素的行为。而通过CSS把布局中的栏设定为table-cell有三个好处。
单元格不需要浮动就可以并排显示，而且直接为它们应用内边距也不会破坏布局。
默认情况下，一行中的所有单元格高度相同，因而也不需要人造的等高栏效果了。
任何没有明确设定宽度的栏都是流动的。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
