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. 提取PPT中的原始图片

    写Word的不如做Excel 的,做Excel不如做PPT的,写代码的不如做PPT. 为了在电子邮件中上传PPT,其中的图片大都经过压缩,以便缩小PPT的体积.那么如何将PPT中的图片,还原成没有经过 ...

  2. Java DB访问（一） JDBC

    项目说明 项目采用 maven 组织 ,jdbc 唯一的依赖就是 mysql-connector-java pom 依赖如下: <dependency> <groupId>my ...

  3. Spark集群测试

    1. Spark Shell测试 Spark Shell是一个特别适合快速开发Spark原型程序的工具,可以帮助我们熟悉Scala语言.即使你对Scala不熟悉,仍然可以使用这一工具.Spark Sh ...

  4. ADO.NET 4.5中的异步与流特性

    .NET 4.5为仍在选择直接与DataReader系列类打交道的.NET开发人员带来了一些新的异步与流特性支持.SqlDataReader允许开发人员在减少一些便利性的基础上获得更好的性能.例如,该 ...

  5. Sharding-jdbc（一）分库分表理解

    1.什么是分库分表 所谓的分库分表就是数据的分片(Sharding). 2.为什么需要分库分表 因为随着公司的业务越来越大,对于现成单机单个应用瓶颈问题,对数据持久化硬盘如何进行扩容. 可以从4个方面 ...

  6. Django开发密码管理表实例【附源码】

    文章及代码比较基础,适合初.中级人员,高手略过 阅读此篇文章你可以: 获取一个Django实现增删改查的案例源码 了解数据加密的使用场景和方法以及如何在Python3中使用 背景介绍 DBA需要维护一 ...

  7. Redis 3.2.4集群实战

    一.Redis Cluster集群设计Redis集群搭建的方式有多种,例如使用zookeeper等,但从redis3.0之后版本支持Redis-Cluster集群,Redis-Cluster采用无中心 ...

  8. java学习-加载.properties工具类

    javaWeb项目,要加载xxx.properties或其它如.txt, .md后缀的文本文件 文本内容有两种格式 key:value或者key=value 诸如Spring框架,Jfinal框架,都 ...

  9. Tomcat学习总结（1）——Tomcat入门教程

    一.打包JavaWeb应用 在Java中,使用"jar"命令来对将JavaWeb应用打包成一个War包,jar命令的用法如下: 范例:将JavaWebDemoProject这个Ja ...

  10. OOAD理论知识小结

    软件工程基本概念 软件工程三要素: 方法:完成软件开发的各项任务的技术方法,为软件开发提供 “如何做” 的技术 工具:为运用方法而提供的自动的或半自动的软件工程的支撑环境 过程:为了获得高质量的软件所 ...