HTML文档流与元素类型基本介绍

148 阅读2分钟

1. 文档流

  • 标准文档流

    标准文档流指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式。并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素。

    一些微观表现:

    (1) 行元素(包括行内块)间的缝隙现象

    (2)高矮不齐,底边对齐

    (3)自动换行,一行写不完时,换行写

标准文档流分为两种等级:块级元素行内元素;另外还有一种两种结合的行内块(内联块)元素(不属于标准文档流)

  • 溢出文档流

    由overflow属性效果决定

  • 脱离文档流

    脱离文档流的元素是不会被父元素计算高度的。且脱离文档流的元素会拥有块级元素的特点

    脱离文档流方法: (1)position:absolute; 或者 position:fixed; (2)float:left; 或者 float: right;

2. 行元素

常见默认行元素类型的标签主要有span ,strong,em等。其主要特点如下:

  1. 不可设置元素宽,高相关属性。默认宽高为自身所包内容的宽高度(高度主要由line-height决定)。
  2. margin外边距只对左,右方向生效。
  3. padding内边距只对左,右方向生效。
  4. 与其他行元素(包括行内块元素)在同一行
  5. 与同行元素排列时元素间会默认存在间隙(幽灵空白节点)。
  6. 可通过设置css属性display:inline将其他类型元素转为行元素。

3. 块元素

常见默认块元素类型的标签主要有div,p,h1~h6,table,form等。其主要特点如下:

  1. 可设置元素宽高相关属性。默认宽度为父元素宽度(所以这种情况下不要重复设置width:100%)。
  2. margin,padding属性各方向都有效。
  3. 每个块元素默认独占一行。
  4. 可通过设置css属性display:block将其他类型元素转为块元素。

4.行内块元素

常见默认行内块元素类型的标签主要有img,input,td等。其主要特点如下:

  1. 可设置宽高相关属性,默认为自身内容宽高度。
  2. 与其他行元素(包括行内块元素)在同一行。
  3. margin,padding属性各方向都有效。
  4. 与同行元素排列时元素间会默认存在间隙(幽灵空白节点)。
  5. 可通过设置css属性display:inline-block将其他类型元素转为行内块元素。