《HTML5权威指南》之创建布局

1.定位内容

控制内容可以通过定位实现，下面描述定位的相关属性：

属性          说明                      值position    设置定位方法      left        为定位元素设置偏移量      长度，百分数，autorighttopbottomz-index     设置定位元素的层叠顺序     数字

1.1.设置定位类型

通过position属性可以设置元素的定位方法，这个属性的取值如下:

值               说明static          元素为普通布局，默认值relative        元素位置相对于普通位置定位absolute        元素相对于position值不为static的第一位祖先元素来定位fixed           元素相对于浏览器窗口来定位

这里说明一下，假设img元素的父元素是body元素，而且img元素的position属性设置为absolute，那么元素会随其他内容一起滚动，如果position设置fixed，那么img元素不会随内容一起滚动，相对浏览器位置固定的。

1.2.设置元素的层叠顺序

z-index属性指定元素显示的层叠顺序，下面总结这个属性：

属性              说明                          值z-index         设置元素的相对层叠顺序         <数值>

z-index的属性值是数值，且允许为负值，值越小，在层叠顺序中就越靠后，这个属性只有在元素重叠的情况下才会派上用场。
示例代码：

<style type="text/css">    img {        ...    }    #first {        z-index: 1;    }    #second {        z-index: 2;    } </style>body内结构：<img id="first" src="./first.png"></img><img id="second" src="./second.png"></img>

上面对两个id选择器设置相应的层叠顺序。

2.创建多列布局

多列布局允许在多个垂直列中布局内容，跟报纸排版类似。下面描述其属性:

属性                  说明                                              值column-count        指定列数                                           <数值>column-fill         指定内容在列与列之间的分布方式,balance确保不同列        balance                    之间的长度差异尽可能小，如果取auto值，则按照顺序填充     autocolumn-gap          指定列与列之间的距离                                 <长度值>column-rule         在一条声明中设置column-rule-*的简写属性               <宽度值><样式><颜色>column-rule-color   设置列之间的颜色规则                                 <颜色>column-rule-style   设置列之间的样式规则                                 跟border-style属性值相同column-rule-width   设置列之间的宽度                                    <长度值>columns             设置column-span和column-width的简写属性             <长度值><数值>column-span         指定元素横向能跨多少列                               None                                                                      allcolumn-width        指定列宽                                             <长度值>

示例代码：

<style type="text/css">    p {        column-count:3;        column-fill: balance;        column-rule: medium solid black;        column-gap: 1.5em;    }</style>

column-gap指的是内容与列分割线之间的距离。

示例代码：

<style type="text/css">    p {        column-width: 10em;        ...    }</style>

如果应用column-width属性，那么浏览器会通过添加或者删除列数维持特定列宽。

3.创建弹性盒布局

弹性盒布局(也称为伸缩盒)在css3中进一步增强，为display增加一个新值flexbox.

3.1.创建简单的弹性盒

可以使用display属性创建弹性盒，标准是flexbox，不过在标准完成和实现之前，必须使用-webkit-box。使用box-flex属性告诉浏览器如何分配元素之间未使用的空间。示例代码如下：

<style type="text/css">    p {        ...    }    #container {        display: -webkit-box;    }    #second {        -webkit-box-flex: 1;    }</style>

3.2.伸缩多个元素

应用box-flex属性可以告诉浏览器伸缩多个元素的尺寸，设置的值决定了浏览器分配空间的比例，示例代码如下：

<style type="text/css">    p {        ...    }    #container {        display: -webkit-box;    }    #first {        -webkit-box-flex: 3;    }    #second {        -webkit-box-flex: 1;    }</style>

上面的代码是将box-flex属性应用到id值为first的p元素，此处的box-flex的属性值为3，意思是浏览器为其分配的多余空间是为id值为second的p元素的3倍。

3.3.处理垂直空间

box-align属性告诉浏览器如何处理多余的垂直空间。这个元素的总结如下：

属性              说明                                  值box-align       指定浏览器如何处理多余的垂直空间        start                                                    end                                                    strech                                                    center

box-align属性的值说明如下：

值               说明start           元素沿容器的顶边放置，任何空空间都在其下方end             元素沿容器的底边设置，任何空间都在其上方显示center          多余的空间被平分成两部分，分别显示在元素的上方和下方strech          调整元素的高度，以填充可用空间

注意,box-align是应用到可伸缩容器上，而不是内容元素。
示例代码：

<style type="text/css">    #container {        display: -webkit-box;        -webkit-box-direction: reverse;        -webkit-box-align: end;    }</style>body内结构<div id="container">     <p>...</p>    <p>...</p></div>

上述代码中，内容元素会沿着容器底边放置，垂直方向上任何多余的元素都会显示到内容元素的上方。

3.4.处理最大尺寸

弹性盒模型伸缩时不会超过内容元素的最大尺寸值，如果存在多余空间，浏览器会伸展元素，直达达到最大允许尺寸。box-pack属性定义了在所有的可伸缩元素均达到最大尺寸的情况下，多余空间仍未分配完毕应该如何处理。
box-pack属性值的介绍：

值           说明start       元素从左边界开始放置，任何未分配的空间显示到最后一个元素的右边end         元素从右边界开始放置，任何未分配的空间显示到第一个元素的左边center      多余空间平均分配到第一个元素的左边和最后一个元素的右边justify     多余空间均匀分配到各个元素之间

示例代码：

<style type="text/css">    p {        width:50px;        max-width:250px;        border: medium double  black;        backgroud-color: lightgray;        margin: 2px;    }    #container {        display: -webkit-box;        -webkit-box-direction: reverse;        -webkit-box-align: end;        -webkit-box-pack: justify;    }</style>body内结构：<div id="container">     <p>... </p></div>

由于p元素设置了max-width属性，当浏览器的窗口调整的时候，多余空间会在各元素之间分配。