第 21 章 创建布局
随着对分离HTML元素的语义重要性与其表现的影响的不断强调，CSS在HTML5元素布局方面的作用越来越重要。CSS3中有一些非常实用的布局特性，当然，你也可以使用CSS早期版本中的已有功能。
有两个推荐的CSS3布局模型，有待进一步成熟。第一个是模板布局，允许我们创建可包含元素的弹性布局。目前还没有浏览器实现这个模块，不过你可以通过一个jQuery插件(http://a.deveria.com/?p=236 )对这个功能进行实验。另一个新模块可以为布局创建弹性网格。
CSS3中的布局这一整块内容仍然不太稳定。弹性布局盒能提供非常出色的特性。但是标准还在不断变化中，它们只是对早期工作草案阶段标准的实现，因此只能使用浏览器厂商特定属性来演示这种布局方法。
鉴于这些新特性“过于超前”，我建议考虑使用CSS框架创建复杂的页面布局。个人推荐使用Blueprint (可从 www.blueprintcss.org 下载)。CSS框架会在CSS3布局特性成熟后为你提供需要的功能。
定位内容
控制内容最简单的方式就是通过定位，这允许你使用浏览器改变元素的布局方式。下表描述了定位属性。
定位属性
| 属性 | 说 明 | 值 |
|---|---|---|
| position | 设置定位方法 | |
left、right、top、bottom |
为定位元素设置偏移量 | <长度>、<百分数>、auto |
| z-index | 设置定位元素的层叠顺序 | 数字 |
设置定位类型
position属性设置了元素的定位方法。这个属性的可能取值列在了下表中。
position属性的值
| 值 | 说 明 |
|---|---|
| static | 元素为普通布局，默认值 |
| relative | 元素位置相对于普通位置定位 |
| absolute | 元素相对于position值不为static的第一位祖先元素来定位 |
| fixed | 元素相对于浏览器窗口来定位 |
position属性的不同值指定了元素定位所针对的不同元素。使用top、bottom、left和right属性设置元素的偏移量的时候，指的是相对于position属性指定的元素的偏移量。代码清单1演示了不同取值的效果。
代码清单1 使用position属性
<!DOCTYPE HTML>
<html>
<head>
<title>黄子涵</title>
<meta name="作者" content="黄子涵"/>
<meta name="描述" content="黄子涵是帅哥"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<style>
img {
top: 5px;
left: 150px;
border: medium double black;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<p>
煤气灯不禁影照街里一对蚯蚓，照过以俩心相亲一对小情人
<br>
沉默以拥吻抵抗一切的冰与冷，晚意借北风轻轻的飘起长长裙
</p>
<p>
多温馨 心里 风中那笑声 淌泪，尝尽了失意的我将一切都褪去
<br>
再到这风中心中竟仿似伤痕累累，然后再记忆起当晚跟你在这里
</p>
<img id="huangzihan" src="huangzihan1.jpeg" alt="huangzihan"/>
<p>
煤气灯不禁影照街里一对蚯蚓，照过以俩心相亲一对小情人
<br>
相依相拥中交出的心早已失去，失去 已破碎 不可以再追 洒泪
</p>
<p>
<button>Static</button>
<button>Relative</button>
<button>Absolute</button>
<button>Fixed</button>
</p>
<script>
var buttons = document.getElementsByTagName("BUTTON");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function(e) {
document.getElementById("huangzihan").style.position =
e.target.innerHTML;
};
}
</script>
</body>
</html>
relative值为元素应用top、bottom、left和right属性，相对于static值确定的位置重新定位元素。从图中我们可以看到，left属性和top属性的取值引起img元素向右、向下移动。
absolute值会根据position值不是static的最近的祖先元素的位置来定位元素。在这个示例中不存在这样的元素，也就是说元素是相对于body元素定位的，如下图所示。
注意一下，如果我滚动浏览器页面，img元素会跟剩余的内容一起移动。可以将这个情况跟fixed值比较一下，如下图所示。
使用fixed值，元素是相对于浏览器窗口定位的。也就是说元素始终占据同样的位置，无论剩余内容是否向上向下滚动。
设置元素的层叠顺序
z-index属性指定元素显示的层叠顺序。下表总结了这个属性。
z-index属性
属 性 | 说 明 | 值
z-index | 设置元素的相对层叠顺序 | <数值>
z-index属性的值是数值，且允许取负值。值越小，在层叠顺序中就越靠后。这个属性只有在元素重叠的情况下才会排上用场，如代码清单2所示。
代码清单2 使用z-index属性
<!DOCTYPE HTML>
<html>
<head>
<title>黄子涵</title>
<meta name="作者" content="黄子涵"/>
<meta name="描述" content="黄子涵是帅哥"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<style>
img {
top: 5px;
left: 150px;
border: medium double black;
width: 100px;
height: 100px;
position: fixed;
}
#huangzihan1 {
z-index: 1;
top: 15px;
left: 150px;
}
#huangzihan2 {
z-index: 2;
top: 25px;
left: 120px;
}
</style>
</head>
<body>
<p>
煤气灯不禁影照街里一对蚯蚓，照过以俩心相亲一对小情人
<br>
沉默以拥吻抵抗一切的冰与冷，晚意借北风轻轻的飘起长长裙
</p>
<p>
多温馨 心里 风中那笑声 淌泪，尝尽了失意的我将一切都褪去
<br>
再到这风中心中竟仿似伤痕累累，然后再记忆起当晚跟你在这里
</p>
<img id="huangzihan1" src="huangzihan1.jpeg" alt="huangzihan1"/>
<img id="huangzihan2" src="huangzihan2.jpeg" alt="huangzihan2"/>
<p>
煤气灯不禁影照街里一对蚯蚓，照过以俩心相亲一对小情人
<br>
相依相拥中交出的心早已失去，失去 已破碎 不可以再追 洒泪
</p>
</body>
</html>
在这个例子中，我创建了两个固定位置的img元素，设置了它们top和left值使两者部分图像重叠。id值为apple的img元素的z-index值（2）比id值为banana的img元素的z-index值（1）要大，因此苹果图像显示在香蕉图像上面，如下图所示。
z-index属性的默认值是0，因此浏览器默认将图像显示在p元素上面。
创建多列布局
多列特性允许在多个垂直列中布局内容，跟报纸的排版方式类似。下表描述了多列属性。
多列属性
| 属 性 | 说 明 | 值 |
|---|---|---|
column-count |
指定列数 | <数值> |
column-fill |
指定内容在列与列之间的分布方式，balance指浏览器确保不同列之间的长度差异尽可能小。如果取auto值，则按照顺序填充列 | balance、auto |
column-gap |
指定列之间的距离 | <长度值> |
column-rule |
在一条声明中设置column-rule-*的简写属性 |
<宽度值><样式><颜色> |
column-rule-color |
设置列之间的颜色规则 | <颜色> |
column-rule-style |
设置列之间的样式规则 | 跟border-style属性的值相同 |
column-rule-width |
设置列之间的宽度 | <长度值> |
| columns | 设置column-span和column-width的简写属性 | <长度值><数值> |
column-span |
指定元素横向能跨多少列 | None all |
column-width |
指定列宽 | <长度值> |
代码清单3展示了应用于HTML文档的多列布局。
代码清单3 使用多列布局
<!DOCTYPE HTML>
<html>
<head>
<title>黄子涵</title>
<meta name="作者" content="黄子涵"/>
<meta name="描述" content="黄子涵是帅哥"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<style>
p {
column-count: 3;
column-fill: balance;
column-rule: medium solid black;
column-gap: 1.5em;
}
img {
float: left;
border: medium double black;
background-color: lightgray;
padding: 2px;
margin: 2px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<p>
煤气灯不禁影照街里一对蚯蚓，照过以俩心相亲一对小情人
<br>
沉默以拥吻抵抗一切的冰与冷，晚意借北风轻轻的飘起长长裙
<br>
多温馨 心里 风中那笑声 淌泪，尝尽了失意的我将一切都褪去
<br>
<img id="huangzihan1" src="huangzihan1.jpeg" alt="huangzihan1"/>
<br>
再到这风中心中竟仿似伤痕累累，然后再记忆起当晚跟你在这里
<br>
相依相拥中交出的心早已失去，失去 已破碎 不可以再追 洒泪
<br>
<img id="huangzihan2" src="huangzihan2.jpeg" alt="huangzihan2"/>
<br>
煤气灯不禁影照街里一对蚯蚓，照过以俩心相亲一对小情人
<br>
相依相拥中交出的心早已失去，失去 已破碎 不可以再追 洒泪
</p>
</body>
</html>
在上述示例代码中，我为p元素应用了几个多列属性。p元素中混合了text元素和img元素，设置列布局之后的效果如下图所示。
从上图可以看出，p元素中的内容从一列流向另一列，跟报纸中的排版很像。在这个例子中，我为img所素应用了float属性，这样p元素中的文本内容就可以流畅地环绕在图像周围。
上面的示例中使用了
column-count属性将页面布局分为三列。如果窗口大小调整，浏览器会自行调整列宽度，从而保留布局中的列数。另一种方法是指定列宽度，如代码清单4所示。
代码清单4 设置列宽度
<!DOCTYPE HTML>
<html>
<head>
<title>黄子涵</title>
<meta name="作者" content="黄子涵"/>
<meta name="描述" content="黄子涵是帅哥"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<style>
p {
column-width: 10em;
column-count: 3;
column-fill: balance;
column-rule: medium solid black;
column-gap: 1.5em;
}
img {
float: left;
border: medium double black;
background-color: lightgray;
padding: 2px;
margin: 2px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<p>
煤气灯不禁影照街里一对蚯蚓，照过以俩心相亲一对小情人
<br>
沉默以拥吻抵抗一切的冰与冷，晚意借北风轻轻的飘起长长裙
<br>
多温馨 心里 风中那笑声 淌泪，尝尽了失意的我将一切都褪去
<br>
<img id="huangzihan1" src="huangzihan1.jpeg" alt="huangzihan1"/>
<br>
再到这风中心中竟仿似伤痕累累，然后再记忆起当晚跟你在这里
<br>
相依相拥中交出的心早已失去，失去 已破碎 不可以再追 洒泪
<br>
<img id="huangzihan2" src="huangzihan2.jpeg" alt="huangzihan2"/>
<br>
煤气灯不禁影照街里一对蚯蚓，照过以俩心相亲一对小情人
<br>
相依相拥中交出的心早已失去，失去 已破碎 不可以再追 洒泪
</p>
</body>
</html>
如果应用
column-width属性，浏览器会通过添加或者删除列数维持指定列宽，如下图所示。
创建弹性盒布局
弹性盒布局（也称为伸缩盒）在CSS3中得到了进一步增强，为display属性添加了一个新值 （flexbox），并定义了其他几个属性。使用弹性布局可以创建对浏览器窗口调整响应良好的流动界面。这是通过在包含元素之间分配容器块中未使用的空间来实现的。规范为弹性布局定义了如下新属性：
- flex-align；
- flex-direction；
- flex-order；
- flex-pack。
属性的名称和值最近刚变过，主流浏览器使用浏览器厂商特定前缀属性和值实现了这个特性的核心功能，不过是基于已有的属性名。
弹性盒布局非常实用，是CSS中新增的重要特性。使用
-webkit前缀属性展示其功能，这种解决方案并不理想，不过会让你对弹性盒的功能有个大致了解。真诚地希望弹性盒布局广泛实现和可用之后，这里的内容能让你轻松过渡到完善的标准。鉴于规范和实现之间还有差异，先让我们定义一下弹性盒要解决的问题。代码清单5展示了一个有问题的简单布局。
代码清单5 有问题的简单布局
<!DOCTYPE HTML>
<html>
<head>
<title>黄子涵</title>
<meta name="作者" content="黄子涵"/>
<meta name="描述" content="黄子涵是帅哥"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<style>
p {
float: left;
width: 150px;
border: medium double black;
background-color: lightgray;
}
</style>
</head>
<body>
<div id="huangzihan">
<p id="huangzihan1">
煤气灯不禁影照街里一对蚯蚓，照过以俩心相亲一对小情人
<br>
沉默以拥吻抵抗一切的冰与冷，晚意借北风轻轻的飘起长长裙
<br>
多温馨 心里 风中那笑声 淌泪，尝尽了失意的我将一切都褪去
</p>
<p id="huangzihan2">
再到这风中心中竟仿似伤痕累累，然后再记忆起当晚跟你在这里
<br>
相依相拥中交出的心早已失去，失去 已破碎 不可以再追 洒泪
<br>
煤气灯不禁影照街里一对蚯蚓，照过以俩心相亲一对小情人
</p>
<p id="huangzihan3">
多久了，我都没变，爱你这回事，整整六年
<br>
有一个人能去爱，多珍贵。没关系你也不用给我机会
<br>
反正我还有一生可以浪费
</p>
</div>
</body>
</html>
在上述示例代码中，div元素包含了三个p元素。我想将p元素显示在水平行中，用float属性很容易就能做到这一点。下图显示了浏览器如何显示这个HTML文档。
这里我们能使用弹性盒解决的问题是处理页面上p元素右边的空空间块。解决这个问题有多种方式。在这个例子中，可以使用百分比宽度，但弹性盒解决方案要更优雅，页面看起来流动性也会好很多。下表列出了实现弹性盒核心功能的三个
-webkit属性（简单起见，表中省略了-webkit前缀）。
webkit弹性盒属性
| 属 性 | 说 明 | 值 |
|---|---|---|
box-align |
如果内容元素的高度小于容器的高度，告诉浏览器如何处理多余的空间 | start end center baseline stretch |
box-flex |
指定元素的可伸缩性，应用于弹性盒容器内的元素 | <数值> |
box-pack |
如果可伸缩元素达到最大尺寸，告诉浏览器如何分配空间 | start end center justify |
创建简单的弹性盒
可以使用display属性创建弹性盒。标准值是flexbox，不过在标准完成和实现之前，必须使用
-webkit-box。使用box-flex属性告诉浏览器如何分配元素之间的未使用空间。display属性的新值和box-flex属性如代码清单6所示。
代码清单6 创建简单的弹性盒
<!DOCTYPE HTML>
<html>
<head>
<title>黄子涵</title>
<meta name="作者" content="黄子涵"/>
<meta name="描述" content="黄子涵是帅哥"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<style>
p {
float: left;
width: 150px;
border: medium double black;
background-color: lightgray;
margin: 2px;
}
#huangzihan {
display: -webkit-box;
}
#huangzihan2 {
-webkit-box-flex: 1;
}
</style>
</head>
<body>
<div id="huangzihan">
<p id="huangzihan1">
煤气灯不禁影照街里一对蚯蚓，照过以俩心相亲一对小情人
<br>
沉默以拥吻抵抗一切的冰与冷，晚意借北风轻轻的飘起长长裙
<br>
多温馨 心里 风中那笑声 淌泪，尝尽了失意的我将一切都褪去
</p>
<p id="huangzihan2">
再到这风中心中竟仿似伤痕累累，然后再记忆起当晚跟你在这里
<br>
相依相拥中交出的心早已失去，失去 已破碎 不可以再追 洒泪
<br>
煤气灯不禁影照街里一对蚯蚓，照过以俩心相亲一对小情人
</p>
<p id="huangzihan3">
多久了，我都没变，爱你这回事，整整六年
<br>
有一个人能去爱，多珍贵。没关系你也不用给我机会
<br>
反正我还有一生可以浪费
</p>
</div>
</body>
</html>
display属性会应用到弹性盒容器。弹性盒容器是具有多余空间，且我们想对其中的内容应用弹性布局的元素。
box-flex属性会应用到弹性盒容器内的元素，告诉浏览器当容器大小改变时哪些元素的尺寸是弹性的。在这个例子中，我选择了id值为second的p元素。
可以从下图看出浏览器如何伸缩选中元素的尺寸。
我放大了下图中的浏览器窗口，这导致div容器扩大以及第二个段落伸长，从而占据多余空间。伸缩不仅是对多余空间来说的，如果缩小浏览器窗口，可伸缩元素同样会被调整尺寸以适应空间损失，如下图所示。注意应用
box-flex属性的元素大小不变。
伸缩多个元素
应用
box-flex属性可以告诉浏览器伸缩多个元素的尺寸。你设置的值决定了浏览器分配空间的比例。代码清单7展示了前一个例子中元素样式的改变。
代码清单7 创建多个可伸缩元素
<!DOCTYPE HTML>
<html>
<head>
<title>黄子涵</title>
<meta name="作者" content="黄子涵"/>
<meta name="描述" content="黄子涵是帅哥"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<style>
p {
float: left;
width: 150px;
border: medium double black;
background-color: lightgray;
margin: 2px;
}
#huangzihan {
display: -webkit-box;
}
#huangzihan1 {
-webkit-box-flex: 3;
}
#huangzihan2 {
-webkit-box-flex: 1;
}
</style>
</head>
<body>
<div id="huangzihan">
<p id="huangzihan1">
煤气灯不禁影照街里一对蚯蚓，照过以俩心相亲一对小情人
<br>
沉默以拥吻抵抗一切的冰与冷，晚意借北风轻轻的飘起长长裙
<br>
多温馨 心里 风中那笑声 淌泪，尝尽了失意的我将一切都褪去
</p>
<p id="huangzihan2">
再到这风中心中竟仿似伤痕累累，然后再记忆起当晚跟你在这里
<br>
相依相拥中交出的心早已失去，失去 已破碎 不可以再追 洒泪
<br>
煤气灯不禁影照街里一对蚯蚓，照过以俩心相亲一对小情人
</p>
<p id="huangzihan3">
多久了，我都没变，爱你这回事，整整六年
<br>
有一个人能去爱，多珍贵。没关系你也不用给我机会
<br>
反正我还有一生可以浪费
</p>
</div>
</body>
</html>
这里将
box-flex属性应用到了id值为first的p元素。此处box-flex属性的值是3，意思是浏览器为其分配的多余空间是为id值为second的p元素的三倍。当你创建此类比例时，你指的是元素的可伸缩性。你只是使用这个比例来分配多余的空间，或者减小元素的尺寸，而不是改变它的首选尺寸。从下图可以看到这个比例是怎么应用到元素的。
处理垂直空间
box-align属性告诉浏览器如何处理多余的垂直空间。这个元素总结在下表中。
box-align属性
| 属 性 | 说 明 | 值 |
|---|---|---|
box-align |
指定浏览器如何处理多余的垂直空间 | start end strech center |
默认情况下垂直拉伸元素以填充多余的空间。下图就是这种情况，前两个p元素的尺寸是调整过的，内容下面多出了空的空间。下表展示了
box-align属性的可能取值。
box-align属性的值
| 值 | 说明 |
|---|---|
| start | 元素沿容器的顶边放置，任何空空间都在其下方显示 |
| end | 元素沿容器的底边放置，任何空空间都在其上方显示 |
| center | 多余的空间被平分为两部分，分别显示在元素的上方和下方 |
| strech | 调整元素的高度，以填充可用空间 |
代码清单8展示了元素样式变为应用
box-align属性。注意这个属性应用到可伸缩容器上, 而不是内容元素。
代码清单8 应用box-align属性
<!DOCTYPE HTML>
<html>
<head>
<title>黄子涵</title>
<meta name="作者" content="黄子涵"/>
<meta name="描述" content="黄子涵是帅哥"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<style>
p {
float: left;
width: 150px;
border: medium double black;
background-color: lightgray;
margin: 2px;
}
#huangzihan {
display: -webkit-box;
-webkit-box-direction: reverse;
-webkit-box-align: end;
}
#huangzihan1 {
-webkit-box-flex: 3;
}
#huangzihan2 {
-webkit-box-flex: 1;
}
</style>
</head>
<body>
<div id="huangzihan">
<p id="huangzihan1">
煤气灯不禁影照街里一对蚯蚓，照过以俩心相亲一对小情人
<br>
沉默以拥吻抵抗一切的冰与冷，晚意借北风轻轻的飘起长长裙
<br>
多温馨 心里 风中那笑声 淌泪，尝尽了失意的我将一切都褪去
</p>
<p id="huangzihan2">
再到这风中心中竟仿似伤痕累累，然后再记忆起当晚跟你在这里
<br>
相依相拥中交出的心早已失去，失去 已破碎 不可以再追 洒泪
<br>
煤气灯不禁影照街里一对蚯蚓，照过以俩心相亲一对小情人
</p>
<p id="huangzihan3">
多久了，我都没变，爱你这回事，整整六年
<br>
有一个人能去爱，多珍贵。没关系你也不用给我机会
<br>
反正我还有一生可以浪费
</p>
</div>
</body>
</html>
在这个例子中，我使用了end值，这代表内容元素会沿着容器元素的底边放置，垂直方向任何多余的空间都会显示到内容元素上方。这个值的呈现效果如下图所示。
处理最大尺寸
弹性盒模型伸缩时不会超过内容元素的最大尺寸值。如果存在多余空间，浏览器会伸展元素，直到达到最大允许尺寸。
box-pack属性定义了在所有的可伸缩元素均达到最大尺寸的情况下，多余空间仍未分配完毕时应该如何处理。这个属性总结在下表中。
box-pack属性
| 属 性 | 说 明 | 值 |
|---|---|---|
| box-pack | 在不能蒋多余空而分配给可伸缩元素的情况下，如何处理 | start end justify center |
下表描述了这个属性的可能值。
box-pack属性的值
| 值 | 说 明 |
|---|---|
| start | 元素从左边界开始放置，任何未分配的空间显示到最后一个元素的右边 |
| end | 元素从右边界开始放置，任何未分配的空间显示到第一个元素的左边 |
| center | 多余空间平均分配到第一个元素的左边和最后一个元素的右边 |
| justify | 多余空间均匀分配到各个元素之间 |
代码清单9展示了
box-pack属性的用法。注意，我为p元素定义了max-width值。
代码清单9 使用box-pack属性
<!DOCTYPE HTML>
<html>
<head>
<title>黄子涵</title>
<meta name="作者" content="黄子涵"/>
<meta name="描述" content="黄子涵是帅哥"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<style>
p {
float: left;
width: 150px;
max-width: 250px;
border: medium double black;
background-color: lightgray;
margin: 2px;
}
#huangzihan {
display: -webkit-box;
-webkit-box-direction: reverse;
-webkit-box-align: end;
-webkit-box-pack: justify;
}
#huangzihan1 {
-webkit-box-flex: 3;
}
#huangzihan2 {
-webkit-box-flex: 1;
}
</style>
</head>
<body>
<div id="huangzihan">
<p id="huangzihan1">
煤气灯不禁影照街里一对蚯蚓，照过以俩心相亲一对小情人
<br>
沉默以拥吻抵抗一切的冰与冷，晚意借北风轻轻的飘起长长裙
<br>
多温馨 心里 风中那笑声 淌泪，尝尽了失意的我将一切都褪去
</p>
<p id="huangzihan2">
再到这风中心中竟仿似伤痕累累，然后再记忆起当晚跟你在这里
<br>
相依相拥中交出的心早已失去，失去 已破碎 不可以再追 洒泪
<br>
煤气灯不禁影照街里一对蚯蚓，照过以俩心相亲一对小情人
</p>
<p id="huangzihan3">
多久了，我都没变，爱你这回事，整整六年
<br>
有一个人能去爱，多珍贵。没关系你也不用给我机会
<br>
反正我还有一生可以浪费
</p>
</div>
</body>
</html>
这个属性的效果如下图所示。在可伸缩p元素达到最大宽度后，浏览器开始在元素之间分配多余空间。注意，多余空间只是分配到元素与元素之间，第一个元素之前或者最后一个元素之后都没有分配。
创建表格布局
table元素广泛用于布局Web页面已有多年历史，但随着对HTML元素语义重要性的不断强调，table元素今非昔比。如果只是在HTML5中使用table元素来呈现列表数据，那么你必须慎之又慎。
当然，使用table元素如此普遍的原因是它解决了一种常见的布局问题：创建承载内容的简单网格。幸好，我们可以使用CSS表格布局特性来设置页面布局，这很像使用table元素，但不会破坏语义重要性。创建CSS表格布局使用display属性。下表列出了跟这个特性相关的值。表中的每个值都与一个HTML元素对应。
跟表格布局相关的display属性的值
| 值 | 说 明 |
|---|---|
| table | 类似table元素 |
inline-table |
类似table元素，但是创建一个行内元素 |
table-caption |
类似caption元素 |
table-column |
类似col元素 |
table-column-group |
类似colgroup元素 |
table-header-group |
类似thead元素 |
table-row-group |
类似tbody元素 |
table-footer-group |
类似tfoot元素 |
table-row |
类似tr元素 |
table-cell |
类似td元素 |
其中几个值的用法如代码清单10所示。
代码清单10 创建CSS表格布局
<!DOCTYPE HTML>
<html>
<head>
<title>黄子涵</title>
<meta name="作者" content="黄子涵"/>
<meta name="描述" content="黄子涵是帅哥"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<style>
#huangzihan {
display: table;
}
div.huang_zihan {
display: table-row;
background-color: liaghtgray;
}
p {
display: table-cell;
padding: 15px;
border: thin solid black;
margin: 15px;
}
img {
float: left;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="huangzihan">
<div class="huang_zihan">
<p>
煤气灯不禁影照街里一对蚯蚓，照过以俩心相亲一对小情人
<br>
沉默以拥吻抵抗一切的冰与冷，晚意借北风轻轻的飘起长长裙
<br>
多温馨 心里 风中那笑声 淌泪，尝尽了失意的我将一切都褪去
</p>
<p>
再到这风中心中竟仿似伤痕累累，然后再记忆起当晚跟你在这里
<br>
相依相拥中交出的心早已失去，失去 已破碎 不可以再追 洒泪
<br>
煤气灯不禁影照街里一对蚯蚓，照过以俩心相亲一对小情人
</p>
<p>
多久了，我都没变，爱你这回事，整整六年
<br>
有一个人能去爱，多珍贵。没关系你也不用给我机会
<br>
反正我还有一生可以浪费
</p>
</div>
<div class="huang_zihan">
<p>
黄子涵真棒！<img src="huangzihan1.jpeg" alt="huangzihan"/>
</p>
<p>
黄子涵真帅！<img src="huangzihan2.jpeg" alt="huangzihan2"/>
</p>
<p>
黄子涵说这里没有图片！
</p>
</div>
</div>
</body>
</html>
这些取值的效果如下图所示。
CSS表格布局的一个优点是自动调整单元格大小，因此，行是由该行中内容最高的单元格决定的，列是由该列中内容最宽的单元格决定的，这从下图中也能看出来。
