TanXinNiao
commented
3 years ago 布局的基本概念
多栏布局有三种基本的实现方案：固定宽度、流动、弹性 固定宽度布局的大小不会随用户调整浏览器窗口大小而变化，一般是 900到 1100 像素宽。其中 960 像素是最常见的，因为这个宽度适合所有现代显示器，而且能 够被 16、12、10、8、6、5、4和 3整除，不仅容易计算等宽分栏的数量，而且计 算结果也能得到没有小数的像素数。
流动布局的大小会随用户调整浏览器窗口大小而变化。这种布局能够更好地适应 大屏幕，但同时也意味着放弃对页面某些方面的控制，比如随着页面宽度变化， 文本行的长度和页面元素之间的位置关系都可能变化。Amazon.com的页面采用的 就是流动中栏布局，在各栏宽度加大时通过为内容元素周围添加空白来保持内容 居中，而且现在的导航条会在布局变窄到某个宽度时收缩进一个下拉菜单中，从 而为内容腾出空间。
今天，越来越多的浏览器都支持 CSS媒体查询了。这就让基于浏览器窗口宽度提 供不同的 CSS样式成为可能。在这种形势下，适应各种屏幕宽度的可变固定布局， 正逐步取代流动布局。这种可变的固定布局能够适应最大和最小的屏幕，业界称 之为响应式设计。本书第 8章将专门介绍响应式设计相关的 CSS技术。
弹性布局与流动布局类似，在浏览器窗口变宽时，不仅布局变宽，而且所有内容 元素的大小也会变化，让人产生一种所有东西都变大了的感觉。到目前为止，我 还没见过设计得非常好的弹性布局，主要是因为它太过复杂了。本章不介绍这种 布局，而只把笔墨花在固定宽度布局和流动布局上。
布局高度与布局宽度
布局高度 多数情况下，布局中结构化元素（乃至任何元素）的高度是不必设定的。事实上， 我甚至想告诉你根本不应该给元素设定高度。除非你确实需要这样做，比如在页面 中创造一个绝对定位的元素。
为什么正常情况下都应该保持元素 height 属性的默认值 auto 不变呢？很简单，只有 这样元素才能随自己包含内容的增加而在垂直方向上扩展。这样扩展的元素会把下 方的元素向下推，而布局也能随着内容数量的增减而垂直伸缩。假如你明确设定了 元素的高度，那么超出的内容要么被剪掉，要么会跑到容器之外——取决于元素 overflow 属性的设定。
布局宽度 与高度不同，我们需要更精细地控制布局宽度，以便随着浏览器窗口宽度的合理变 化，布局能够作出适当的调整，确保文本行不会过长或过短。如果随意给元素添加 内边距、边框，或者元素本身过大，导致浮动元素的宽度超过包含元素的布局宽度， 那浮动元素就可能“躲”到其他元素下方。
三栏- -固定宽度布局
就从一个简单的居中的单栏固定布局开始吧
<div id="wrapper">
<article>
<! -- 这里是一些文本元素 -->
</article>
</div>布局相关的 CSS如下：
#wrapper {width:960px; margin:0 auto; border:1px solid;}
article {background:#ffed53;}通过给整个外包装设定宽度值，并将其水平外边距设定为 auto ，这 个单栏布局在页面上居中了。随着向里添加内容，这一栏的高度会相应增加。外包 装中的 article 元素本质上就是一个没有宽度的块级盒子（关于“没有宽度的盒子”， 请参见 3.2 节），它水平扩展填满了外包装。下面，我们再向外包装里添加一个导航 元素，让它作为第二栏。
<div id="wrapper">
<nav>
<!-- 无序列表 -->
</nav>
<article>
<! -- 文本 -->
</article>
</div>我们得浮动作为两栏的容器元素，让它们并排显示
#wrapper {width:960px; margin:0 auto; border:1px solid;}
nav {
width:150px;
float:left;
}
nav li {
/*去掉列表项目符号*/
list-style-type:none;
}
article {
width:810px;
float:left;
width:810px;
float:left;
background:#ffed53;
}把两栏容器元素的总宽度设定为外包装的宽度（150 + 810 = 960）， 并浮动它们，就可以创造出并肩排列的两栏来。每一栏的长度取决于内容多少。采 用同样的方法，可以添加第三栏（或任意多个栏）。
<div id="wrapper">
<nav>
<!-- 无序列表 -->
</nav>
<article>
<! -- 文本 -->
</article>
<aside>
<! -- 文本 -->
</aside>
</div>
#wrapper {width:960px; margin:0 auto; border:1px solid;}
nav {
width:150px;
float:left;
background:#dcd9c0;
}
nav li {
list-style-type:none;
}
article {
width:600px;
float:left;
background:#ffed53;
}
aside {
width:210px;
float:left;
background:#3f7ccf;
width:210px;
float:left;
background:#3f7ccf;
}通过把三个浮动容器的总宽度设定为恰好等于外包装的宽度（150 + 600 + 210 = 960），就有了三栏布局的框架。就用这种办法，我可以想加多少栏就加 多少栏，只要它们的总宽度等于外包装的宽度即可。当然，多栏布局通常都有与布 局同宽的页眉和页脚，下面我们就来添加。
<div id="wrapper">
<header>
<!-- 标题 -->
</header>
<nav>
<!-- 无序列表 -->
</nav>
<article>
<! -- 文本 -->
</article>
<aside>
<! -- 文本 -->
</aside>
<footer>
<!-- 文本 -->
</footer>
</div>此时的页眉与布局同宽，其内容高度也比较合适。但是，页脚位于浮动元素后面，
所以就会尽量往上移动。解决这个问题也很简单
footer {clear:both;}
这一章会介绍实现多栏布局的几种方法。主要介绍“用内部 DIV创建浮动的栏”，这 是多年来一直被业界用于创建多栏布局的经典技术。另外，随着支持 CSS3 的浏览器 比例越来越高，一些新的布局技术也可以用在大型站点中了，本章当然不会忽略这 部分内容。今天，我们不仅可以使用 box-sizing 属性代替内部 DIV，也可以使用让 元素行为跟表格一样的 CSS3 的 display 属性（却不必向 HTML 中添加表格）。 因此， 创建流动的全长栏也变得简单多了。