html 元素的分类和嵌套规则

1,064 阅读1分钟

学习总结:

html元素主要分为3类:

  • 块元素
  • 行元素
  • 行级块元素
  • 特殊字符

块元素

独立成一行,可以设置宽高,默认宽高100%,细分的话又可分为:

文字类:p, h1~h6

容器类:div, table, tr, td, th, form, ul, li, ol, dl, dt, dd

行元素

不独立成一行,不可以设置宽高,默认宽高由内容决定。

比如:a, img, input, strong, em, del, span

行级块元素

不独立成一行,可以设置宽高。它其实本质上还是块元素,只是不换行。我们这里主要就是想实现这样的功能:又不想换行,又要给它设置宽高。

实现方式:

display:inline-block;

当然,这样的效果用浮动也可以实现。

特殊字符

当作文字处理就好了。比如:br, &nbsp

嵌套规则

  1. 块元素可以嵌套行元素
  2. 行元素可以嵌套行元素
  3. 行元素不可以嵌套块元素
  4. 文字类块元素不可以嵌套块元素
  5. 容器类块元素可以嵌套块元素