CSS基础篇--你知道的display的值有多少？用了多少？

wangdai 发布于2019-08-28 18:17 / 930人阅读

摘要：与属性的值不同，其不为被隐藏的对象保留其物理空间指定对象为内联元素。指定对象作为块元素级的表格。类同于标签指定对象作为表格行组。伸缩盒过渡版本将对象作为弹性伸缩盒显示。伸缩盒最新版本新增属性可能存在描述错误及变更，仅供参考。

它的语法如下：

当然默认值是inline。

取值：

none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline：指定对象为内联元素。
block：指定对象为块元素。
list-item：指定对象为列表项目。
inline-block：指定对象为内联块元素。（CSS2）
table：指定对象作为块元素级的表格。类同于html标签

（CSS2）
inline-table：指定对象作为内联元素级的表格。类同于html标签

（CSS2）
table-caption：指定对象作为表格标题。类同于html标签（CSS2）
table-row-group：指定对象作为表格行组。类同于html标签（CSS2）
table-column：指定对象作为表格列。类同于html标签（CSS2）
table-column-group：指定对象作为表格列组显示。类同于html标签（CSS2）
table-header-group：指定对象作为表格标题组。类同于html标签（CSS2）
table-footer-group：指定对象作为表格脚注组。类同于html标签（CSS2）
run-in：根据上下文决定对象是内联对象还是块级对象。（CSS3）
box：将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
inline-box：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
flexbox：将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
inline-flexbox：将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
flex：将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
inline-flex：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）

CSS3新增属性可能存在描述错误及变更，仅供参考。

说明：常用的display属性值如下：none，block，inline-block，table，table-cell，table-row，box，flex

注：IE6,7支持inline元素转换成inline-block，但不支持block元素转换成inline-block，所以非inline元素在IE6,7下要转换成inline-block，需先转换成inline，然后触发hasLayout，以此来获得和inline-block类似的效果；可以这样：

全兼容的inline-block:

div { display: inline-block; *display: inline; *zoom: 1; }

兼容性如下：

下面给个运用table的例子：

html代码：

 
    
        Why?
        About
        Offline
        Redemption
        Videos/clips
        Quiz

css代码：

nav{
    display:table;
}
nav ul{
    display:table-row;
}
nav ul li{
    display:table-cell;
}
nav ul li:last-child{
    text-align:right;
}
nav ul li:first-child{
    text-align:left;
}

实现导航如图：

导航效果地址：http://www.andthewinnerisnt.com/

相关文章：
《CSS笔记：css3中box-flex属性的使用》
《CSS笔记：css3中的多列布局columns详解》

云服务器 GPU云服务器怎么查看ECS系统盘用了多少你知道你应该知道数据分析知道你

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111141.html

圣杯布局中对left盒子设置负内边距-100%的一点解释

摘要：但在前几天偶然看到一篇讲解圣杯布局的博客中，有同学对左侧定宽盒子设置存在疑惑，大致是不清楚为什么这样设置就会使盒子爬升到盒子的左侧，想了一下，还是把自己的理解记录下来，希望能帮到在此处有疑惑的同学，文中如有谬误，欢迎指出。圣杯布局算是一个古老的话题了，关于其来源网上资料众多，在此不多做表述。但在前几天偶然看到一篇讲解圣杯布局的博客中，有同学对左侧定宽盒子设置 margin-left:...

JellyBool 2019-08-29 15:08 评论0 收藏0
圣杯布局中对left盒子设置负内边距-100%的一点解释

摘要：但在前几天偶然看到一篇讲解圣杯布局的博客中，有同学对左侧定宽盒子设置存在疑惑，大致是不清楚为什么这样设置就会使盒子爬升到盒子的左侧，想了一下，还是把自己的理解记录下来，希望能帮到在此处有疑惑的同学，文中如有谬误，欢迎指出。圣杯布局算是一个古老的话题了，关于其来源网上资料众多，在此不多做表述。但在前几天偶然看到一篇讲解圣杯布局的博客中，有同学对左侧定宽盒子设置 margin-left:...

LdhAndroid 2019-08-02 10:15 评论0 收藏0
CSS Grid 读书笔记

摘要：和绝对定位和绝对定位如果父容器有定位标识等，那么下面的子会根据原始它们应该布局的位置定位，反之如果父容器没有定位标识，那么应用了会脱离布局，并且按照传统的方式布局。基本概念 MDN上的解释是这样的 CSS Grid Layout excels at dividing a page into major regions or defining the relationship in term...

liuhh 2019-04-23 13:22 评论0 收藏0
前端面试每日3+1（周汇总2019.08.11）

摘要：前端面试每日题，以面试题来驱动学习，每天进步一点让努力成为一种习惯，让奋斗成为一种享受相信坚持的力量项目地址推荐欢迎跟一起折腾前端，系统整理前端知识，目前正在折腾，打算打通算法与数据结构的任督二脉。《论语》，曾子曰：吾日三省吾身（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！相信坚持的力量！！！项目...

Baoyuan 2019-08-30 15:44 评论0 收藏0
前端面试每日3+1（周汇总2019.08.11）

摘要：前端面试每日题，以面试题来驱动学习，每天进步一点让努力成为一种习惯，让奋斗成为一种享受相信坚持的力量项目地址推荐欢迎跟一起折腾前端，系统整理前端知识，目前正在折腾，打算打通算法与数据结构的任督二脉。《论语》，曾子曰：吾日三省吾身（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！相信坚持的力量！！！项目...

马永翠 2019-08-26 10:42 评论0 收藏0