默认值:inline

适用于:所有元素

继承性:无

动画性:否

none:
隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间
inline:
指定对象为内联元素。
block:
指定对象为块元素。
list-item:
指定对象为列表项目。
inline-block:
指定对象为内联块元素。(CSS2)
table:
指定对象作为块元素级的表格。类同于html标签<table>(CSS2)
inline-table:
指定对象作为内联元素级的表格。类同于html标签<table>(CSS2)
table-caption:
指定对象作为表格标题。类同于html标签<caption>(CSS2)
table-cell:
指定对象作为表格单元格。类同于html标签<td>(CSS2)
table-row:
指定对象作为表格行。类同于html标签<tr>(CSS2)
table-row-group:
指定对象作为表格行组。类同于html标签<tbody>(CSS2)
table-column:
指定对象作为表格列。类同于html标签<col>(CSS2)
table-column-group:
指定对象作为表格列组显示。类同于html标签<colgroup>(CSS2)
table-header-group:
指定对象作为表格标题组。类同于html标签<thead>(CSS2)
table-footer-group:
指定对象作为表格脚注组。类同于html标签<tfoot>(CSS2)
run-in:
根据上下文决定对象是内联对象还是块级对象。(CSS3)
box:
将对象作为弹性伸缩盒显示。(伸缩盒最老版本)(CSS3)
inline-box:
将对象作为内联块级弹性伸缩盒显示。(伸缩盒最老版本)(CSS3)
flexbox:
将对象作为弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3)
inline-flexbox:
将对象作为内联块级弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3)
flex:
将对象作为弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)
inline-flex:
将对象作为内联块级弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)

* CSS3新增属性可能存在描述错误及变更,仅供参考,持续更新

说明:

设置或检索对象是否及如何显示。

  • 如果display设置为none,floatposition属性定义将不生效;
  • 如果position既不是static也不是relative或者float不是none或者元素是根元素,当display:inline-table时,display的计算值为table;当display:inline | inline-block | run-in | table-* 系时,display的计算值为block,其它情况为指定值;
  • IE6,7支持inline元素转换成inline-block,但不支持block元素转换成inline-block,所以非inline元素在IE6,7下要转换成inline-block,需先转换成inline,然后触发hasLayout,以此来获得和inline-block类似的效果

CSS3里的display的更多相关文章

  1. CSS3盒模型display:box详解

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...

  2. css3 动画与display:none冲突的解决方案

    概述 css不能在display:none和display:block之间进行动画,并且也不能在height:0和height:auto之间进行动画.这里我研究了一下在display:none和dis ...

  3. css3里面的-webkit-transition

    css3里面的-webkit-transition (1)-webkit-transition-timing-function 可以定义动画的变化时间曲线-webkit-transition-timi ...

  4. CSS3:布局display属性的flex(弹性布局)

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

  5. 分享CSS3里box-shadow属性的使用方法,包括内阴影box-shadow:inset

    一.box-shadow语法 box-shadow: none | inset(可选值,不设置,为外投影,设置,为内投影) x-offset(阴影水平偏移量,正方向为right) y-offset(阴 ...

  6. [转]CSS3盒模型display:box详解

    时间:2014-02-25来源:网络作者:未知编辑:RGB display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布 ...

  7. CSS3 里添加自定义字体

    添加自定义字体是从 CSS3 开始的,下载到的字体可以在网页中使用. 下载字体 在网上找字体下载,文件后缀名有 ttf.otf 等. 在 CSS 里加载字体 @font-face { font-fam ...

  8. CSS3盒模型display:-webkit-box;的使用

    box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box-flex属性还没有得到 ...

  9. 2018年1月17日总结 css3里transition 和animation 区别

    transition 和animation两个CSS3属性经常被用到实际项目中,想把它整理出来. 1.先介绍transition >>>>>  a. 在做项目中经常会遇见 ...

随机推荐

  1. 深入理解PHP内核(四)概览-PHP脚本的执行

    本文链接:http://www.orlion.ml/236/ 下面以php命令行程序为例解释PHP脚本是怎么被执行的.例如如下脚本: <?php $str = 'hello world'; ec ...

  2. Visual C++ 6.0使用教程

    Visual C++它大概可以分成三个主要的部分: 3. Platform SDK.这才是Visual C++和整个Visual Studio的精华和灵魂,虽然我们很少能直接接触到它.大致说来,Pla ...

  3. spring 源码分析之BeanPostProcessor

    1.官方解答: Factory hook that allows for custom modification of new bean instances, e.g. checking for ma ...

  4. 机器学习&数据挖掘笔记_22(PGM练习六:制定决策)

    前言: 本次实验是将一些简单的决策理论和PGM推理结合,实验内容相对前面的图模型推理要简单些.决策理论采用的是influence diagrams,和常见图模型本质一样, 其中的决策节点也可以用CPD ...

  5. [SDK2.2]Windows Azure Virtual Network (4) 创建Web Server 001并添加至Virtual Network

    <Windows Azure Platform 系列文章目录> 在上一章内容中,笔者已经介绍了以下两个内容: 1.创建Virtual Network,并且设置了IP range 2.创建A ...

  6. Elasticsearch——分页查询From&Size VS scroll

    Elasticsearch中数据都存储在分片中,当执行搜索时每个分片独立搜索后,数据再经过整合返回.那么,如果要实现分页查询该怎么办呢? 更多内容参考Elasticsearch资料汇总 按照一般的查询 ...

  7. 安装logstash,elasticsearch,kibana三件套

    logstash,elasticsearch,kibana三件套 elk是指logstash,elasticsearch,kibana三件套,这三件套可以组成日志分析和监控工具 注意: 关于安装文档, ...

  8. JS包装对象

    一.包装对象 var s = "hello word"; s.len = 4; var t = s.len; //=>undefined 原因由于s是一个字符串,在执行第二行 ...

  9. 实现iOS图片等资源文件的热更新化(二):自定义的动态 imageNamed

    这篇文章,要解决的是,使用一个自定义的 imageNamed 函数来替代系统的 imageNamed 函数.内部逻辑,将贯穿对比论证 关于"合适"的图片的定义.对iOS加载图片的规 ...

  10. 高逼格前端开发工具-FIDDLER

    1.Fiddler相对其他调试工具的优势 HttpWatch 和 Firebug绝大多数前端开发人员都比较熟悉,但是HttpWatch虽然可以抓到每个 HTTP 请求的全部数据,但无法修改返回的数据: ...