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. 在做项目中经常会遇见 ...
随机推荐
- 【目录】微软Infer.NET机器学习组件文章目录
本博客所有文章分类的总目录链接:http://www.cnblogs.com/asxinyu/p/4288836.html 1.微软Infer.NET机器学习组件目录 1. Infer.NET连载(一 ...
- Android强制设定横屏时,SurfaceView一直黑屏
接着上一个问题,解决了SurfaceView闪屏问题之后(http://www.cnblogs.com/Joanna-Yan/p/4829325.html),又有了一个新的问题.现在我想设置含有fra ...
- Nutch源码阅读进程2---Generate
继之前仓促走完nutch的第一个流程Inject后,再次起航,Debug模式走起,进入第二个预热阶段Generate~~~ 上期回顾:Inject主要是将爬取列表中的url转换为指定格式<T ...
- T-SQL中jion操作
--创建学生表 create table Students( sno nvarchar(10) not null primary key, name nvarchar(30) not null, ge ...
- mysql判断一条记录是否存在,如果存在,则更新此语句,如果不存在,则插入
前言,在我们的业务逻辑中,很有可能会遇到这样的情况. 1.我要更新一条记录的值. 2.但是我不确定这条记录存不存在??? 3.那如果存在?我就更新,如果不存在,我就插入! 那么如果这样,一般情况下,我 ...
- Windows Azure Cloud Service (39) 如何将现有Web应用迁移到Azure PaaS平台
<Windows Azure Platform 系列文章目录> 本文将简单介绍,如何将企业内现有的ASP.NET应用程序迁移到Azure PaaS平台. 因为在迁移过程中,可能需要对现有的 ...
- 歌词文件解析(一):LRC格式文件的解析
LRC是英文lyric(歌词)的缩写,被用做歌词文件的扩展名.以lrc为扩展名的歌词文件可以在各类数码播放器中同步显示.LRC 歌词是一种包含着“*:*”形式的“标签(tag)”的基于纯文本的歌词专用 ...
- .Net语言 APP开发平台——Smobiler学习日志:如何仿微信朋友圈的消息样式?
最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 一.目标样式 我们要实现上图中的效果,需要如下的操作: 1.从工具栏上的”Smobil ...
- QTableWidget的美化
FriendTable->setFrameShape(QFrame::NoFrame); //设置边框 FriendTable->setHorizontalHeaderLabels( ...
- Java总结篇系列:Java String
String作为Java中最常用的引用类型,相对来说基本上都比较熟悉,无论在平时的编码过程中还是在笔试面试中,String都很受到青睐,然而,在使用String过程中,又有较多需要注意的细节之处. 1 ...