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

爱被打了一巴掌 2022-06-02 08:25 224阅读 0赞

## 一.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;  /*列之间的间隔线，有三种属性，可以拆开分别赋值*/