医院网站案例,阿里云服务器做网站,镇海区住房和建设网站,WordPress404“Multi-column”译成中文就是“多列”#xff0c;这个”Multi-column”是W3C给CSS3增加的一个多列布局模块#xff08;CSS Multi-column Layout Module#xff09;。它主要应用在文本的多列布局方面#xff0c;对于文本的多列布局我想大家并不陌生#xff0c;因为报纸和杂…“Multi-column”译成中文就是“多列”这个”Multi-column”是W3C给CSS3增加的一个多列布局模块CSS Multi-column Layout Module。它主要应用在文本的多列布局方面对于文本的多列布局我想大家并不陌生因为报纸和杂志上我们随处可见这种布局在报纸和杂志上都使用了几十年了但需要在Web页面上实现文本的多列布局正如下图所示 1. 列数和列宽column-count;column-width;columns
2. 列的间距和分列样式column-gap;column-rule-color;column-rule-style;column-rule-width;column-rule
3. 列的分栏符break-before;break-after;break-inside
4. 跨越列column-span
5. 填充列column-fill
一. column-count
作用column-count作用主要是用来描述一个Multi元素的列数
语法column-count: auto || 数字
取值说明
1. auto此值为column-count的默认值当column-count没有设置任何值时默认的值就是auto此时的栏数是根据别的参数来确定的比如说列宽width
2. 数字这里可以是任何正整数数字但不可以带有任何单位用来表示Multi元素分列的列数
HTML CSS 首先看第一种情况column-count:auto。前面也说过当column-count取值为auto时元素分栏是由其他属性决定的比如说比如这里的column-width具体我们来看代码如何实现 其实column-count值为auto时可以不要显式的设置因为其默认值就是auto所以上面的代码中大家可以尝试的把column-count:auto这个去掉看看结果不是不是一样。这里有一点需要说明的就是当只用column-width来控制显示的列数时其column-width的取值最好不要超过下面公式计算出来的值 就拿本例来说n2,font-size:14px;那么column-width的值应该是(400-14)/2193pxOpera下最好再减1个px当然如果你是中文的话也最好这样做减1-2px至于为什么我也说不清楚。;当你把column-width值大于193px时只会显示一列 上面是column-count取值为auto的使用现在一起来看其取值为具体数值时的应用基于前面的实例把列数换成三列 二. column-width
作用column-width属性是用来控制Multi元素的列宽
语法column-width: length || auto
取值说明
1. auto:此值是其默认值。如果column-width设置值为auto或者没有显式的设置值时此时Multi元素的列宽将由其他属性来决定比如前面的实例就是由column-count来决定的当然column-count的值不能为auto了不然是无效果的
2. length此值使用固定值来设置Multi元素的宽度其单位可以是px或者em但不能是负值
首先来看一个普通的例子这里所说的普通就是指元素分列的列宽不指定确定的宽度值并且其他参数都为默认值 从效果中清楚的知道给Multi元素仅设置auto是没有任何效果的因为此时的值是需要根据元素的列数来定的在这里并没有指定列数的值所以默认为1列
在上面的实例的基础上变通一下给他加上一个column-count:2 注当column-width为auto时需要配合column-count的设置才能有分列效果
总结count和width两个属性不能同时都为auto只能其中一个值为auto
特例当列的宽度大于元素容器的宽度的情况 上图效果告诉我们虽然设置的列宽大于元素容器的宽度但并不会让元素内容按列的宽度进行布局从而撑破元素容器而是会把列宽降到与元素容器宽度相等
三. columns
作用columns是把前面两个属性合并在一起使用
语法columns: column-width || column-count
取值说明olumn-width和column-count分别是指列的宽度和列数
