CSS新手入门笔记整理:CSS多列布局

列数:column-count

语法

复制代码
column-count: 取值;

|---------|--------------------------|
| 属性值 | 说明 |
| auto | 列数由column-width属性决定(默认值) |
| n(正整数) | 自动划分为n列 |


列宽:column-width

语法

复制代码
column-width: 取值;

|---------|--------------------------|
| 属性值 | 说明 |
| auto | 列数由column-count属性决定(默认值) |
| 长度值 | 单位可以为px、em和百分比等 |

body会自动根据容器宽度、每列宽度、内容多少这三者来计算列数。


列间距:column-gap

语法

复制代码
column-gap: 取值;

|---------|-----------------|
| 属性值 | 说明 |
| normal | 浏览器默认长度值 |
| 长度值 | 单位可以为px、em和百分比等 |


分隔线:column-rule

语法

复制代码
column-rule: width style color;
  • column-rule-width:定义分隔线的宽度。
  • column-rule-style:定义分隔线的样式。
  • column-rule-color:定义分隔线的颜色。

跨列:column-span

语法

复制代码
column-span: 取值;

|---------|---------------|
| 属性值 | 说明 |
| none | 不跨列 |
| all | 跨所有列(跟none相反) |


相关推荐
_kerneler几秒前
cgroup :限制cpu原理
java·服务器·前端
yingyima25 分钟前
AWK 速查手册:不仅仅是文本处理,更是性能与简洁的抉择
前端
悟空瞎说25 分钟前
WebSocket 前端丢包处理实战:原理与完整代码实现
前端
秋天的一阵风27 分钟前
✨ 原来文本转换可以这么丝滑!UnifiedJS 实战指南来了
前端·github·markdown
南川琼语38 分钟前
HTTP——AJAX
前端·javascript·ajax
用户47949283569151 小时前
专升本前端毕业 1 年,从初创到大厂,我的开源项目上了 github trending,顺便聊聊做开源的收获
前端·后端·github
Ashley的成长之路1 小时前
前端性能优化实战手册·第1篇:从 Lighthouse 60 到 95 的完整路径
前端·性能优化
思码梁田1 小时前
CSS letter-spacing 属性详解:掌控字符之间的呼吸感
前端·css
大尚来也1 小时前
React Hooks全解析:告别繁琐Class组件
前端·react.js·前端框架
不简说1 小时前
JS 代码技巧 vol.2 — 20 个数组/对象/字符串/正则的实用技巧
前端·javascript·面试