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

最新推荐文章于 2024-11-02 14:46:26 发布

馋雪山丘

最新推荐文章于 2024-11-02 14:46:26 发布

阅读量316

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5

本文链接：https://blog.youkuaiyun.com/u011069189/article/details/78367560

HTML5 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了CSS中的三种关键布局方式：定位、多列布局及表格布局。详细解析了position属性的使用方法及其与top、bottom等偏移量属性的配合，并讲解了z-index属性的作用。此外，还探讨了多列布局的实现，包括列数、列间距、列间样式等属性设置。最后，通过示例展示了如何利用CSS创建简单的表格布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>