前端学习-CSS-06-元素显示模式

学习时间：2022.11.12

元素显示模式

块级元素

• 特点：
  • 独占一行
  • 宽度默认等于其父母标签，高度由内容撑开
  • 宽高可以设置
• 代表元素：
  • div,p,h系列,ul,li,dl,dt,dd,form,header,nav,footer...

行内元素

• 特点：
  • 一行可以显示多个
  • 宽度高度默认由内容撑开
  • 不能设置宽高
• 代表元素：
  • a,span,b,u,i,s,strong,ins,em,del...

行内块元素

• 特点：
  • 一行可以显示多个
  • 可以设置宽高
• 代表元素：
  • input,textarea,select,button...
  • 特殊情况：img标签有行内块元素特点，但在chrome调试工具中显示的是inline

元素显示模式转换

• 用于改变元素默认的显示特点，让元素符合布局要求
• 共有3个语法：
  • display:block 转换成块级元素
  • display:inline-block 转换成行内块元素
  • display:inline 转换成行内元素
• 其中display:inline使用最少

标签嵌套

• 块级元素内可以包含：文本，块级元素，行内元素，行内块元素
  • 但有一些特殊情况：p内不能嵌套div,p,h系列标签
• a标签内部可以嵌套除了a以外的任何元素