行内元素与块元素，H5的内容模型

inline，block，inline-block的区别

HTML 标准中块级元素和行内元素的区别至高出现在 4.01 标准中。在 HTML5，这种区别被一个更复杂的内容类别 (en-US)代替。”块级“类别大致相当于 HTML5 中的Flow content类别，而”行内“类别相当于 HTML5 中的Phrasing content类别，不过除了这两个还有其他类别。

一般情况下，行内元素只能包含数据和其他行内元素。行内元素适合显示具体内容，一般是内容的容器。

而块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构，适合做布局。

块级元素(block)

  • 块级元素占据其父元素（容器）的整个水平空间，垂直空间等于其内容高度，因此创建了一个“块”。

  • 可以设置宽高。即使设置宽度也还是独占一行。当块级元素没有明确指定 width 和 height 值时，块级元素尺寸由内容确定，当指定了 width 和 height 的值时，内容超出块级元素的尺寸就会溢出，这时块级元素要呈现什么行为要看其 overflow 的值（visible,hidden,overflow,scroll)

  • 可以设置margin和padding属性。

举例：

h1-h6、div、p、table、ul、ol、form、dl、dd、hr、address、pre、blockquote、fieldset

（HTML5）header、footer、article、aside、section、hgroup、figure、figcaption

行内元素(inline)

  • 可以多个标签存在一行
  • 对宽高属性值不生效，完全靠内容撑开宽高。
  • 水平方向的margin和padding如margin-left、padding-right可以产生边距效果，但是竖直方向的margin-top、margin-bottom不起作用。
  • 行内元素的padding-top和padding-bottom会起作用，不过就像脱离了标准流一样，并不会占据位置，并且还把其他元素给盖住了。但是，假如inline的元素没有内容，“padding-top、padding-bottom“将不起作用。如果想要起作用，只需要给padding-left或者padding-right设置一个值，或者当inline的元素有内容时就会起作用。

举例：

b, big, i, small, tt abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var a, bdo, br, img, map, object, q, script, span, sub, sup button, input, label, select, textarea

行内块元素(inline-block)

  • 结合的行内和块级的特点，既可以设置宽高，又可以和其他行内元素并排。

  • 当inline-block碰到同类（inline-block)时，谁的上下margin、padding或line-height大，就听谁的。除非它是inline，因为inline的竖直方向margin是不起作用的，且inline的竖直方向padding是不占空间的。

  • inline和inline-block会引起间距的空格。这个间距是有空格或换行导致的。解决方法一：将空格直接删除，放到一行

行内元素与块状元素之间的转换:

  • float: 当把行内元素设置完float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。行内元素去除了之间的空白。
  • position: 当为行内元素进行定位时，position:absolute与position:fixed，都会使得原先的行内元素变为块级元素。
  • display:
    • 块级标签转换为行内标签：display:inline;
    • 行内标签转换为块级标签：display:block;
    • 转换为行内块标签：display:inline-block;

H5的内容模型

每一个HTML元素都必须遵循定义了它可以包含哪一类内容的规则。 这些规则被归类为几个常见的元素内容模型（content model）。每个HTML元素都属于0个、1 个或多个内容模型，每个模型都有一些规则使得元素中的内容必须遵循一个HTML规范文档( HTML-conformant document)。

以下是三种类型的内容分类：

  • 主内容类，描述了很多元素共享的内容规范；
  • 表单相关的内容类，描述了表单相关元素共有的内容规范；
  • 特殊内容类，描述了仅仅在某些特殊元素上才需要遵守的内容规范，通常这些元素都有特殊的上下文关系。

Hw27z4.png

元数据内容 Metadata content

属于元数据内容类别的元素修改文档其余部分的表示或行为，设置到其他文档的链接，或传递其他带外信息。

属于这一类的元素是

<link>、<meta>、<script>、<style>、title……

流内容 Flow content

流内容是一个很广泛的类别，它包含了可以放在<body>元素中的大多数元素，包括标题元素(heading elements)、分段元素(sectioning elements)、短语元素(phrasing elements)、嵌入元素(embedding elements)、交互元素(interactive elements)和表单相关元素(form-related elements)。它还包括文本节点(但不包括那些只包含空白字符的文本节点)。

流元素是：

<a>、<article>、<br>、<button>、<div>、<form>、<h1>、<header>、<img>、<input>、<span>、<strong>…….

分段内容 Sectioning content

分段内容是流内容的一个子集，可以在流内容预期的任何地方使用。属于分段内容模型的元素在当前大纲中创建一个分段，该分段定义了<header>元素、<footer>元素和标题内容heading content的范围。

属于此类别的元素是

<article>、<aside>、<nav>、<section>

标题内容 Heading content

标题内容是流内容的一个子集，它定义了节的标题，无论是由显式的分段内容(sectioning content)元素标记，还是由标题内容本身隐式定义。标题内容可以在流内容预期的任何地方使用。

属于此类别的元素是

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<hgroup>

注意：

  • 虽然可能包含标题内容，但<header>本身不是标题内容。
  • 不建议使用<hgroup>元素，因为它无法与辅助技术正常工作。在HTML 5最终确定之前，它已经从W3C HTML规范中移除，但仍然是WHATWG规范的一部分，大多数浏览器至少部分支持它。

短语内容 Phrasing content

短语内容是流内容的子集，定义文本和它包含的标记，并且可以在预期流内容中使用。短语内容的运行构成段落。

属于这一类的元素有

<b>、<button>、<i>、<iframe>、<span>、<textarea>、<video>……

嵌入内容 Embedded content

嵌入内容是流内容的子集，可以将另一种资源导入或将另一种标记语言或名称空间中的内容插入到文档中，并且可以在流内容需要的任何地方使用它。属于这个类别的元素包括

<audio>、<canvas>、<embed>、<iframe>、<img>、<math>、<object>、<picture>、<svg>、<video>

交互内容 Interactive content

交互内容是流内容的子集，其中包括专门为用户交互设计的元素，可以在流内容预期的任何地方使用。属于这个类别的元素包括:<a>， <button>， <details>， <embed>， <iframe>， <label>， <select>，和<textarea>。

可触知的内容 Palpable content

当内容不是空的或隐藏的时候，它是可触摸的;它是呈现的内容，是实质性的。以流内容为模型的元素至少应该有一个可触及的节点。

表单相关内容 Form-associated content

与表单相关的内容是由具有表单所有者的元素组成的流内容的子集，这些元素由表单属性公开，可以在流内容预期的任何地方使用。表单所有者要么是包含<form>元素的元素，要么是id在form属性中指定的元素。