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. 在做项目中经常会遇见 ...
随机推荐
- BOM之window对象
双重角色 BOM的核心对象是window,它表示浏览器的一个实例.在浏览器中,window对象有双重角色,它既是通过Javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Glob ...
- java中父类与子类, 不同的两个类中的因为构造函数由于递归调用导致栈溢出问题
/* 对于类中对成员变量的初始化和代码块中的代码全部都挪到了构造函数中, 并且是按照java源文件的初始化顺序依次对成员变量进行初始化的,而原构造函数中的代码则移到了构造函数的最后执行 */ impo ...
- 邻接表无向图(二)之 C++详解
本章是通过C++实现邻接表无向图. 目录 1. 邻接表无向图的介绍 2. 邻接表无向图的代码说明 3. 邻接表无向图的完整源码 转载请注明出处:http://www.cnblogs.com/skywa ...
- tomcat匹配Servlet的流程(原创)
- javascript学习7
JavaScript Math(算数)对象 Math(算数)对象的作用是:执行常见的算数任务. 实例 round() 如何使用 round(). random() 如何使用 random() 来返回 ...
- jQuery 3.1 API中文文档
jQuery 3.1 API中文文档 一.核心 1.1 核心函数 jQuery([selector,[context]]) 接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素. jQ ...
- 基于HT for Web 快速搭建3D机房设备面板
以真实设备为模型,搭建出设备面板,并实时获取设备运行参数,显示在设备面板上,这相比于纯数值的设备监控系统显得更加生动直观.今天我们就在HT for Web的3D技术上完成设备面板的搭建. 我们今天模拟 ...
- CSS魔法堂:重新认识Box Model、IFC、BFC和Collapsing margins
前言 盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日 ...
- 【原创】Kakfa utils源代码分析(二)
我们继续研究kafka.utils包 八.KafkaScheduler.scala 首先该文件定义了一个trait:Scheduler——它就是运行任务的一个调度器.任务调度的方式支持重复执行的后台任 ...
- 二维码详解(QR Code)
作者:王子旭链接:https://zhuanlan.zhihu.com/p/21463650来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 2016.7.5 更新:长文 ...