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. Go指南练习 rot13Reader

    题目: 练习:rot13Reader 有种常见的模式是一个 io.Reader 包装另一个 io.Reader,然后通过某种方式修改其数据流. 例如,gzip.NewReader 函数接受一个 io. ...

  2. Handler 、 Looper 、Message异步消息处理线程机制( hander消息机制原理)

    Handler . Looper .Message 这三者都与Android异步消息处理线程相关的概念. 那么什么叫异步消息处理线程呢? 异步消息处理线程启动后会进入一个无限的循环体之中,每循环一次, ...

  3. PyCharm下载与激活

    1.集成开发环境(IDE:Integrated Development Environment)PyCharm下载地址:https://www.jetbrains.com/pycharm/downlo ...

  4. Java代码调用Oracle的存储过程,存储函数和包

    Java代码调用存储过程和存储函数要使用CallableStatement接口 查看API文档: 上代码: java代码调用如下的存储过程和函数: 查询某个员工的姓名  月薪 职位 create or ...

  5. SQL 日期相减（间隔）datediff函数

    select datediff(year, 开始日期,结束日期); --两日期间隔年 select datediff(quarter, 开始日期,结束日期); --两日期间隔季 select date ...

  6. php -- 配置与安装

    1.php与apache安装路径 2.安装Apache服务 httpd -k install 开启关闭重启服务 http -k start/stop/restart 3.php.ini-develop ...

  7. vmware workstation 下安装ubuntu

    安装时我是借鉴 https://blog.csdn.net/xiaohua0877/article/details/78507631 期间遇到几个问题 键盘不好使,解决办法是重新运行wmware wo ...

  8. php 通过 strtr 方法来替换文本中指定的内容

    通过在文本中指定待替换的内容,如: [{name}] [{age}] 格式可以自己定义, 大概过程: 在文本中定义需要替换的文本内容: 以键值对的方式 组织数据(数组): 用 file_get_con ...

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

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

  10. Python高级特性：迭代器和生成器 -转

    在Python中,很多对象都是可以通过for语句来直接遍历的,例如list.string.dict等等,这些对象都可以被称为可迭代对象.至于说哪些对象是可以被迭代访问的,就要了解一下迭代器相关的知识了 ...