CSS 基础篇（6）：HTML元素类型

[rhymecoding]

本篇为下一篇盒模型做准备。

HTML元素分为两种：块级元素(block-level)和内联级元素(inline-level)。

块级元素与display:block

块级元素与display:block并不是对应的，凡是独占一行的元素都算是块级元素，所以display:list-item/table也是块级元素。

利用块级元素独占一行的特性，结合伪元素可以清浮动

.clearfix::after {
  content: '';
  display: block; // 只要是块级元素就行，比如还可以是table
  clear: both;
}

块级元素与内联级元素的区别

1.块级元素独占一行；
2.块级元素可以设置width、height，内联级元素不行；
3.块级元素可以设置margin和padding，内联级元素只能设置水平方向的margin(margin-left、margin-right)和padding(padding-left、padding-right)；