CSS中元素分类及元素类型转换相关知识

元素分类

• 行内元素；
• 块元素；
• 行内块元素；

行内元素（inline）

• 又称内联元素；
• 始终以行内逐个进行显示；
• 宽高：
  • 不单独占行，无法设置宽高；
  • 宽度、高度均取决于自身内容；
• 比如：a、span；

块元素（block）

• 又称块状元素；
• 宽高：
  • 单独占行、可改变宽高；
  • 默认状况下：宽度：100%；高度：自身内容高度；
• 比如：div、ol、ul；

行内块元素（inline-block）

• 又称内联块元素；
• 不单独占行；
• 宽高：
  • 默认宽高为自身内容宽高，但可以修改；
• 网页布局时易出现对齐问题
  • 原因:所有的行内块元素都是以基线对齐的
  • 解决基线对齐的问题：
    • vertical-align:
      • top；
      • bottom；
      • middle；

display属性

• 可借由该属性进行元素类型转换；
• 属性值：
  • display:block;
    • 转化为块元素；
  • display:inline;
    • 转化为行内元素；
  • display:inline-block;
    • 转化为行内块元素；
  • display:none
    • 此元素不会被显示；

补充：

• 大部分块元素display属性值默认为block，其中列表li的默认值为list-item；
• 大部分内联元素的display属性值默认为inline,其中img,input，默认为inline-block（行内块元素）；