行內(nèi)元素與塊級(jí)元素

行內(nèi)元素

常見行內(nèi)元素

a, br, map,img, span, button, input, label, select, textarea

b, big, i, small, tt, abbr, acronym, cite, code, dfn, em, kbd,strong, smap, var, bdo, object, q, script, sub, sup

特性

• 和其他元素都在同一行

• 高，行高，外邊距，內(nèi)邊距不可改變

• 寬度就是它的文字或圖片的寬度，不可改變

• 內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素

注意

• 設(shè)置寬度width 無效。
• 設(shè)置高度height 無效，可以通過line-height來設(shè)置。
• 設(shè)置margin 只有左右margin有效，上下無效。
• 設(shè)置padding 只有左右padding有效，上下則無效。注意元素范圍是增大了，但是對(duì)元素周圍的內(nèi)容是沒影響的。

塊級(jí)元素

常見塊級(jí)元素

ol output form p h1-h6 section header tabel div ul video

特性

• 霸占一行，不能與其他任何元素并列。
• 能接受寬高，如果不設(shè)置寬度，那么寬度將默認(rèn)變?yōu)楦讣?jí)的100%。
• 一般塊級(jí)元素可以包含行內(nèi)元素和其他塊級(jí)元素

轉(zhuǎn)換

display：inline 轉(zhuǎn)化為行內(nèi)元素

display：block轉(zhuǎn)化為塊級(jí)元素

display：inline-block 轉(zhuǎn)化為內(nèi)聯(lián)元素（不自動(dòng)換行，但可以設(shè)置高度和寬度）