css 属性 display 问题解析

当前位置: 首页 » 记录 » css » css 属性 display 问题解析

分类: css 567阅读阅读模式

趁着空余时间,回顾总结一下常用的 display 属性,总结中或许能给予你些许帮助。

block

宽度问题:

  • 宽度以外空余地方,仍然占据,一行

对齐问题:

  • 上级 text-align 无法作用于区块
  • 当前 margin: auto 可以令区块居中
  • vertical-align 不起作用

浮动问题:

  • 可以很完美的浮动起来
  • 需要清理浮动

 

 

inline

宽度问题:

  • 内容决定宽度,大小由内容决定!
  • 宽度以外空余地方,下个区块自左往右填补区块

对齐问题:

  • 上级 text-align 可以作用于区块
  • 当前 margin: auto 无法令区块居中
  • vertical-align 可以作用于区块

浮动问题:

  • 可以很完美的浮动起来,同时变成块级元素
  • 浮动以后, text-align 对区块不起作用
  • 需要清理浮动

间隔问题:

  • 左右之间有间隔
  • 原因:标签与标签之间有空隙
  • 考虑:
    • F1、标签之间前后去掉间隔(参考下图一);
    • F2、上级添加 font-size 为 0 ,区块 font-size 添加 initial(初始值) 属性。

 

 

 

table

宽度问题:

  • 宽度以外空余地方,下个区块不填补

对齐问题:

  • 上级 text-align 无法作用于区块
  • 当前 margin: auto 可以令区块居中
  • vertical-align 不起作用

浮动问题:

  • 可以很完美的浮动起来
  • 需要清理浮动

 

 

table-caption

宽度问题:

  • 宽度以外空余地方,下个区块不填补

对齐问题:

  • 上级 text-align 无法作用于区块
  • 当前 margin: auto 无法令区块居中
  • vertical-align 不起作用

浮动问题:

  • 可以完美的浮动起来
  • 需要清理浮动

上级 table

  • 一般不单独使用,结合上级的元素设为 table 属性。
  • 将影响 caption 先后显示顺序

 

 

table-cell

宽度问题:

  • 宽度以外空余地方,下个区块自左往右填补区块

对齐问题:

  • 上级 text-align 无法作用于区块
  • 当前 margin: auto 无法令区块居中
  • vertical-align 可以作用于区块

vertical-align: middle;

浮动问题:

  • 可以完美的浮动起来,vertical-align 对区块不起作用
  • 需要清理浮动

上级 table

  • 一般不单独使用,结合上级的元素设为 table 属性
  • 影响所有同级区块,内容上下居中,所有区块变成自左往右填补区块

 

 

table-column

宽度问题:

  • 宽度为 0

对齐问题:

  • 上级 text-align 无法作用于区块
  • 当前 margin: auto 无法令区块居中
  • vertical-align 无法作用于区块

浮动问题:

  • 可以完美的浮动起来
  • 需要清理浮动

上级 table

  • 一般不单独使用,结合上级的元素设为 table 属性
  • 同级。。。略

单独设值

 

table-column-group

整体效果与 table-column 惊人相似。

 

table-header-group

宽度问题:

  • 内容决定宽度,大小由内容决定!
  • 宽度以外空余地方,下个区块不填补

对齐问题:

  • 上级 text-align 无法作用于区块
  • 当前 margin: auto 无法令区块居中
  • vertical-align 无法作用于区块

浮动问题:

  • 可以很完美的浮动起来,同时变成块级元素
  • 需要清理浮动

上级 table

  • 一般不单独使用,结合上级的元素设为 table 属性
  • 同级所有该元素宽度为占据一行,宽度/高度不起作用,内容决定高度
  • 该首个元素具有“置顶”于同级元素效果。

 

 

table-footer-group

宽度问题:

  • 内容决定宽度,大小由内容决定!
  • 宽度以外空余地方,下个区块不填补

对齐问题:

  • 上级 text-align 无法作用于区块
  • 当前 margin: auto 无法令区块居中
  • vertical-align 无法作用于区块
  • 首个元素具有“置底”效果。

浮动问题:

  • 可以很完美的浮动起来,同时变成块级元素
  • 需要清理浮动

上级 table

  • 一般不单独使用,结合上级的元素设为 table 属性
  • 同级所有该元素宽度为占据一行,设定宽度/高度不起作用,内容决定高度
  • 该首个元素具有“置顶”于同级元素效果。

 

 

table-row

宽度问题:

  • 内容决定宽度,大小由内容决定!
  • 宽度以外空余地方,下个区块不填补

高度问题:

  • 如果设定高度,则由该高度决定大小

 

对齐问题:

  • 上级 text-align 无法作用于区块
  • 当前 margin: auto 无法令区块居中
  • vertical-align 无法作用于区块

 

浮动问题:

  • 可以很完美的浮动起来,同时变成块级元素
  • 需要清理浮动

 

上级 table

  • 一般不单独使用,结合上级的元素设为 table 属性
  • 同级所有该元素宽度为占据一行,设定宽度不起作用,高度为设定高度

 

 

table-row-group

宽度问题:

  • 内容决定宽度,大小由内容决定!
  • 宽度以外空余地方,下个区块不填补

对齐问题:

  • 上级 text-align 无法作用于区块
  • 当前 margin: auto 无法令区块居中
  • vertical-align 无法作用于区块

浮动问题:

  • 可以很完美的浮动起来,同时变成块级元素
  • 需要清理浮动

上级 table

  • 一般不单独使用,结合上级的元素设为 table 属性
  • 同级所有该元素宽度为占据一行,宽度/高度不起作用,内容决定高度

 

温馨提示: table 值皆不单独使用。

 

完毕!

 

相关文章

评论一下

【注意1】:首次评论使用表情将会进入审核状态。
【注意2】:无意义回复、乱打文字内容将会进入审核状态。
【注意3】:涉及辱骂、色情、政治、毒品、赌博内容将会进入审核状态。
【注意】:首次评论使用表情将会进入审核状态。
暂无评论