css学习24：创建布局
1、定位内容
控制内容最简单的方式就是通过定位，这允许你使用浏览器改变元素的布局方式。
定位属性：
| 属性 | 说明 | 值 |
|---|---|---|
| position | 设置定位方法 | 见下面表 |
| left | 为定位元素设置偏移量 | 长度 |
| right | 百分数 | |
| top | auto | |
| bottom | ||
| z-index | 设置定位元素的层叠顺序 | 数字 |
1.1 设置定位类型
position属性的值：
| 值 | 说明 |
|---|---|
| static | 元素为普通布局，默认值 |
| relative | 元素位置相对于普通位置定位 |
| absolute | 元素相对于position值不为static的第一位祖先元素来定位 |
| fixed | 元素相对于浏览器窗口来定位 |
position属性的不同值指定了元素定位所针对的不同元素。使用top、bottom、left和right属性设置元素的偏移量的时候，指的是相对于position属性指定的元素的偏移量。
1.2 设置元素的层叠顺序
z-index属性的值是数值，且允许取负值。值越小，在层叠顺序中就越靠后。这个属性只有在元素重叠的情况下才会排上用场。
2、创建多列布局
| 属性 | 说明 | 值 |
|---|---|---|
| column-count | 指定多列布局的列数 | 数值 |
| column-fill | 指定内容在列与列之间的分布方式， balance指浏览器确保不同列之间的长度差异尽可能小。如果取auto值，则按照顺序填充列 | balance，auto |
| column-gap | 指定多列布局中列与列之间的间隔 | 长度 |
| column-rule | 多列布局中定义列与列之间的规则的简写属性 | 宽度，样式，颜色 |
| column-rule-color | 设置多列布局中的颜色规则 | 颜色 |
| column-rule-style | 设置多列布局中的样式规则 | 跟border-style属性的值相同 |
| column-rule-width | 设置多列布局中的宽度规则 | 长度 |
| columns | 在多列布局中设置列数和列宽度的简写属性 | 长度值，数值 |
| column-span | 指定多列布局中元素能跨多少列 | none,all |
| column-width | 指定多列布局中列的宽度 | 长度值 |
3、创建弹性布局
弹性盒布局（也称为伸缩盒）在CSS3中得到了进一步增强，为display属性添加了一个新值( flexbox)，并定义了其他几个属性。使用弹性布局可以创建对浏览器窗口调整响应良好的流动界面。这是通过在包含元素之间分配容器块中未使用的空间来实现的。规范为弹性布局定义了如下新属性:
flex-align;
flex-direction;
flex-order;
flex-pack。
-webkit弹性盒属性：
| 属性 | 说明 | 值 |
|---|---|---|
| box-align | 如果内容元素的高度小于容器的高度，告诉浏览器如何处理多余的空间 | start,end,center,baseline,stretch |
| box-flex | 指定元素的可伸缩性，应用于弹性盒容器内的元素 | 数值 |
| box-pack | 如果可伸缩元素达到最大尺寸，告诉浏览器如何分配空间 | start,end,center,justify |
3.1 创建简单的弹性盒
可以使用display属性创建弹性盒。标准值是flexbox，不过在标准完成和实现之前，必须使用-webkit-box。使用box-flex属性告诉浏览器如何分配元素之间的未使用空间。
#container {display: -webkit-box;}#second {-webkit-box-flex: 1;}
3.2 伸缩多个元素
应用box-flex属性可以告诉浏览器伸缩多个元素的尺寸。你设置的值决定了浏览器分配空间的比例。
#container {display: -webkit-box;}#second {-webkit-box-flex: 1;}#first {-webkit-box-flex: 3;}
这里将box-flex属性应用到了id值为first的p元素。此处box-flex属性的值是3，意思是浏览器为其分配的多余空间是为id值为second的p元素的三倍。当你创建此类比例时，你指的是元素的可伸缩性。你只是使用这个比例来分配多余的空间，或者减小元素的尺寸，而不是改变它的首选尺寸。
3.3 处理垂直空间
box-align属性告诉浏览器如何处理多余的垂直空间。
值：
| 值 | 说明 |
|---|---|
| start | 元素沿容器的顶边放置,任何空空间都在其下方显示 |
| end | 元素沿容器的底边放置,任何空空间都在其上方显示 |
| center | 多余的空间被平分为两部分，分别显示在元素的上方和下方 |
| strech | 调整元素的高度，以填充可用空间 |
#container {display: -webkit-box; -webkit-box-direction: reverse; -webkit-box-align: end;}#first {-webkit-box-flex: 3;}
3.4 处理最大尺寸
弹性盒模型伸缩时不会超过内容元素的最大尺寸值。如果存在多余空间,浏览器会伸展元素,直到达到最大允许尺寸。box-pack属性定义了在所有的可伸缩元素均达到最大尺寸的情况下，多余空间仍未分配完毕时应该如何处理。
| 值 | 说明 |
|---|---|
| start | 元素从左边界开始放置，任何未分配的空间显示到最后一个元素的右边 |
| end | 元素从右边界开始放置，任何未分配的空间显示到第一个元素的左边 |
| center | 多余空间平均分配到第一个元素的左边和最后一个元素的右边 |
| justify | 多余空间均匀分配到各个元素之间 |
#container {display: -webkit-box; -webkit-box-direction: reverse; -webkit-box-align:end; -webkit-box-pack:justify;}
4、创建表格布局
table元素广泛用于布局Web页面已有多年历史，但随着对HTML元素语义重要性的不断强调，table元素今非昔比。如果只是在HTML5中使用table元素来呈现列表数据，那么你必须慎之又慎。
当然，使用table元素如此普遍的原因是它解决了一种常见的布局问题:创建承载内容的简单网格。幸好，我们可以使用CSS表格布局特性来设置页面布局，这很像使用table元素，但不会破坏语义重要性。创建CSS表格布局使用display属性。
跟表格布局相关的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元素 |
CSS表格布局的一个优点是自动调整单元格大小，因此，行是由该行中内容最高的单元格决定的，列是由该列中内容最宽的单元格决定的。
#table {display: table;}div.row {display: table-row;background-color: lightgray;}p {display: table-cell;border; thin solid black;padding: 15px;margin: 15px;}<div id="table"> <div class="row"> <p> ahaha </p> <p> ahaha </p> </div></div>