CSS属性分类扫描-关于列的属性

版权声明:本文为博主原创文章,若转载请注明出处且不得删改。(如有错误请提出指正,部分文章会参考其他文章,已经表明参考出处,如有侵权请联系删除) https://blog.csdn.net/qq_34902437/article/details/79254988

目的

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

综合参考

  1. MDN–CSS参考手册
  2. W3Cschool–CSS参考手册

属性一览

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

示例及代码

这里写图片描述

(你可以看到,文段被分成了三列)
<!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 的间距)

这里写图片描述

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

示例

这里写图片描述

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

示例

这里写图片描述

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

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

这里写图片描述

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

猜你喜欢

转载自blog.csdn.net/qq_34902437/article/details/79254988