您现在的位置:首页 >> 前端 >> 内容

CSS属性分类扫描之关于列的CSS相关属性介绍

时间:2018/2/5 14:58:42 点击:

  核心提示:目的本博文旨在总结CSS的属性,对CSS属性进行分类的讲解,以便更好的记忆CSS,可以在学习工作中快速地运用。本博文并未全部列举所有属性,旨在作为一个指导,并不会特别详细的讲解每个属性的用法,一些未被...

目的

本博文旨在总结CSS的属性,对CSS属性进行分类的讲解,以便更好的记忆CSS,可以在学习工作中快速地运用。
本博文并未全部列举所有属性,旨在作为一个指导,并不会特别详细的讲解每个属性的用法,一些未被浏览器采用的属性也不会介绍。

综合参考

MDN–CSS参考手册 W3Cschool–CSS参考手册

属性一览

属性 定义 属性值
column-count 规定多列 number

示例及代码

CSS属性分类扫描之关于列的CSS相关属性介绍

(你可以看到,文段被分成了三列)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        p{
            -moz-column-count:3; /* Firefox */
            -webkit-column-count:3; /* Safari 和 Chrome */
            column-count:3;
        }
    </style>
</head>
<body>
    <p class="p1">这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字</p>
</body>
</html>
属性 定义 属性值
column-gap 规定列间距 length

示例(设置了 40px 的间距)

CSS属性分类扫描之关于列的CSS相关属性介绍

属性 定义 属性值
column-rule-width 规定列边框的宽度 thin;thick;medium;length
column-rule-style 规定列边框的样式 和 border-style 一样
column-rule-color 规定列边框的颜色 color
column-rule 是以上三个的简写 width style color

示例

CSS属性分类扫描之关于列的CSS相关属性介绍

属性 定义 属性值
column-span 让处于 column-count 中的元素可以实现横跨 1;all

示例

CSS属性分类扫描之关于列的CSS相关属性介绍

属性 定义 属性值
column-width 用于规定列的宽度 length
columns 规定了列的宽度和列数 column-width column-count

示例(宽度为 100px 列数为 5)

CSS属性分类扫描之关于列的CSS相关属性介绍

至此关于列的 CSS 相关属性就介绍完了。

Tags:CS SS S属 属性 
作者:网络 来源:学亦有道 博客