1、定义

　　语法：display：none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | run-in | box | inline-box | flexbox | inline-flexbox | flex | inline-flex

　　作用：设置元素如何显示

　　初始值：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>

　

css3 之 display 属性的更多相关文章

  1. 浅谈CSS3中display属性的Flex布局

    浅谈CSS3中display属性的Flex布局   最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: fle ...

  2. 【分享】谈CSS3中display属性的flex布局

    最近在学习微信小程序(重新学习微信小程序),在设计首页布局的时候,新认识了一种布局方式display:flex .guide-top{ height: 36%; display: flex; /*fl ...

  3. 谈谈CSS3中display属性的Flex布局（弹性布局）

    最近为了微信小程序,回忆起之前有接触过的弹性布局(display:Flex) 网上摘录的原文地址:https://www.cnblogs.com/xuyuntao/articles/6391728.h ...

  4. CSS3：布局display属性的flex（弹性布局）

    CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...

  5. CSS3利用text-shadow属性实现多种效果的文字样式展现

    一.效过图展示: 已经是比较久之前学习的文字效果了.但是还是很实用很有趣的.利用CSS3提供的text-shadow属性可以给页面上的文字添加阴影效果,因此可以替换掉之前使用过的一些繁琐的图片.到目前 ...

  6. CSS3新增文本属性实现图片点击切换效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. CSS盒子模型之CSS3可伸缩框属性（Flexible Box）

    CSS盒子模型(下) 一．CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...

  8. 利用css3的text-shadow属性实现文字阴影乳白效果

    现在CSS3+html5的网页应用的越来越广泛了.很多网页中的字体同样可以用CSS3来实现炫酷的效果. 下面就介绍一下利用css3的text-shadow属性实现文字阴影乳白效果.这是在设计达人上面看 ...

  9. css display属性详解

    css display属性在对css做layout设计时非常重要,它的值有以下几种: Value Description Play it inline Default value. Displays ...

随机推荐

  1. 【xsy2274】 平均值 线段树

    题目大意:给你一个长度为$n$的序列$a$,请你求: $\sum\limits_{l=1}^{n}\sum\limits_{r=l}^{n}\dfrac{mex(a_l,a_{l+1},...,a_r ...

  2. django-suit报错解决-----from suit.apps import DjangoSuitConfig

    (py27) [root@test SimpletourDevops]# python manage.py makemigrationsTraceback (most recent call last ...

  3. Spring Cloud Eureka

    搭建服务注册中心 创建eureka-center,pom.xml如下: <?xml version="1.0" encoding="UTF-8"?> ...

  4. Android学习总结——输入法将BottomNavigationBar(底部导航栏)顶上去的问题

    在应用清单中给当前<Activity>设置: android:windowSoftInputMode="adjustPan" 关于android:windowSoftI ...

  5. Word在转PDF的过程中如何创建标签快速方便阅读（图文详解）

    不多说,直接上干货! 选择如下 成功! 欢迎大家,加入我的微信公众号:大数据躺过的坑        人工智能躺过的坑       同时,大家可以关注我的个人博客:    http://www.cnbl ...

  6. 26、redis中默认有多少个哈希槽？

    Redis 集群中内置了 16384 个哈希槽,当需要在 Redis 集群中放置一个 key-value时,redis 先对 key 使用 crc16 算法算出一个结果,然后把结果对 16384 求余 ...

  7. C#读取注册表中二进制类型的值（REG_BINARY）

    如需要读取注册表中某个键的值, 例如读取DriverDesc对应的值,一般情况下为String类型,读取代码如下: RegistryKey driverKey = Registry.LocalMach ...

  8. T-SQL 分布式查询

    --返回本地服务器中定义的链接服务器列表. EXEC sys.sp_linkedservers /* 创建或更新 SQL Server 本地实例上的登录名与远程服务器中安全帐户之间的映射. 当用户登录 ...

  9. ExecutorService——<T> Future<T> submit（Callable<T> task）

    提交一个有返回值的任务用于执行,且返回一个Future对象,用来表示行将发生的任务的结果. 如果任务执行成功的话,那么Future对象的get方法将会返回任务的执行结果T.   如果你想要立即阻塞,等 ...

  10. SpringBoot入门 (十一) 数据校验

    本文记录学习在SpringBoot中做数据校验. 一 什么是数据校验 数据校验就是在应用程序中,对输入进来得数据做语义分析判断,阻挡不符合规则得数据,放行符合规则得数据,以确保被保存得数据符合我们得数 ...