前言:
目前咱们对“inherit博客css”大约比较看重,你们都需要剖析一些“inherit博客css”的相关知识。那么小编同时在网络上网罗了一些对于“inherit博客css””的相关资讯,希望你们能喜欢,兄弟们一起来了解一下吧!css 中可以轻松地实现类似报纸上的文字多列排版效果,不需要使用其它技术(如float、flex等)。如下图:
在本章中,您将了解以下多列属性:
column-countcolumn-gapcolumn-rule-stylecolumn-rule-widthcolumn-rule-colorcolumn-rulecolumn-spancolumn-width创建多列文本
使用column-count属性指定一个元素应该分成几列,如下示例:
div { column-count: 3;}
效果:
设置列之间的间隙
使用 column-gap 属性指定列之间的间隙,如下示例:
div { column-gap: 50px;}
效果:
设置列样式
column-rule-style属性指定列之间分割线的样式,语法如下:
column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
如下示例:
div { column-rule-style: solid;}
效果:
column-rule-width 属性指定列之间的分割线宽度,如下示例:
div{column-rule-width: 10px;}
效果:
column-rule-color属性指定列之间分割线的颜色,如下示例:
div { column-rule-color: lightblue;}
效果:
使用column-rule属性设置上述所有 column-rule-* 属性的简写,如下示例:
div { column-rule: 10px solid lightblue;}指定一个元素跨越多少列
column-span属性指定一个元素应该跨越多少列,语法如下:
column-span: none|all|initial|inherit;
如下示例:
html:
<div><h2>标题</h2>文本....</div>
css:
div{ column-count: 3; column-gap: 40px; column-rule: 1px solid lightblue;}
没有使用跨列时:
如上图中标题部分显示在第一列中,如果想让标题横跨整行可以使用如下代码:
h2 { column-span: all;}
效果:
指定列宽
column-width属性为列指定最佳的宽度,内容会自动根据页面大小调整,语法如下:
column-width: auto|length|initial|inherit;
如下示例:
div{ column-width: 100px;}
效果:
columns 属性
columns 指定每列的最小宽度和最大列数,其语法如下:
columns: column-width column-count;
column-width 部分将定义每列的最小宽度,而 column-count 部分将定义最大列数。通过使用此属性,浏览器将自动分解多列布局为窄宽度的单列,无需媒体查询或其他规则。
如下示例:
div{columns: 100px 3;}
效果:
注意这里和column-width: 100px的区别,它不会根据宽度自动调整列数,且列最大为3列。
标签: #inherit博客css