可替换元素与非可替换元素

可替换元素

在 CSS 中，一个可替换元素的展现效果不是由 CSS 控制的，它们是外部对象，且表现形式独立于 CSS 格式化模型。
简单来讲，它们的内容不受当前文档的样式的影响。使用 CSS 可影响可替换元素的位置，但不会影响可替换元素自身的内容。某些可替换元素，比如<iframe>元素，可能有其自身的样式表，但它们不会继承父文档的样式。
CSS 对可替换元素的唯一其他影响在于，有些属性支持控制元素内容在其框内的位置。详细内容，控制内容框中的对象位置

需要注意：一部分（并非全部）可替换元素，本身有尺寸和基线,会被像vertical-align之类的一些 CSS 属性用到。
浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其中生成了框，其可替换元素通常有其固有尺寸（intrinsic dimensions）：一个固有宽度，一个固有高度，一个固有的宽高比率。根据 W3C 文档，有且仅有全体替换元素具有固有尺寸的

• 典型的可替换元素：
  • <iframe>
  • <video>
  • <embed>
  • <img>
• 在特定情况下被作为可替换元素处理：
  • <option>
  • <audio>
  • <object>
  • <applet>
  • <input>
• 匿名的可替换元素：用 CSScontent属性插入的对象是匿名的可替换元素，它们不存在于 HTML 标记中，因此”匿名的”。

非替换元素

html 中大多数元素都是非替换元素，其内容在元素本身生成的框中生成。

元素的显示

• 替换元素

  • 可以增加行框高度，但不影响行高(line-height);
  • 内容区域高度值=padding-top + pagging-bottom + margin-top + margin-bottom + height;
  • 替换元素居中，可设置 line-height = height
  • 行内替换元素设置上下内边距，会撑开父元素。

• 非替换元素

  • 行内非替换元素，padding-top,padding-bottom,不影响行框高度，但内容区域高度会变化，也不会撑开父元素。
  • margin-top，margin-bottom,对行框没有影响
  • margin-left，margin-right,会影响非替换元素水平位置
  • 行内元素 设置 padding-left，padding-right，可见。
  • 行内非替换元素，不能设置垂直方向上的 margin 和 padding。