css3 之 display 属性

最新推荐文章于 2024-08-28 15:18:58 发布

辛苦的码农20200609

最新推荐文章于 2024-08-28 15:18:58 发布

阅读量1.4k

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_h2bijjh2i0ab.html

版权

前端专栏收录该内容

785 篇文章 4 订阅

订阅专栏

1、定义

　　作用：设置元素如何显示

　　初始值：inline

　　应用于：所有元素

　　继承性：无

　　注：只有一个元素属于inline或是inline-block，其身上的vertical-align属性才会起作用

2、取值

　　none：隐藏元素并脱离文档流，与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间

　　inline：指定对象为内联元素；不支持设置宽、高样式；宽度取决于内容；非独占一行显示

　　block：指定对象为块元素；不设置宽度时，宽度为父元素宽度；独占一行显示；支持设置宽、高样式

　　inline-block：指定对象为内联块元素；宽度取决于内容；非独占一行显示；支持设置宽、高样式

　　list-item：指定对象为列表项目；不设置宽度时，宽度撑满一行；支持设置宽、高样式；独占一行显示

　　table：指定对象作为块元素级的表格，类同于html标签<table>

　　inline-table：指定对象作为内联元素级的表格，类同于html标签<table>

　　table-caption：指定对象作为表格标题，类同于html标签<caption>

　　table-cell：指定对象作为表格单元格，类同于html标签<td>

　　table-row：指定对象作为表格行，类同于html标签<tr>

　　table-row-group：指定对象作为表格行组，类同于html标签<tbody>

　　table-column：指定对象作为表格列，类同于html标签<col>

　　table-column-group：指定对象作为表格列组显示，类同于html标签<colgroup>

　　table-header-group：指定对象作为表格标题组，类同于html标签<thead>

　　table-footer-group：指定对象作为表格脚注组，类同于html标签<tfoot>

3、示例

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>display</title>
<style>
    body{font:14px/1.5 georgia,simsun,arial;}
    h1{margin:10px 0;font-size:20px;}
    ul{margin:0;padding:0;list-style:none;}
    .table{display:table;border-collapse:collapse;border:1px solid #ccc;}
    .table-caption{display:table-caption;margin:0;padding:0;font-size:16px;}
    .table-column-group{display:table-column-group;}
    .table-column{display:table-column;width:100px;}
    .table-row-group{display:table-row-group;}
    .table-row{display:table-row;}
    .table-row-group .table-row:hover,.table-footer-group .table-          row:hover{background:#f6f6f6;}
    .table-cell{display:table-cell;padding:0 5px;border:1px solid #ccc;}
    .table-header-group{display:table-header-group;background:#eee;font-    weight:bold;}
    .table-footer-group{display:table-footer-group;}
</style>
</head>
<body>
<h1>display构造的table小例子，IE7及以下浏览器不支持本示例</h1>
<div class="table">
	<h2 class="table-caption">花名册：</h2>
	<div class="table-column-group">
		<div class="table-column"></div>
		<div class="table-column"></div>
		<div class="table-column"></div>
	</div>
	<div class="table-header-group">
		<ul class="table-row">
			<li class="table-cell">序号</li>
			<li class="table-cell">姓名</li>
			<li class="table-cell">年龄</li>
		</ul>
	</div>
	<div class="table-footer-group">
		<ul class="table-row">
			<li class="table-cell">footer</li>
			<li class="table-cell">footer</li>
			<li class="table-cell">footer</li>
		</ul>
	</div>
	<div class="table-row-group">
		<ul class="table-row">
			<li class="table-cell">1</li>
			<li class="table-cell">John</li>
			<li class="table-cell">19</li>
		</ul>
		<ul class="table-row">
			<li class="table-cell">2</li>
			<li class="table-cell">Mark</li>
			<li class="table-cell">21</li>
		</ul>
		<ul class="table-row">
			<li class="table-cell">3</li>
			<li class="table-cell">Kate</li>
			<li class="table-cell">26</li>
		</ul>
	</div>
</div>
</body>
</html>