CSS3里的display
默认值: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,float及position属性定义将不生效;
- 如果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的更多相关文章
- CSS3盒模型display:box详解
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...
- css3 动画与display:none冲突的解决方案
概述 css不能在display:none和display:block之间进行动画,并且也不能在height:0和height:auto之间进行动画.这里我研究了一下在display:none和dis ...
- css3里面的-webkit-transition
css3里面的-webkit-transition (1)-webkit-transition-timing-function 可以定义动画的变化时间曲线-webkit-transition-timi ...
- CSS3:布局display属性的flex(弹性布局)
CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...
- 分享CSS3里box-shadow属性的使用方法,包括内阴影box-shadow:inset
一.box-shadow语法 box-shadow: none | inset(可选值,不设置,为外投影,设置,为内投影) x-offset(阴影水平偏移量,正方向为right) y-offset(阴 ...
- [转]CSS3盒模型display:box详解
时间:2014-02-25来源:网络作者:未知编辑:RGB display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布 ...
- CSS3 里添加自定义字体
添加自定义字体是从 CSS3 开始的,下载到的字体可以在网页中使用. 下载字体 在网上找字体下载,文件后缀名有 ttf.otf 等. 在 CSS 里加载字体 @font-face { font-fam ...
- CSS3盒模型display:-webkit-box;的使用
box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box-flex属性还没有得到 ...
- 2018年1月17日总结 css3里transition 和animation 区别
transition 和animation两个CSS3属性经常被用到实际项目中,想把它整理出来. 1.先介绍transition >>>>> a. 在做项目中经常会遇见 ...
随机推荐
- hibernate(七)组件映射与多对一映射
一.组件映射 用注解配置组件映射: Husband为我们映射的类,wife是这个类的一部分(属性不能与husband中属性重名,不要写Entity注解,不要有主键) Husband类:(在getWif ...
- Sort the Array
/* 思路: 找到单调下降串的起始位置[l, r] 如果左边 0...l-1中的最大值 > l...r中的最小值 或者 r+1...n中的最小值 < l...r中的最大值 都是不能实现排序 ...
- C++中typename关键字的用法
我在我的 薛途的博客 上发表了新的文章,欢迎各位批评指正. C++中typename关键字的用法
- Yii2的深入学习--别名(Aliases)
在之前自动加载机制的文章中,我们有提到别名,提到 getAlias 方法,大家当时可能不太清楚,这到底是什么,今天我们就来说一下别名. 别名用来表示文件路径和 URL,这样就避免了将一些文件路径.UR ...
- Greenplum 数据库安装部署(生产环境)
Greenplum 数据库安装部署(生产环境) 硬件配置: 16 台 IBM X3650, 节点配置:CPU 2 * 8core,内存 128GB,硬盘 16 * 900GB,万兆网卡. 万兆交换机. ...
- 常用的Webservice接口
常用的Webservice接口 . 查询手机:http://www.yodao.com/smartresult-xml/search.s?type=mobile&q=手机号码 . 查询IP:h ...
- 【Android】Android Studio 快速打开Github上的Demo
******* 注意 ******* Google 在15年12月2日发布了Android Studio 2.0,比起以前的版本速度提升了很多,所以强烈推荐各位朋友升级IDE! 1.修改:build. ...
- Elasticsearch——Date Math在索引中的用法详解
在elasticsearch中,有时会想要通过索引日期来筛选查询的数据,此时就需要用到日期数学表达式. 更多内容参考Elasticsearch翻译汇总 基于日期数学表达式的索引 模式如下: <s ...
- 第2/24周 页_SQL Server 中数据存储的基本单位
上周通过探讨SQL Server如何执行一个查询奠定了基础.我也在那里提到页是8kb的缓存.今天我们对页进行进一步集中探讨,从性能调优角度挖掘出更多的细节. 页是SQL Server的基础,在SQL ...
- javascrpt插入html中中文字符乱码问题记录
问题就是我使用js做这么个事情: var description = [ '你好', '你好', '你好', '你好' ]; var link = ''; var logLink = ''; ; i ...