6 CSS 元素显示模式

  元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页

6.1 块级元素

• 显示特点：
  • 独占一行（一行只能显示一个）
  • 宽度默认是父元素的宽度，高度默认由内容撑开
  • 可以设置宽高
  • 是一个容器及盒子，里面可以放行内或者块级元素
• 代表标签：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer.....
• 注意：
  • 文字类的元素内不能使用块级元素
  • <p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放<div>
  • 同理， <h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

6.2 行内元素

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

6.3 行内块元素

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

6.4 元素显示模式转换

• 目的：改变元素默认的显示特点，让元素符合布局要求
• 语法：