block inline 和inline-block 块级元素和内联元素

很是好的一篇文章布局

 

  1. block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素一般被现实为独立的一块,会单独换一行;inline元素则先后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。element

  2. 大致来讲HTML元素各有其自身的布局级别(block元素仍是inline元素):di

    • 常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。display

    • 常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。block

  3. block元素能够包含block元素和inline元素;但inline元素只能包含inline元素。要注意的是这个是个大概的说法,每一个特定的元素能包含的元素也是特定的,因此具体到个别元素上,这条规律是不适用的。好比 P 元素,只能包含inline元素,而不能包含block元素。play

  4. 通常来讲,能够经过display:inline和display:block的设置,改变元素的布局级别。文章

相关文章