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. Unity MVC 个人想法

    Unity MVC 个人想法 Model 想要实现效果 保存服务器数据 没有业务逻辑 接受发送消息 代码实现 缓存服务器发来的数据 注册消息接口 提供消息发送接口 View 想要实现效果 实现单元测试 ...

  2. Oracle 查看当前数据库版本的方法

    常用的有三种方法:   方法一:v$version SQL> select * from v$version; BANNER ---------------------------------- ...

  3. (转)Linux top命令的用法详细详解

    原文:https://yq.aliyun.com/articles/399004?spm=a2c4e.11153940.blogcont399002.9.3a19f00aHOA3SH# 摘要: 首先介 ...

  4. 无监督学习——K-均值聚类算法对未标注数据分组

    无监督学习 和监督学习不同的是,在无监督学习中数据并没有标签(分类).无监督学习需要通过算法找到这些数据内在的规律,将他们分类.(如下图中的数据,并没有标签,大概可以看出数据集可以分为三类,它就是一个 ...

  5. C++中：默认构造函数、析构函数、拷贝构造函数和赋值函数——转

    对于一个空类,编译器默认产生4个成员函数:默认构造函数.析构函数.拷贝构造函数和赋值函数.1.构造函数:构造函数是一种特殊的类成员,是当创建一个类的时候,它被调用来对类的数据成员进行初始化和分配内存. ...

  6. IDEA中Git的使用基础

    场景概述 工作中多人使用版本控制软件协作开发,常见的应用场景归纳如下: 假设小组中有两个人,组长小张,组员小袁 场景一:小张创建项目并提交到远程Git仓库 场景二:小袁从远程Git仓库上获取项目源码 ...

  7. 深入浅出zeptojs中tap事件

    1.tap事件实现 zepto 源码里面看关于tap的实现方法: $(document).ready(function(){ var now, delta, deltaX = 0, deltaY = ...

  8. Chapter 2 Open Book——26

    "Oh." He let it drop. I looked away awkwardly. 哦,他让它走了.我笨拙的看向别处. “哦.”他不再纠缠于这个问题.我笨拙地移开视线. ...

  9. html中img图片居中

    直接看代码 style="display:block; margin:0 auto;" 可以看到,蓝色的代码是让 块状元素居中 而红色的代码,是让img转成块状元素 ···原来im ...

  10. 在Bootstrap框架中，form-control的效果

    在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名“form-control”,将会实现一些设计上的定制效果. 1.宽度变成了100% 2. ...