默认值: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. hibernate(七)组件映射与多对一映射

    一.组件映射 用注解配置组件映射: Husband为我们映射的类,wife是这个类的一部分(属性不能与husband中属性重名,不要写Entity注解,不要有主键) Husband类:(在getWif ...

  2. Sort the Array

    /* 思路: 找到单调下降串的起始位置[l, r] 如果左边 0...l-1中的最大值 > l...r中的最小值 或者 r+1...n中的最小值 < l...r中的最大值 都是不能实现排序 ...

  3. C++中typename关键字的用法

    我在我的 薛途的博客 上发表了新的文章,欢迎各位批评指正. C++中typename关键字的用法

  4. Yii2的深入学习--别名(Aliases)

    在之前自动加载机制的文章中,我们有提到别名,提到 getAlias 方法,大家当时可能不太清楚,这到底是什么,今天我们就来说一下别名. 别名用来表示文件路径和 URL,这样就避免了将一些文件路径.UR ...

  5. Greenplum 数据库安装部署(生产环境)

    Greenplum 数据库安装部署(生产环境) 硬件配置: 16 台 IBM X3650, 节点配置:CPU 2 * 8core,内存 128GB,硬盘 16 * 900GB,万兆网卡. 万兆交换机. ...

  6. 常用的Webservice接口

    常用的Webservice接口 . 查询手机:http://www.yodao.com/smartresult-xml/search.s?type=mobile&q=手机号码 . 查询IP:h ...

  7. 【Android】Android Studio 快速打开Github上的Demo

    ******* 注意 ******* Google 在15年12月2日发布了Android Studio 2.0,比起以前的版本速度提升了很多,所以强烈推荐各位朋友升级IDE! 1.修改:build. ...

  8. Elasticsearch——Date Math在索引中的用法详解

    在elasticsearch中,有时会想要通过索引日期来筛选查询的数据,此时就需要用到日期数学表达式. 更多内容参考Elasticsearch翻译汇总 基于日期数学表达式的索引 模式如下: <s ...

  9. 第2/24周 页_SQL Server 中数据存储的基本单位

    上周通过探讨SQL Server如何执行一个查询奠定了基础.我也在那里提到页是8kb的缓存.今天我们对页进行进一步集中探讨,从性能调优角度挖掘出更多的细节. 页是SQL Server的基础,在SQL ...

  10. javascrpt插入html中中文字符乱码问题记录

    问题就是我使用js做这么个事情: var description = [ '你好', '你好', '你好', '你好' ]; var link = ''; var logLink = ''; ; i ...