塊元素和行內元素的說明及轉換

2021-09-20 01:10:00 字數 1516 閱讀 6341

行內元素(inline element),又叫內聯元素,內聯元素只能容納文字或者其他內聯元素,常見的行內元素,.

塊元素(block element),塊元素一般都是從新行開始,可以容納文字,其他內聯元素和其它塊元素.

即使內容不能佔滿一行,塊元素也要把整行佔滿.常見塊元素,.

通常使用div或者span這些沒有實際意義的標籤來指定某段html樣式:

div用於大段html;

span則一般用於小段文字.

例項**:

這是乙個span元素hello world

這是乙個段落標籤

hello world

效果如下:

塊元素和行內元素的區別:

1.行內元素只佔內容的寬度,塊元素內容不管內容多少佔全行

2.行內元素一般放文字和其它行內元素,塊元素放文字,行內元素和塊元素.

3.一些css屬性對行內元素不生效,比如weight,height,margin,left,right等,建議盡量使用塊元素定位.

分別對上面的行內元素和塊元素新增尺寸,修改後的**如下:

這是乙個span元素hello world

這是乙個段落標籤

hello world

重新整理瀏覽器後的效果如下:

可以看到,對行內元素新增的尺寸確實沒有生效.

現在再來把行內元素轉為塊元素,看看效果:

這是乙個span元素hello world

這是乙個段落標籤

hello world

轉換後的效果如下:

把塊元素轉換為行內元素,修改後的**如下:

這是乙個span元素hello world

這是乙個段落標籤

hello world

效果如下:

總結:

把行內元素轉換為塊元素,使用display:block;

把塊元素轉換為行內元素,使用display:inline.

對於塊元素及行內元素及行內塊元素的理解

html中的三類元素 個人見解,希望大佬多多指正,批評指正 2,行內元素 inline 例如 a,strong,b,em,i,span等等,其中span為最典型行內元素。特點 1,不可設定寬高,但他們可以這是水平方向的padding值和margin值 2,新的元素會緊緊相鄰,之間沒有間隙 3,靠自身...

行內元素 塊級元素和行內塊元素

a 標籤定義鏈結 b 字型加粗 br 換行 i 斜體文字效果 img 在網頁中嵌入 input 輸入框 span 組合文件中的行內元素 small 呈現小號字型效果 big 呈現大號字型效果 sub 定義下標文字 sup 定義上標文字 div 定義文件中的分割槽或節 dl 定義列表 dt 定義列表中...

塊級元素 行內元素和行內塊元素

每個塊元素通常都會獨自佔據一整行或多整行,可以對其設定寬度 高度 對齊等屬性,常用於網頁布局和網頁結構的搭建。行內元素的特點 1 和相鄰行內元素在一行上。2 高 寬無效,但水平方向的padding和margin可以設定,垂直方向的無效。3 預設寬度就是它本身內容的寬度。4 行內元素只能容納文字或則其...