css多列布局 multi-column(瀑布流布局)

html-css09

css多列布局 multi-column(瀑布流布局),第1张

column-count :指定元素应该分为的列数

column-fill:指定css如何填充列

column-gap:指定列之间的差距

column-rule:对于设置所有column-rule-*属性的简写属性

column-rule-color:指定列之间的颜色规则

column-rule-style:指定列之间的样式规则

column-rule-width:指定列之间的宽度规则

column-span:指定元素应该跨越多少列

column-width:指定列的宽度

columns缩写属性设置列宽和列数

 break-inside: avoid //防止断裂

瀑布流布局,一般指根据内容高度自适应填充到某一列以使整体页面和谐,常见的有图片网站,比如每一行每一列的内容是错开的。

瀑布流布局一般是下面这个样子

css中有这么两个属性:

注意

这也是我推荐大家用第一种方法的最主要原因。

这种方案做出来的效果有点奇葩,特殊的应用场景可能会用到,最终效果是横向瀑布流

flex布局中有一个属性 flex-flow ,指明在哪个方向上在长度不够的情况想拆行,详情大家自己查阅

第一种方法其实是最合适的,也是对开发人员要求最高的,即使有思路与算法在开发过程中也会踩很多坑,比如(1)图片预加载,(2)querySelector取元素居然获取不到,(3)使用box-sizing简化计算过程降低复杂性,等等。 box-sizing 属性用好了非常高效,推荐大家去仔细看看

第二种方法其实也可行,但是不推荐

第三种方法就有点扯了,估计不常用到,大家看看就行

css设置盒子的宽就可以调节间距。使用letter-spacing属性设置字间距。使用line-height属性设置行间距,即行高。使用margin或padding属性设置段落间距或元素之间的距离。