css 属性 display 问题解析

趁着空余时间，回顾总结一下常用的 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 值皆不单独使用。   完毕！