元素的分类与转化

页面元素可以分为下面三种：块状元素、内联元素、内联块状元素。

• 块状元素
  常见块状元素：由HTML4的默认样式表可以看出来块状元素定义了这些：

    html, address,
    blockquote【块引用】,
    body, dd, div,
    dl, dt, fieldset【form控件组】, form,
    frame, frameset,
    h1, h2, h3, h4,
    h5, h6, noframes,
    ol, p, ul, center,
    dir, hr, menu【菜单】, pre   { display: block; unicode-bidi: embed }
  

特点：
- 块元素默认占据一行，宽度与父容器一致，高度为内容+padding的高度。
- 块元素可以通过设置margin和padding的值来控制块元素与其他元素的边距以及自身边框与内容的留白（内边距）。
- 块元素可以设置宽度和高度。
- 块元素设置高度，padding，margin会撑大父容器的文档流，当然这要在父容器没有设置固定高度的前提下。
实例：block.html

• 内联元素
  常见内联元素：在HTML4的默认样式表中没有显示设置display的元素为inline的都是内联元素，因为display的默认值就是inline。常用的有<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
  特点：

  • 和其他元素都在一行上。
  • 对行内元素设置高度相关的都是没有效果的，如设置margin-top，margin-bottom，height这些属性都是无效的,可以使用line-height来设置行与行之间的高度。
  • 行内元素设置padding的上下边距，并不会撑大父容器的文档流，但是会有效果,会覆盖了上下元素的内容。
  • 对行内元素设置宽度也是无效的，行内元素的宽度只有左右内边距和内容宽度来决定。
    实例：inline.html

• 内联块状元素
  常见内联块状元素：由HTML4的默认样式表可以看出来内联块状元素定义了这些：

    button, textarea,input, object,select { display:inline-block; }
  

特点：
- 行内块元素对其设置高度，宽度，padding和margin都是有效果的。
- 行内块元素不会独占一行，如果该行内块元素在设置完宽度、padding、margin之后，父容器后面的宽度还能够容的下第二元素，那么第二个元素就会与第一个元素同行显示，否则，另起一行。
- 两个同行显示的行内块元素，对其上下的元素的间隔距离，以其中最大的间距为主。
实例：inline-block.html
display属性有四个值可选，分别是block：块元素；inline：行内元素；inline-block：行内块元素；none：元素不显示。通过display的这些属性可以实现不同元素分类间的相互转化，并具有转化后的所有特点。