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

html-css012

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 //防止断裂

元素之间的边距可以使用margin来实现:

margin:top right bottom left /*分别为上右下左边距*/

这属于CSS 框模型 (Box Model)—— 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式:

围绕在元素边框的空白区域是外边距,设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位、百分数值甚至负值。

元素的内边距在边框和内容区之间,控制该区域最简单的属性是 padding 属性,可以接受长度值或百分比值,但不允许使用负值。

元素的边框是围绕元素内容和内边距的一条或多条线,可以使用 border 属性来规定元素边框的样式、宽度和颜色。

下面举个简单的例子:

在Html代码中添加两个div

<div></div><div></div>

设置css样式

div{width:250pxheight:50pxborder:2px solid #cccmargin:50px 80px}

观察效果