CSS3 display知识详解


Posted in HTML / CSS onNovember 25, 2015

默认值: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类似的效果

HTML / CSS 相关文章推荐
详解Css3新特性应用之过渡与动画
Jan 10 HTML / CSS
用CSS禁用输入法(CSS3 UI规范)实例解析
Dec 04 HTML / CSS
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
Jun 06 HTML / CSS
CSS3的column-fill属性对齐列内容高度的用法详解
Jul 01 HTML / CSS
webapp字号大小跟随系统字号大小缩放的示例代码
Dec 26 HTML / CSS
HTML5 Canvas标签使用收录
Jul 07 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
Jul 18 HTML / CSS
Html5 audio标签样式的修改
Jan 28 HTML / CSS
六种css3实现的边框过渡效果
Apr 22 HTML / CSS
html+css实现环绕倒影加载特效
Jul 07 HTML / CSS
html form表单基础入门案例讲解
Jul 21 HTML / CSS
CSS3实现360度循环旋转功能
Feb 12 HTML / CSS
详解CSS3选择器的使用方法汇总
Nov 24 #HTML / CSS
深入浅析css3 border-image边框图像详解
Nov 24 #HTML / CSS
基于css3 animate制作绚丽的动画效果
Nov 24 #HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
Nov 19 #HTML / CSS
基于CSS3实现图片模糊过滤效果
Nov 19 #HTML / CSS
Css3圆角边框制作代码
Nov 18 #HTML / CSS
CSS3绘制不规则图形的一些方法示例
Nov 07 #HTML / CSS
You might like
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
codeigniter教程之多文件上传使用示例
2014/02/11 PHP
php+mysql数据库查询实例
2015/01/21 PHP
php常量详细解析
2015/10/27 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
PHP实现统计代码行数小工具
2019/09/19 PHP
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
IE与FireFox中的childNodes区别
2011/10/20 Javascript
利用javascript判断文件是否存在
2013/12/31 Javascript
javascript通过className来获取元素的简单示例代码
2014/01/10 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
2014/12/17 Javascript
location.hash保存页面状态的技巧
2016/04/28 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
基于AngularJS实现表单验证功能
2017/07/28 Javascript
JS使用new操作符创建对象的方法分析
2019/05/30 Javascript
在Vue环境下利用worker运行interval计时器的步骤
2019/08/01 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
pycharm中成功运行图片的配置教程
2018/10/28 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
解决keras加入lambda层时shape的问题
2020/06/11 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
python跨文件使用全局变量的实现
2020/11/17 Python
使用Python制作一盏 3D 花灯喜迎元宵佳节
2021/02/26 Python
自我鉴定怎么写
2013/12/05 职场文书
煤矿机修工岗位职责
2014/02/07 职场文书
五星级酒店餐饮部总监的标准岗位职责
2014/02/17 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
消防安全承诺书
2014/05/22 职场文书
合同纠纷调解书
2015/05/20 职场文书
运动会跳远广播稿
2015/08/19 职场文书
2015年美容师个人工作总结
2015/10/14 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书
python数据库批量插入数据的实现(executemany的使用)
2021/04/30 Python