CSS multicol教程学习笔记

  • A+
所属分类:Web前端
摘要

这是我学习教程而写的笔记,教程地址:https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout

这是我学习教程而写的笔记,教程地址:https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout

作为温习之用

column-count可以指定分成多少列。

column-width可以指定一列宽度是多少,根据浏览器大小自动生成列数。

column-gap可以设置列之间的间隔大小。

column-rule的取值和border一样,是column-rule-color,column-rule-style和column-rule-width三个属性的总和。不占用空间,看gap大小。

column-span: all属性放在要横跨页面的元素上,这样文章可以在这个元素下边继续。

防止一整块的元素被分列分成两部分,可以使用 break-inside: avoid;在元素上(老浏览器加上page-break-inside: avoid;)