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>