CSS

关于display属性

  1. 定义
  2. 属性值详解
    1. 常用属性值
    2. 列表相关属性值
    3. 表格相关属性值：
    4. 弹性伸缩布局相关
    5. 浏览器几乎不支持的属性值

平时用到的display属性值最多的就是block、inline-block、inline、none等，还有CSS3新加的flex伸缩布局，对于其他属性值是熟悉又陌生，于是有了这个总结。

定义

display属性用来定义建立布局时元素生成的显示框类型，在HTML中，元素默认的display属性值表现是浏览器的默认样式。
display可能的值：none | inline | block | inline-block | contents | list-item | inline-list-item | table | table-cell | table-column | table-column-group | table-footer-group | table-header-cloumn | table-row | table-row-group | table-caption | flex | inline-flex | grid | inline-grid | ruby | ruby-base| ruby-text | ruby-base-container | ruby-test-container | run in | inherit | initial | unset

属性值详解

常用属性值

  • none

使元素不显示

  • inline

使元素表现为内联元素样式，内联元素设置width和height都不起作用，设置padding和margin左右边距起作用，顶部与底部边距无效。

  • block

使元素表现为块级元素样式，块级元素默认占一行高度，总是从新行开始，宽高度和内外边距都可以设定。

  • inline-block

将元素表现为块级内联元素样式，可以设置padding/margin/width/height，但不会独占一行。

列表相关属性值

  • list-item

元素为内容生成一个块框和一个独立的列表项内联框，设置list-item属性值之后可以设置list-style将元素表现为与li一样的列表项，如：

1
2
<div class="item">item1<div>
<div class="item">item2<div>

1
2
3
4
5
6
7
8
.item{
  display: list-item;
  list-style: circle inside;
  marin: 20px;
  padding: 20px;
  color: #fff;
  background-color: #9c0033;
}

表现为:
list-item

-inline-list-item

和list-item一样，不过，它将list-sytle-position设为inside，几乎所有浏览器都不支持这个属性值。

表格相关属性值：

  • table

table属性值能让元素和它的子节点像table元素一样，使用基于表格的布局，可以轻松定义一个单元格的边界、背景等样式。

  • table-row-group

使元素作为一个或多个行的分组来显示，类似

  • table-header-group

使元素作为一个或多个行的分组来显示，类似

  • table-footer-group

使元素作为一个或多个行的分组来显示，类似

  • table-row

使元素作为一个表格行显示，类似

  • table-column-group

使元素作为一个或多个列的分组来显示，类似

  • table-column

使元素作为一个单元格列显示，类似

  • table-cell

使元素作为一个表格单元格显示，类似 和

  • table-caption

使元素作为一个表格标题显示，类似

用这些表格相关的属性值可以使用其他元素制作出表格，栅格布局等。

弹性伸缩布局相关

  • flex

将容器设置为块伸缩容器。如用伸缩布局轻松“圣杯布局”，示例如下：

1
2
3
4
5
6
7
8
9
<body>
	<header>header</header>
	<section>
		<article>article</article>
		<nav>nav</nav>
		<aside>aside</aside>
	</section>
	<footer>footer</footer>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html,body{
	height: 100%;
}
body{
	min-width: 100%;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: column wrap;
	flex-flow: column wrap;
	-webkit-justify-content: start;
	justify-content: start;
}
header,section,nav,aside,footer{
	display: block;
}
header{
	background-color: #f39800;
	min-height: 100px;
	padding: 10px 20px;
	width: 100%;
	-webkit-order: 1;
	order: 1;
}
section{
	min-width: 100%;
	margin: 20px 0;
	display: -webkit-flex;
	display: flex;
	-webkit-order: 2;
	order: 2;
	-webkit-flex: 1;
	flex: 1;
}
nav{
	background-color: #f1f1f1;
	padding: 1%;
	width: 220px;
	-webkit-order: 1;
	order: 1;
}
article{
	background-color: #F88080;
	padding: 1%;
	margin-left: 2%;
	margin-right: 2%;
	-webkit-flex: 1;
	flex: 1;
	-webkit-order: 2;
	order: 2;
}
aside{
	background-color: #09BD83;
	padding: 1%;
	width: 220px;
	-webkit-order: 3;
	order: 3;
}
footer{
	background-color: #999;
	min-height: 60px;
	padding: 1%;
	min-width: 100%;
	-webkit-order: 3;
	order: 3;
}

最终表现如下：
圣杯布局

  • inline-flex

将容器设置为内联伸缩容器。

  • box / inline-box / flexbox / inline-flexbox

旧版伸缩布局语法

浏览器几乎不支持的属性值

ruby相关属性值：

  • ruby

使元素像元素一样显示，并且根据ruby格式模型显示元素内容

  • ruby-base

使元素像一样显示

  • ruby-text

使元素像一样显示

  • ruby-base-container

使元素像一样显示

  • ruby-text-container

使元素像一样显示

ruby相关属性值不是特别常用，几乎没有遇到过，并且浏览器也几乎不支持。
  • run-in

元素会根据上下文作为块级元素或内联元素显示：

1.  如果display: run-in的box包含一个display: block的box，则元素表现为display: block
2.  如果display: run-in的box后面跟着一个display为block水平的box，那么这个应用了display: run-in的box将会变成display: inline属性，同时内容嵌入到后面的display为block的box中，否则这个display: run-in的box维持其本身的block属性。
3.  如果一个display: inline的box跟着在display: run-in的box后面，那么display: run-in的box会变成display: block的属性

不过这个属性已经不被主流浏览器支持了，所以不推荐使用。
  • contents

它本身产生一个特定的框，会被子元素的盒子模型所取代。
这个属性也只有Firefox（Gecko内核的）浏览器支持。

  • grid、inline-grid

网格布局，使用display: grid定义一个网格，然后使用grid-template-columns和grid-template-rows属性创建网格，对应的各网格单元格都有列线起始线（grid-column-start）、列线终止线（grid-column-end）和行线起始线（grid-row-start）、行线终止线（grid-row-end）。如创建一个两行两列的网格：
现在也只有IE内核的浏览器在支持grid，如下，在IE中：

1
2
3
4
5
6
<div class="wrapper">
	    <div class="cell a">A</div>
	    <div class="cell b">B</div>
	    <div class="cell c">C</div>
	    <div class="cell d">D</div>
  	</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
.wrapper{
			background-color: #f1f1f1;
			display: -ms-grid;
			display: grid;
			-ms-grid-template-columns: 100px 10px 100px;
			-ms-grid-template-rows: auto 10px auto;
			grid-template-columns: 100px 10px 100px;
			grid-template-rows: auto 10px auto;
		}
		.cell{
			background-color: #9c0033;
		    color: #fff;
		    font-size: 150%;
		    margin: 20px;
		    padding: 20px;
		    text-align: center;
		}
		.a {
		    -ms-grid-column: 1;
	        grid-column-start: 1;
		    grid-column-end: 2;
		    -ms-grid-row: 1;
	        grid-row-start: 1;
		    grid-row-end: 2;
		}
		.b {
		    -ms-grid-column: 3;
	        grid-column-start: 3;
		    grid-column-end: 4;
		    -ms-grid-row: 1;
	        grid-row-start: 1;
		    grid-row-end: 2;
		}
		.c {
	    	-ms-grid-column: 1;
	        grid-column-start: 1;
	    	grid-column-end: 2;
		    -ms-grid-row: 3;
	        grid-row-start: 3;
		    grid-row-end: 4;
		}
		.d {
		    -ms-grid-column: 3;
	        grid-column-start: 3;
		    grid-column-end: 4;
		    -ms-grid-row: 3;
	        grid-row-start: 3;
		    grid-row-end: 4;
		}


IE10、IE11支持网格布局，但暂时还不支持grid-template-columns、grid-template-rows、grid-column-start、 grid-column-end、grid-row-start、grid-row-end，他是根据-ms-grid-column来确定元素在网格中所处的位置，上面代码在IE11中表现如下：
![grid布局](http://oc9f160az.bkt.clouddn.com/WechatIMG34.jpeg)

参阅：
MDN开发者文档

分享到：微信新浪微博QQ空间腾讯微博人人网