html 中 行内元素, 块状元素和行内块状元素的区别

html 中 行内元素 和 块状元素的区别

    • 1. 代码
    • 2. 设置
      • 2.1 行内元素
      • 2.2 块状元素
      • 2.3 行内块状元素

1. 代码

/* 行内元素 */
display: inline;

/* 块状元素 */
display: block;

/* 行内块状元素 */
display: inline-block;

2. 设置

2.1 行内元素

最常行内元素: span, a, label, i, sub, sup, button, input, label, select, textarea 等等.

特征:

  1. 设置宽高无效
  2. 对 margin 仅设置左右方向有效, 上下无效; padding 设置上下左右都有效, 有点标签上下设置显示无效
  3. 不会自动进行换行

2.2 块状元素

最常块状元素: div, p, form, ul, ol, table, hr, br, h1 等等.

特征:

  1. 能够识别宽高
  2. 对 margin 和 padding 的上下左右均对其有效
  3. 多个块状元素标签写在一起, 默认排列方式为从上至下

2.3 行内块状元素

特征:

  1. 不自动换行
  2. 能够识别宽高
  3. 默认排列方式为从左到右

你可能感兴趣的:(前端)