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

html-css042

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

你百度:花瓣网,就是典型的瀑布流布局。

一种网页展示效果,每行有多个区块或图片,这些区块或图片不在一个水平线上对齐,然后重复重复再重复。

这个叫:瀑布流布局,不应该叫css瀑布流,因为纯css实现的浏览器支持不好,基本上都是有JS的。