您的位置：首页 > Web前端 > HTML5

HTML5权威指南笔记：21-创建布局

2017-10-27 17:58 363 查看

1 定位内容

1.1 设置定位类型

position属性的值：

static：元素为普通布局，默认值。

relative：元索位置相对于普通位置定位。

absolute：元素相对于position属性不为static的第一位祖先元素来定位。

fixed：元素相对于浏览器窗口来定位。

例子：

/*使用top 、bottom 、left和right属性设置元素的偏移量*/
top: 5px;
left: 150px;
position:relative

1.2 设置元素的层叠顺序

/*z-index属性的值是数值，且允许取负值。值越小，在层叠顺序中就越靠后*/
z-index: 1;

2 创建多列布局

多列属性：


属性	说明	值
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	指定列宽	＜长度值＞

例子：

column-count: 3;
column-fill: balance;
column-rule: medium solid black;
column-gap: 1.5em;

3 创建弹性盒布局（未得到好的支持不记录）

4 创建表格布局

跟表格布局相关的display属性的值：

table：类似table元素。

inline-table：类似table元素，但是创建一个行内元素（关于块级元素和行内元素的详细信息请参考第20章）。

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表格布局

<!DOCTYPE HTML>
<html>
<head>
<style>
/*定义表格*/
#table {
display: table;
}
/*定义行*/
div.row {
display: table-row;
background-color: lightgrey;
}
/*定义单元格*/
p {
display: table-cell;
border: thin solid black;
padding: 15px;
margin: 15px;
}
</style>
</head>
<body>
<div id="table">
<div class="row">
<p>第一行第一列</p><p>第一行第二列</p><p>第一行第三列</p>
</div>
<div class="row">
<p>第二行第一列</p><p>第二行第二列</p><p>第二行第三列</p>
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航