（2）css学习笔记---display-columns

一.display属性

内联元素又名行内元素，和其对应的是[块元素](block element)，都是html规范中的概念。内联元素的显示，为了帮助理解，可以形象的称为“文本模式”，即一个挨着一个，都在同一行按从左至右的顺序显示，不单独占一行。

1 a – 锚点
2 abbr – 缩写
3 acronym – 首字
4 b – 粗体(不推荐)
5 bdo – bidi override
6 big – 大字体
7 br – 换行
8 cite – 引用
9 code – 计算机代码(在引用源码的时候需要)
10 dfn – 定义字段
11 em – 强调
12 font – 字体设定(不推荐)
13 i– 斜体
14 img – 图片
15 input – 输入框
16 kbd – 定义键盘文本
17 label – 表格标签
18 q – 短引用
19 s – 中划线(不推荐)
20 samp – 定义范例计算机代码
21 select – 项目选择
22 small – 小字体文本
23 span – 常用内联容器，定义文本内区块
24 strike – 中划线
25 strong – 粗体强调
26 sub – 下标
27 sup – 上标
28 textarea– 多行文本输入框
29 tt – 电传文本
30 u – 下划线
31 var – 定义变量

比如，我们完全可以把内联元素加上
display:block这样的属性，让它也有每次都从新行开始的属性，即成为块元素同样我们可以把块元素加上display:inline这样的属性，让它也在一行上排列。

inline-block:既希望元素具有宽度高度特性，又具有同行特性，这个时候我们可以使用inline-block。

2.columns：一个element元素应该被划分为几列

-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;/*column-count: number|auto|initial|inherit;8*/         
column-gap: 40px; /* 列之间的间隙*/
 column-rule: 4px outset #ff00ff;  /*列之间的间隔线，有三种属性，可以拆开分别赋值*/

• column-rule-color
• column-rule-style: none|hidden|dotted|dashed|solid|double|（groove
  |ridge）|（inset|outset|）initial|inherit;
• column-rule-width: 1px;
• column-span: 1|all | initial | inherit(继承); 该element应该跨越几列
• column-width ：A length that specifies(指定) the width of the columns（指定列的宽度）