🤓
blog-article
  • Introduction
  • 面试题
    • 1. 输入url发生了什么
  • Personal Works
    • 1. 简单的Web图床
  • CSS动画笔记
    • 1.transition 属性
    • 2.transition 实例
  • css 笔记
    • 1. box-shadow 阴影
    • 2. columns 设置列宽和列数
    • 3. 伪元素after与before
  • html 笔记
    • 1. 不常用的h5标签杂记
  • webpack4
    • 1. 文档学习记录
    • 2. 加载CSS
    • 3. 加载less
    • 4. 加载sass
    • 5. 根据浏览器自动添加css前缀
    • 6. 图片文件处理
    • 7. 字体文件处理
    • 8. 引入jQuery
    • 9. 打包HTML文件
    • 10. 分离css插件
    • 11. babel简单使用
    • 12. 清理旧打包文件插件
    • 13. 拷贝静态资源
  • javascript
    • 1. js获取某年某月的天数
  • npm
    • 2. JSON.stringify()完整用法
    • 1. 入门篇
    • 2. 进阶篇
  • Node.js
    • 1. 使用koa-body中间件后ctx.request.body内容为空
    • 2. uni-app使用Node+Koa2接收上传的文件
  • SQL
    • 1. 查询
    • 2. 插入
    • 3. 修改
    • 4. 删除
    • 5. 期末复习
  • Git
    • 1. git add命令后出现another git process...问题
    • 2. 将文件从暂存区移除
  • vue-cli
    • 1. vue-cli(脚手架)引入vue.config.js文件后热更新失效,每次保存都会刷新页面
  • uni-app
    • 1. uni-app中不使用scroll-view组件,监听页面滑直底部事件
  • 设计模式
    • 创建型模式
    • 单例模式
    • 工厂模式
    • 抽象工厂模式
  • Spring boot
    • 1. 使用自定义参数注解获取 token 中User数据
  • IDEA
    • 1. 设置maven项目的默认配置
  • Linux
    • 1.常用命令
    • 2.常用基础命令2
    • 3.linux目录介绍
    • 4. vi编辑器使用
    • 5.用户管理
    • 6. 文件属性与权限操作
    • 7. 文件归档与解压缩
    • 8. gcc的基本用法
    • 9. gdb调试器的基本用法
    • 10. Makefile基本用法
  • shell
    • shell与crontab定时器的结合
    • 1. shell 变量与常见符号
    • 2. shell中的四则运算符
    • 3. 条件判断
    • 4. 输入输出
    • 5. 输出彩色的内容
    • 6. 流程控制
    • 7. 函数
  • Docker
  • 嵌入式系统给结构及原理
  • 学校课程笔记
    • 1. java EE 复习
    • 2. 马原复习论述题
    • 3. 嵌入式软件技术复习
    • 4. 嵌入式操作系统复习
    • 5. 马原选择题
    • 6. 马原辨析题
    • 7. 马原材料题
    • 8. 计网学习笔记
    • 9. 计网复习
      • 1. 第一章
Powered by GitBook
On this page
  • column-count 内容分列
  • column-fill 列填充方式
  • column-gap 列之间的差距
  • column-rule 指定列之间的规则:宽度,样式和颜色
  • column-rule-color 列之间间隔线颜色
  • column-rule-style 列之间间隔线样式
  • column-rule-width 列之间间隔线宽度
  • column-span 指定元素跨级列
  • column-width 列宽度
  • columns 指定列的宽度和数量

Was this helpful?

  1. css 笔记

2. columns 设置列宽和列数

column-count 内容分列

column-count: number|auto

  • number:列的个数

  • auto:根据column-with自动适配

html

<div class="newspaper">
“当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些.
</div>

css

.newspaper
{
    /* 分成3列 */
    column-count:3;
}

column-fill 列填充方式

column-fill: balance|auto;

  • balance:列长短平衡

  • auto:列顺序填充,他们长度可能不同

html

<div class="demo">
ABCDDD...省略一大段文字
</div>

css

.demo{
    column-fill:balance;
}

column-gap 列之间的差距

column-gap: length|normal

  • length:指定的长度

  • normal:1em

html

<div class="demo">
ABCDDD...省略一大段文字
</div>

css

.demo{
    /* 分成4列 */
    column-count:4;
    /* 列之间的间隔2em */
    column-gap:2em;
}

column-rule 指定列之间的规则:宽度,样式和颜色

column-rule: column-rule-width column-rule-style column-rule-color

  • -width:间隔宽度

  • -color:间隔的颜色

html

<div class="demo">
ABCDDD...省略一大段文字
</div>

css

.demo{
    /* 分成4列 */
    column-count:4;
    /* 列之间的间隔1em */
    column-gap:1em;
    /* 间隔线4px宽,点状.红色 */
    column-rule:4px dotted red;
}

column-rule-color 列之间间隔线颜色

column-rule-width 列之间间隔线宽度

值:thin|medium|thick|length;

  • thin:细线

  • medium:中等

  • thick:粗

  • length:指定宽度

column-span 指定元素跨级列

column-span:1|all

  • 1:跨越1列

  • all:跨越所有列

html

<div class="demo">
    <h1>标题标题标题标题标题标题标题标题...</h1>  
ABCDDD...省略一大段文字
</div>

css

.demo h1{
    /* 跨越所有列 */
    column-span:all;
}
.demo{
    /* 分成4列 */
    column-count:4;
    /* 列之间的间隔1em */
    column-gap:1em;
    /* 间隔线4px宽,点状.红色 */
    column-rule:4px dotted red;
}

column-width 列宽度

html

<div class="demo">
ABCDDD...省略一大sssssssss段文字
</div>

css

.demo{
    /* 每一列宽度100px */
    column-width:100px;
}

columns 指定列的宽度和数量

columns: column-width column-count;

html

<div class="demo">
ABCDDD...省略一大sssssssss段文字
</div>

css

/* 设置列宽度100px,列数量3 */
.demo{
    columns:100px 3;
}

/* 等价于 */
.demo{
    column-width:100px;
    column-count:3;
}
Previous1. box-shadow 阴影Next3. 伪元素after与before

Last updated 5 years ago

Was this helpful?

:间隔样式

列之间间隔线样式

-style
column-rule-style