浅谈：block、inline和inline-block

浅谈：block、inline和inline-block

总体概念

1、block：block-level elements（块级元素）和 inline：inline elements （内联元素）是 HTML 元素的 display 属性，是 HTML 元素的布局形式。block 元素通常被实现为独立的一块，此类元素的前后会带有换行符；inline 元素通常都是在同一行显示（当该行排满后换行显示），其单个元素的前后不会产生换行符。

2、根据 CSS 规定，每一个 HTML 元素都有一个 display 属性（也就是自身布局），用于确定该元素的类型，每一个元素都具有默认的 display 属性值。比如 div 元素，它的默认 display 属性值为“block”；span 元素，它的默认 display 属性值为“inline”。

3、常见 HTML 元素的默认 display 属性值：

• 常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
• 常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。
• 常见的行内块元素有 IMG, INPUT, TD, SELECT, TEXTAREA, LABEL等。

4、block 元素可以包含 block 元素和 inline 元素；但 inline 元素只能包含 inline