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

来源：互联网发布：淘宝停留时间怎么看编辑：程序博客网时间：2024/06/05 02:06

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>

阅读全文

0 0