css3中的column属性实现多列布局和瀑布流布局

在css3中有新增column属性可以实现页面的排版，使得页面更加整洁，现在一一为大家介绍用法以及属性值。

columns：用于设置元素的列宽和列数。它是column-width和column-count的简写属性。

语法：
`columns: <'column-width'> || <'column-count'>;`

column-width：用来设置列宽，取值auto和像素值，实际宽度可能会更宽或更窄以适合可用空间。
column-count：用来设置元素内容被划分成几列，取值auto和正整数。如果取值和列的宽度都非auto ，则它仅指示允许的最大列数。

这里要注意columns是column-width与column-count是这两个属性的总写，相当于同时具备两个的作用，这就相当于border与border-color/border-weight类似。

column-gap：数值 | | normal(w3c默认的数值是1em)

作用：用于设置每一列之间的间隔

这里要注意的就是这个值不要过大，否则会使得column相关的属性失效，有点类似于padding的作用，只不过是作用在每一列的内部。

column-span：数值 | | all（横跨所有列）

column-span：用于设置元素中的子元素横向跨越的列数

作用：用于设置元素中的子元素横向跨越的列数

column-rule样式属性使用

column-rule：字面意思是设置多列规则，它是一个简写属性，用于整体设置所有 column-rule-* 的规则属性，规定列之间的宽度、样式和颜色规则，此属性类似于设置边框。

column-rule: width | style | color

width：规定列之间的宽度规则，非简写：column-rule-width
- 取值：thin | medium | thick | length;
  - thin：很细
  - medium：中等
  - thick：宽厚
  - length：自定义单位值
style：规定列之间的样式规则，非简写：column-rule-style
- 取值：none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;
  - none：无规则
  - hidden：隐藏
  - dotted：点线效果
  - dashed：虚线效果
  - solid：实线效果
  - double：双线效果
  - groove：定义3D凹槽效果。该效果取决于宽度和颜色值。
  - ridge：定义3D凸起效果。该效果取决于宽度和颜色值。
  - inset：定义3D内显示效果。该效果取决于宽度和颜色值。
  - outset：定义3D外显示效果。该效果取决于宽度和颜色值。
color：规定列之间的颜色规则，非简写：column-rule-color
- 取值：color 颜色值;

column-fill样式属性使用

column-fill：规定如何填充列

语法：
column-fill: balance | auto;

balance：对列进行协调。浏览器应对列长度的差异进行最小化处理。
auto：按顺序对列进行填充，列长度会各有不同。

这里有两个小案列分别是多列布局和瀑布流布局

多列布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>column_text</title><style>* {margin: 0;padding: 0;}article {width: 800px;height: 800px;padding: 15px;columns: 380px 2;column-rule: 1px dashed red;}p {padding: 10px;background-color: #eee;text-indent: 2em;letter-spacing: 2px;}header {column-span: all;text-align: center;height: 40px;line-height: 40px;background-color: #ccc;margin-bottom: 10px;}</style>
</head><body><article><header>匆匆</header><p>燕子去了，有再来的时候；杨柳枯了，有再青的时候；桃花谢了，有再开的时 候。但是，聪明的，你告诉我，我们的日子为什么一去不复返呢？——是有人偷了他们罢：那是谁？又藏在何处呢？是他们自己逃走了罢——如今又到了哪里呢？</p><p>我不知道他们给了我多少日子，但我的手确乎是渐渐空虚了。在默默里算着，八千多日子已经从我手中溜去，像针尖上一滴水滴在大海里，我的日子滴在时间的流里，没有声音，也没有影子。我不禁头涔涔而泪潸潸了。</p><p>在逃去如飞的日子里，在千门万户的世界里的我能做些什么呢？只有徘徊罢了，只有匆匆罢了；在八千多日的匆匆里，除徘徊外，又剩些什么呢？过去的日子如轻烟，被微风吹散了，如薄雾，被初阳蒸融了；我留着些什么痕迹呢？我何曾留着像游丝样的痕迹呢？我赤裸裸来到这世界，转眼间也将赤裸裸地回去罢？但不能平的，为什么偏要白白走这一遭啊？</p><p>你聪明的，告诉我，我们的日子为什么一去不复返呢？</p></article>
</body></html>

瀑布流布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>column-img</title><style>.wrap {width: 100%;height: 100%;columns: 7.5rem 8;column-gap: 15;}.wrap div {position: relative;}p {text-align: center;position: absolute;color: white;top: 0;}img {width: 100%;}</style>
</head><body><div class="wrap"><div class="item1"><p>1</p><img src="data:image/pic1.jpg" alt=""></div><div class="item2"><p>2</p><img src="data:image/pic2.jpg" alt=""></div><div class="item3"><p>3</p><img src="data:image/pic3.jpg" alt=""></div><div class="item4"><p>4</p><img src="data:image/pic4.jpg" alt=""></div><div class="item5"><p>5</p><img src="data:image/pic5.jpg" alt=""></div><div class="item6"><p>6</p><img src="data:image/pic6.jpg" alt=""></div><div class="item7"><p>7</p><img src="data:image/pic7.jpg" alt=""></div><div class="item8"><p>8</p><img src="data:image/pic8.jpg" alt=""></div><div class="item9"><p>9</p><img src="data:image/pic9.jpg" alt=""></div><div class="item10"><p>10</p><img src="data:image/pic10.jpg" alt=""></div><div class="item11"><p>11</p><img src="data:image/pic11.jpg" alt=""></div><div class="item12"><p>12</p><img src="data:image/pic12.jpg" alt=""></div><div class="item13"><p>13</p><img src="data:image/pic13.jpg" alt=""></div><div class="item14"><p>14</p><img src="data:image/pic14.jpg" alt=""></div><div class="item15"><p>15</p><img src="data:image/pic15.jpg" alt=""></div><div class="item16"><p>16</p><img src="data:image/pic16.jpg" alt=""></div><div class="item17"><p>17</p><img src="data:image/pic17.jpg" alt=""></div><div class="item18"><p>18</p><img src="data:image/pic18.jpg" alt=""></div><div class="item19"><p>19</p><img src="data:image/pic19.jpg" alt=""></div><div class="item20"><p>20</p><img src="data:image/pic20.jpg" alt=""></div></div></body></html>

效果图如下：

css3中的column属性实现多列布局和瀑布流布局相关推荐

css中哪些属性与创建多列相关,css3中的新增属性有哪些
css3中的新增属性有哪些发布时间:2021-04-02 17:39:08 来源:亿速云阅读:90 作者:Leah 这篇文章将为大家详细讲解有关css3中的新增属性有哪些,文章内容质量较高,因此小 ...
css3中的box-sizing属性
盒子宽度.高度计算公式: css元素宽度 = width + padding + border css元素高度 = height + padding + border css3之前,当我们需要呈现一个 ...
使用IE过渡滤镜和CSS3中的RGBA属性完成背景色透明效果
关于工具: 实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性. 输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及CSS3中的rg ...
css情景动画,css3中的动画属性animation应用场景及编写代码教程
讲解一下css3中的动画属性animation应用场景及编写代码教程以下讨论的是和css3 动画属性 animation 相关的css3中的动画属性animation应用场景及编写代码教程教程文章 ...
CSS3中的animation属性实现无限循环的无缝滚动
在页面中循环展示信息的功能之前一般是用js来实现的,那么用CSS3该如何实现实现呢有时候在页面的某个模块中,需要无限循环的滚动一些消息.那么如果我们用js实现无缝衔接滚动的思路是什么呢(比如我们这个 ...
css中会计算的属性,css3中样式计算属性calc()的使用和总结
calc的介绍在css3样式中有一个类似与函数的计算属性calc(),它主要用于指定元素的长度,无论是border.margin.pading.font-size和width等属性都可以使用calc ...
css3中的scroll-behavior属性让滚动条可以平滑滚动动画
scroll-behavior属性当用户手动导航或者 CSSOM scrolling API 触发滚动操作时,CSS 属性 scroll-behavior 为一个滚动框指定滚动行为,当用户通过鼠标滑 ...
CSS3中的透明属性opacity的用法实例
实例设置 div 元素的不透明级别: div { opacity:0.5; } 完整例子: <!DOCTYPE html> <html> <head> <s ...
CSS3中的calc( )属性
作用: calc() 函数用于动态计算长度值其实,calc()这个形式看起来就很容易让人想到Javascript里的函数,当然他不是js里的函数,但是他有着类似函数的功能,可以用来计算,括号里是一个 ...

css3中的column属性实现多列布局和瀑布流布局

语法：
`columns: <'column-width'> || <'column-count'>;`

column-span：数值 | | all（横跨所有列）

column-rule样式属性使用

column-fill样式属性使用

css3中的column属性实现多列布局和瀑布流布局相关推荐

最新文章

热门文章

css3中的column属性实现多列布局和瀑布流布局

语法： columns: <'column-width'> || <'column-count'>;

column-span：数值 | | all（横跨所有列）

column-rule样式属性使用

column-fill样式属性使用

css3中的column属性实现多列布局和瀑布流布局相关推荐

最新文章

热门文章

语法：
`columns: <'column-width'> || <'column-count'>;`