CSS元素的显示模式

1、什么是元素的显示模式

显示模式：元素以什么样的方式来显示。

2、元素显示模式的分类

• 块元素：
  • 常见的块级元素： h1~h6、p、div、ul、ol、li都是块级元素
  • 特点：
    • 每个独占一行；
    • 高度、宽度、外边距及内边距都可以控制；
    • 默认容器是100%；
    • 可以放行内或块级元素。
  • 注意：
    • 文字类的元素内不能使用块级元素；p里面不能放块级元素，特别不能放div，同理,h1~h6都是文字类块级元素，里面也不能放其它块级元素。
• 行内元素(内联元素)：
  • 常见的行内元素：a, strong, b, em, i, del, s, ins, u, span
  • 特点：
    • 一行可以显示多个行内元素；
    • 不能直接设置宽度和高度；
    • 默认的宽度是内容的宽度；
    • 行内元素只能容纳文本或其他行内元素。
  • 注意：
    • 链接内不能再放置链接了；
  • 特殊情况：链接内可以放置块级元素，转换一下更安全。
• 行内块元素：资料中查找不到，却又的的确确存在着的
  • 常见的行内块元素：img/input/td
  • 特点：
    • 和相邻行内元素在一行上，但是他们之间会有空白缝隙。一行可以显示多个。（行内元素特点）
    • 默认宽度就是它本身内容的宽度。（行内元素特点）
    • 高度、行高、外边距以及内边距都可以控制。 （块级元素特点）

3、元素显示模式的转换

display: inline; # 转行内元素
display: block; # 转块级元素
display: inline-block; # 转行内块元素