1. 标签显示模式

1.1 块级元素(block)

• 常见块级元素：<h1>~<h6> <p> <div> <ul> <ol> <li> 其中div最典型
• 总是从新行开始
• 高度、行高、外边距以及内边距可控制
• 宽度默认是容器 100%
• 可以容纳内联元素和其他块级元素

1.2 行内标签元素(inline)

• 常见行内元素：<a> <strong> <b> <em> <i> <del><s><ins><u><span> 其中span最典型
• 和相邻行内元素在一行显示
• 高宽无效，但水平方向的 padding 和 margin 可以设置，垂直方向的无效
• 默认宽度就是本身的宽度
• 行内元素只能容纳文本或者其他行内元素，不能放块级元素（a 特殊，在 a 里面可以放块级元素）
• 注意点：
  • 链接中不能放链接。
  • 文字类块级元素里不能放其他块级元素

1.3 行内块元素（inline-block）

• 行内块元素既具有行内元素的某些特性可以显示在一行，又具有块级元素的某些属性；标签：img，input，td；可以对他们设置宽高和对齐属性
• 可相邻行内元素可以显示在一行
• 默认宽度就是内容宽度
• 高度、行高、外边距以及内边距都可以控制

1.4 标签显示模式转换 display

• 块转行内：display: inline;
• 行内转块：display: block;
• 块、行内元素转换为行内块：display: inline-block;
• display: none：将 display 设置为 none 会将元素从可访问性树中移除；此时在浏览器上就看不见标签了