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. 爬虫 解码gb1312类型

    今天我爬虫的时候竟然遇见了网页编码为gb1312类型的网站  , 不是平常的utf-8 遇到这种类型的时候忽视它是最好的办法 ① respond.content.decode('gb18030','i ...

  2. 在vue里面使用iVew框架

    iVew框架的文档   https://www.iviewui.com/docs/guide/install 这里使用的是 npm 来安装,在项目下执行下面命令npm install iview -- ...

  3. 十分钟内在Ubuntu系统上搭建Mono开发环境（Mono软件Ubuntu系统国内镜像源、Mono国内镜像源）

    Mono软件Ubuntu系统国内镜像源.Mono国内镜像源 http://download.githall.cn/repo 替换为国内源(非官方)有利于加快mono的安装速度,一般情况下,完成mono ...

  4. Java读取文件加锁代码Demo(利用Java的NIO)

    本博文部分转载于:http://blog.csdn.net/wangbaochu/article/details/48546717 Java 提供了文件锁FileLock类,利用这个类可以控制不同程序 ...

  5. let'encript 解决证书问题

    今天服务器let'encript证书过期了,年纪大了老忘,不得不把别人的博客看一遍,就是因为我不想定时任务执行acme_tiny.py,还是写个文档记下,很久不写对外博客了,冒个泡. 1.创建普通域名 ...

  6. 04 - JavaSE之异常处理

    异常的概念(运行期出现的错误) java 异常是 java 提供的用于处理程序中错误的一种机制. 所谓的错误是指在程序运行的过程中发生的一些异常事件.(如:除0溢出,数组下标越界,所要读取的文件不存在 ...

  7. 【K8S学习笔记】Part2：获取K8S集群中运行的所有容器镜像

    本文将介绍如何使用kubectl列举K8S集群中运行的Pod内的容器镜像. 注意:本文针对K8S的版本号为v1.9,其他版本可能会有少许不同. 0x00 准备工作 需要有一个K8S集群,并且配置好了k ...

  8. 【webserver】使用python实现webserver，支持上传下载文件

    #!/usr/bin/env python """Simple HTTP Server With Upload. This module builds on BaseHT ...

  9. 附件十四面3D模型的自动化生成

    附件十四面的3D模型可以自动生成了 2017-10-14 刘崇军 风螺旋线 这个故事开始于大约半年前,偶然从电脑里翻到了曾经收藏的这本书<Automatic SketchUp>,英语+3D ...

  10. UVA 1605 Building for UN(思维)

    题目链接: https://cn.vjudge.net/problem/UVA-1605#author=0 /* 问题 设计一个包含若干层的联合国大厦,其中每一层都是等大的网格,每个格子分配给一个国家 ...