摘要：目录概念写法兼容性概念列布局。有一个参数，并要求这个对象参数有一个名为类型为的属性。用长度值来定义列与列之间的间隙。适用于除浮动和绝对定位之外的块级元素取值不跨列横跨所有列设置元素所有列的高度是否统一。所有列的高度以其中最高的一列统一。
【01】多列属性columns
zyx456：这个属性，在浏览器的修改中，不会生效的。只有刷新页面才会有效果。
目录：
1 概念
2 写法
3 columns:column-width column-count
4 column-count
5 column-width
6 column-gap
7 column-rule
7.1 column-rule-width
7.2 column-rule-style
7.3 column-rule-color
8 column-span
9 column-fill
10 column-break-before
11 column-break-after
12 column-break-inside
13 兼容性
概念列布局。multi-column，可以让文本表现为一个仿报纸式的多栏结构。
写法//css
p {
display:inline-block;
width: 600px;
columns:30px 3;
}
//html
columns:column-width column-countTypeScript的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做"鸭式辨型法"或"结构性子类型化"。 在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。类型检查器会查看printLabel的调用。 printLabel有一个参数，并要求这个对象参数有一个名为label类型为string的属性。 需要注意的是，我们传入的对象参数实际上会包含很多属性，但是编译器只会检查那些必需的属性是否存在，并且其类型是否匹配。
复合属性。
默认值：看每个独立属性。
设置元素的列数和每列的宽度。
对应的JS特性为columns。
适用于：除table外的非替换块级元素, table cells, inline-block元素。
继承性：无
column-width
设置元素每列的宽度。
column-count
设置元素的列数。
column-count:设置元素的列数。
默认值：auto
用整数值来定义列数。不允许负值。
auto：
根据column-width自行分配宽度。
column-width:设置元素每列的宽度。
默认值：auto
用长度值来定义列宽。不允许负值。
auto：
根据column-count自行分配宽度。
column-gap:默认值：normal
设置元素的列与列之间的间隙。
用长度值来定义列与列之间的间隙。不允许负值
normal：
与font-size大小相同。假设该元素的font-size为16px，则normal值为16px，类推。
column-rule复合属性。
设置元素的列与列之间的边框。
column-rule：<" column-rule-width||column-rule-style||column-rule-color ">
默认值：看每个独立属性。
column-rule:10px solid #090;
column-rule并不会占据空间位置，看下面的例子：
p {column-rule:50px solid yellow;}
效果图：
column-rule-width设置元素的列与列之间的边框厚度。
默认值：medium
用长度值来定义边框的厚度。不允许负值
medium：
定义默认厚度的边框。
thin：
定义比默认厚度细的边框。
thick：
定义比默认厚度粗的边框。
column-rule-style设置元素的列与列之间的边框样式。
column-rule-style：none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
默认值：none
取值：
none：
无轮廓。<" column-rule-color与<" column-rule-width将被忽略。
hidden：
隐藏边框。
dotted：
点状轮廓。
dashed：
虚线轮廓。
solid：
实线轮廓
double：
双线轮廓。两条单线与其间隔的和等于指定的column-rule-width值。
groove：
3D凹槽轮廓。
ridge：
3D凸槽轮廓。
inset：
3D凹边轮廓。
outset：
3D凸边轮廓。
column-rule-color设置元素的列与列之间的边框颜色。
column-span：none | all设置元素元素是否横跨所有列。
适用于：除浮动和绝对定位之外的块级元素
取值：
none：
不跨列
all：
横跨所有列
.tesp {column-count:3;column-width:100px;}
.test p {column-span:all;}
column-fill：auto | balance设置元素所有列的高度是否统一。
默认值：auto
取值：
auto：
列高度自适应内容。
balance：
所有列的高度以其中最高的一列统一。
column-break-before设置元素之前是否断行。
column-break-before：auto | always | avoid | left | right | page | column | avoid-page | avoid-column
默认值：auto适用于：块级元素
取值：
auto：
既不强迫也不禁止在元素之前断行并产生新列
always：
总是在元素之前断行并产生新列
avoid：
避免在元素之前断行并产生新列
.test {column-count:4;column-gap:20px;}
.test div {column-break-before: always;}
//html结构
div.test>p+div+p
zyx456：就是说这个元素会另起一列。
column-break-afterauto | always | avoid | left | right | page | column | avoid-page | avoid-column
默认值：auto
适用于：块级元素
设置元素之前是否断行。
取值：
auto：
既不强迫也不禁止在元素之后断行并产生新列
always：
总是在元素之后断行并产生新列
avoid：
避免在元素之后断行并产生新列
.test {column-gap:20px;}
.test div {column-break-after:always;}
HTML结构：
div.test>p+div+p
设置元素内部是否断行。
column-break-inside：auto | avoid | avoid-page | avoid-column
默认值：auto
适用于：块级元素
取值：
auto：
既不强迫也不禁止在元素内部断行并产生新列
avoid：
避免在元素内部断行并产生新列
兼容性：加前缀-webkit-，-moz-
-moz-column-count:3; / Firefox /
-webkit-column-count:3; / Safari and Chrome /
column-count:3;
1部分支持是指不支持break-before，break-after和break-inside属性。 基于WebKit和Blink的浏览器确实具有对非标准-webkit-column-break- 属性的等效支持，以实现相同的结果（但只有auto和always值）。 Firefox不支持break- ，但支持分页（打印）上下文中的now-obsolute page-break- *属性。
2部分支持是指不支持列填充 column-fill属性。
3部分支持是指不支持属性break-before，break-after和break-inside的avoid-column，column和avoid（在列上下文中）值。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/106614.html
摘要：目录概念写法兼容性概念列布局。有一个参数，并要求这个对象参数有一个名为类型为的属性。用长度值来定义列与列之间的间隙。适用于除浮动和绝对定位之外的块级元素取值不跨列横跨所有列设置元素所有列的高度是否统一。所有列的高度以其中最高的一列统一。 【01】多列属性columns zyx456：这个属性，在浏览器的修改中，不会生效的。只有刷新页面才会有效果。 目录： 1 概念 2 写法 3 ...
瀑布流的布局自我感觉还是很吸引人的，最近又看到实现瀑布流这个做法，在这里记录下，特别的，感觉flex布局实现瀑布流还是有点懵的样子，不过现在就可以明白它的原理了 1.multi-column多列布局实现瀑布流 先简单的讲下multi-column相关的部分属性 column-count设置列数 column-gap设置列与列之间的间距 column-width设置每列的宽度 还要结合在子容器中...
瀑布流的布局自我感觉还是很吸引人的，最近又看到实现瀑布流这个做法，在这里记录下，特别的，感觉flex布局实现瀑布流还是有点懵的样子，不过现在就可以明白它的原理了 1.multi-column多列布局实现瀑布流 先简单的讲下multi-column相关的部分属性 column-count设置列数 column-gap设置列与列之间的间距 column-width设置每列的宽度 还要结合在子容器中...
摘要：网格是继之后又一非常重要的布局方法。目前，浏览器的最新版本已经开始支持它了。说在前面与的区别是一维的，是二维的。定义列随后，我们需要对列进行声明。通过扩展关键字，意味着从这个元素应该开始的位置扩展几列。 CSS Grid (CSS网格) 是继 Flexbox之后又一非常重要的布局方法。目前，Chrome Firefox Safari 浏览器的最新版本已经开始支持它了。 本篇文章，我们通...
摘要：难道是因为这个组件自带标签胡乱猜疑是解决不了问题的。为何称之为勉强版，因为从上面的也看出来了。再看数组第二个值，这便是一个完整的示例了。也希望能更加努力的学习和进步，更深的理解前端这门艺术 项目使用ElementUI，挺好用的，页面中有些地方的帮助提示通过使用组件Tooltip和el-icon-question来展示，代码如下： 本月累计收益 截图如下： sho...
阅读 1770·2021-11-25 09:43
阅读 15321·2021-09-22 15:11
阅读 2621·2019-08-30 13:19
阅读 2008·2019-08-30 12:54
阅读 1814·2019-08-29 13:06
阅读 921·2019-08-26 14:07
阅读 1611·2019-08-26 10:47
阅读 3027·2019-08-26 10:41
