浅谈CSS的display属性

最新推荐文章于 2022-02-12 23:10:05 发布

筱葭

最新推荐文章于 2022-02-12 23:10:05 发布

阅读量609

点赞数 1

分类专栏： CSS 文章标签： CSS display

本文链接：https://blog.csdn.net/zhouziyu2011/article/details/58635328

版权

CSS 专栏收录该内容

53 篇文章 1 订阅

订阅专栏

display可能的属性值：

值	描述
none	缺省值。像行内元素类型一样显示
block	块类型。默认宽度为父元素宽度，可设置宽高，换行显示
inline	行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示
inline-block	默认宽度为内容宽度，可以设置宽高，同行显示
list-item	像块类型元素一样显示，并添加样式列表标记
inherit	规定应该从父元素继承 display 属性的值
table	此元素会作为块级表格显示(类似<table>)，表格前后有换行符
inline-table	此元素会作为内联表格显示(类似<table>)，表格前后无换行符
table-row-group	此元素会作为一个或多个行的分组显示(类似<tbody>)
table-header-group	此元素会作为一个或多个行的分组显示(类似<thead>)
table-footer-group	此元素会作为一个或多个行的分组显示(类似<tfoot>)
table-row	此元素会作为一个表格行显示(类似<tr>)
table-column-group	此元素会作为一个或多个列的分组显示(类似<colgroup>)
table-column	此元素会作为一个单元格列显示(类似<col>)
table-cell	此元素会作为一个表格单元格显示(类似<td> 和<th>)
table-caption	此元素会作为一个表格标题显示(类似<caption>)

display:block、display:inline、display:inline-block等都是很常见的。

1）display:block

block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。

block元素可以设置width和height属性，即使设置了宽度，仍然是独占一行。

block元素可以设置margin和padding属性。

2）display:inline

inline元素不会独占一行，多个相邻的inline元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。

inline元素设置width和height属性无效。

inline元素的margin和padding属性，水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果；但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom不会产生边距效果。

3）display:inline-block

将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内，可以设置width和height属性，也可以设置margin和padding属性。

下面例子谈谈不是很常见的display:list-item和display:table、display:table-cell。

<!DOCTYPE html>
<html>
<head>  
    <style type="text/css">  
		#span1 {
			display:list-item;
			list-style-position:inside;
		}
		#span2 {
			display:list-item;
			list-style:square;
			list-style-position:inside;
		}
		#main { 
			display: table; 
			border-collapse: collapse;
		} 
		#row1 { 
			display: table-row; 
			border: 1px solid grey;
		} 
		#row2 { 
			display: table-row; 
			border: 1px solid grey;
		} 
		#col1 { 
			display: table-cell; 
			border: 1px solid grey;
		} 
		#col2 { 
			display: table-cell; 
			border: 1px solid grey;
		} 
    </style>  
</head>  
<body>  
	<span id="span1">first</span>
	<span id="span2">second</span>
	<div id="main"> 
		<div id="row1">
			<div id="col1">one</div> 
			<div id="col2">two</div> 
		</div> 
		<div id="row2">
			<div id="col1">three</div> 
			<div id="col2">four</div> 
		</div> 
	</div> 
</body>
</html>

注意：

设置display:list-item时，默认list-style为disc，可以设置list-style为square或circle，但一定要设置list-style-position：inside，否则list-style显示不出来。