塊級(jí)元素
每個(gè)塊級(jí)元素通常都會(huì)獨(dú)占一行或者是多行挂捻,可以對(duì)其單獨(dú)設(shè)置高度,寬度以及對(duì)齊等屬性缩搅。
常見的塊級(jí)元素有:<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li> 等
塊級(jí)元素的特點(diǎn):
- 塊級(jí)元素會(huì)獨(dú)占一行
- 高度弓摘,行高陨瘩,外邊距和內(nèi)邊距都可以單獨(dú)設(shè)置
- 寬度默認(rèn)是容器的100%
- 可以容納內(nèi)聯(lián)元素和其他的塊級(jí)元素
行內(nèi)元素
行內(nèi)元素(內(nèi)聯(lián)元素):不占有獨(dú)立的區(qū)域娜膘,僅僅依靠自己的字體大小或者是圖像大小來支撐結(jié)構(gòu)逊脯。一般不可以設(shè)置寬度,高度以及對(duì)齊等屬性竣贪。
常見的行內(nèi)元素有:<a>,<strong>,<b>,<em>,<del>,<span>等
行內(nèi)元素的特點(diǎn):
- 和相鄰的行內(nèi)元素在一行上
- 高度和寬度無效军洼,但是水平方向上的padding和margin可以設(shè)置巩螃,垂直方向上的無效
- 默認(rèn)的寬度就是它本身的寬度
- 行內(nèi)元素只能容納純文本或者是其他的行內(nèi)元素(a標(biāo)簽除外)
注意:
1.只有文字才能組成段落,因此類似<p>,<h1>~<h6>,<dt>等里面不能放塊級(jí)元素匕争;因?yàn)樗鼈兌际俏淖謮K級(jí)標(biāo)簽避乏,里面不能再存放其他的塊級(jí)標(biāo)簽。
2.鏈接里面不能再存放鏈接
行內(nèi)塊級(jí)元素
在行內(nèi)元素中有幾個(gè)特殊的標(biāo)簽甘桑,<img/>,<input/>,<td/>,可以設(shè)置它們的寬高度以及對(duì)齊屬性
行內(nèi)塊級(jí)元素的特點(diǎn):
- 和相鄰的行內(nèi)元素(行內(nèi)塊)在一行上拍皮,但是中間會(huì)有空白的間隙
- 默認(rèn)的寬度就是本身內(nèi)容的寬度
- 高度,行高跑杭,內(nèi)邊距和外邊距都可以設(shè)置
顯示模式的轉(zhuǎn)換:
塊轉(zhuǎn)行內(nèi):display:inline;
行內(nèi)轉(zhuǎn)塊:display:block;
塊,行內(nèi)元素轉(zhuǎn)換為行內(nèi)塊:display:inline-block
以上內(nèi)容來自:原文鏈接