• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >css3 > CSS3 display知识详解

CSS3 display知识详解

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-06-02

本文主要包含css3 display,css3 display:flex,css3 display属性,css3 display:box,css3动画详解等相关知识,佚名 希望在学习及工作中可以帮助到您

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

</div>

您可能想查找下面的文章:

  • 移动端Web页面的CSS3 flex布局快速上手指南
  • CSS3弹性盒模型flex box快速入门心得(必看篇)
  • 几个CSS3的flex弹性盒模型布局的简单例子演示
  • CSS3 flex布局之快速实现BorderLayout布局
  • 深入浅析css3 中display box使用方法
  • CSS3 display知识详解
  • 细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果

相关文章

  • 2017-08-02CSS3动画特效
  • 2017-06-02CSS3中的元素过渡属性transition示例详解
  • 2017-06-02css3中background新增的4个新的相关属性用法介绍
  • 2017-06-025分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
  • 2017-06-02css3 按钮 利用css3实现超酷下载按钮
  • 2017-06-02几个CSS3的flex弹性盒模型布局的简单例子演示
  • 2017-06-02CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
  • 2017-06-02纯CSS实现设置半个字符的样式
  • 2017-06-02发现两个有趣的CSS3动画效果
  • 2017-06-02CSS3中的5个有趣的新技术

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 结合CSS3的新特性来总结垂直居中的实现方法
    • CSS3中HSL和HSLA的简单使用示例
    • Web页面中八种创建多列等高(等高列布局)的实现技术
    • CSS3实现简易版的刮刮乐效果
    • css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
    • 使用css3绘制出各种几何图形
    • 网页切图的CSS和布局经验与要点
    • CSS3弹性伸缩布局之box布局
    • 一款基于css3和jquery实现的动画显示弹出层按钮教程
    • css3 2D图片转动样式可以扩充到Js当中

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有