《Head First HTML与CSS》笔记——11布局与定位

前言

我们已经了解了块元素和内联元素，知道了和模型，这些都是浏览器建立页面布局的基础。现在来了解浏览器如何安排页面上的所有元素。

流

流（Flow）实际上是浏览器在页面上摆放HTML元素所用的方法。浏览器从HTML文件最上面开始，从上到下沿着元素流逐个显示所遇到的各个元素。

块元素

下面先看一下块元素。流会在每个块元素之间加一个换行：

内联元素

我们已经知道了块元素从上向下流。各元素之间有一个换行。下面来看一下内联元素。

内联元素在水平方向上会相互挨着，总体上会从左上方流向右下方：

集成

现在已经知道了块元素和内联元素如何流入页面，下面把它们集成在一起：

理解float

练习

下面我们使用布局，让下图左的网页实现下图右的改进：

流体布局

因为HTML中各个模块都放在<div>中，所以，在CSS中调整<div>对应的id样式，即可实现分栏：

这里将左侧的内容作为浮动元素，将右侧作为浮动元素同样可以实现上述页面的内容。

上述设计称为流体布局（liquid layouts），因为不论将浏览器调整到多大宽度，布局都会扩展，填满整个浏览器。不过，有时将布局锁定可能更重要，这样当用户调整屏幕大小时，设计仍能保持原样。这成为冻结布局。

冻结布局

在HTML中，把所有的<div>放在一个新的<div>中，新<div>的id为“allcontent”。然后在CSS中为“allcontent”制定规则：

这样当整个页面放大时，各模块不会跟着放大：

凝胶布局

凝胶布局时Web上一个常见的设计，这种设计介于冻结和流体之间。凝胶布局会锁定页面中内容区的宽度，不过会将它在浏览器中居中。我们只要做这个修改，就可以得到凝胶布局：

整个页面居中显示：

用绝对定位代替浮动元素

绝对定位（absolute positioning）能让内容保持正确的顺序，同时避免流体布局存在的一些问题。使用这种技术，我们不会浮动元素。

• position 属性有4个值，默认值是“static”（静态），另外还有absolute, fixed, relative三个值。

• 如果是静态定位，元素就会放在正常的文档流中，由浏览器决定这些静态定位元素放在哪里。而absolute则是由你来告诉浏览器究竟应该把元素放在什么位置。fixed定位是将元素放在相对于浏览器窗口的一个位置上（而不是相对页面），所以固定元素永远也不会移动，relative定位会让元素正常地流入页面，不过在页面上显示之前要进行偏移。

• 绝对定位不需要指定宽度，相应的，块元素会占浏览器的整个宽度（当然是减去指定距左边或右边的偏移量）。

• 在使用绝对定位时，css中还有一个属性名叫z-index（可以认为这个z轴从屏幕指向你），要这样使用这个属性：
  这时"div2"在"div1"上面。

• z-index的值可以设置为负值。

下面回到练习中：



使用固定位置

CSS表格显示

为表格显示增加HTML结构：

下面来看看如何应用在Starbuzz中：

效果：

• 如果表格显示里需要另外增加行，可以类似“tableRow” <div>，再增加一个<div>，嵌套在"tableContainer" <div>中。
• 为每个单元格增加vertical-align: top，是为了确保所有内容都与单元格上边对齐，这样看上去更专业。如果没有这样设置，你会看到浏览器中的默认对齐方式为中间对齐。
• 用width属性可以控制列的宽度。

小结