行內元素和塊級元素詳解

2021-06-23 09:06:44 字數 674 閱讀 2194

在標準文件流裡面,塊級元素具有以下特點:

1、總是在新行上開始,佔據一整行;

2、高度,行高以及外邊距和內邊距都可控制;

3、寬頻始終是與瀏覽器寬度一樣,與內容無關;

4、它可以容納內聯元素和其他塊元素。

5、浮動後的元素相當於inline-block.

行內元素的特點:

①和其他元素都在一行上;

②高,行高及外邊距和內邊距部分可改變;

③寬高只與內容有關;

④行內元素只能容納文字或者其他行內元素。

不可以設定寬和高,其寬高度隨著內容增加,字型大小而改變,內聯元素可以設定內外邊界,但是內邊界和外邊界不對上下起作用,只能對左右起作用。

要設定行內元素的寬和高有兩種方法:

一、變成塊級元素:display:block;

二、對span成功設定寬度和高度同時與前後內容緊貼不換行,在css2.1標準中為display增加了乙個叫inline-block的屬性值,剛好可以實現即是inline物件,又可以像block那樣設定寬度的屬性值,這個屬性值在ie6以上版本都有效,firefox要在3.0以後才行,如果要相容2.0的朋友可以使用-moz-inline-box達到同樣的效果。

例:

divcss5 span上我在span標籤內span外

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

而標籤的屬性是可以轉換的 display inline 轉換為行內元素 display linline block 轉換為行內塊元素 display block 轉換為塊級元素。行內元素 無法設定寬高 margin和padding上下無效,只有左右有效果 總是和相鄰的行內元素在同一行上,預設排列方式...

行內元素和塊級元素詳解

行內元素和塊級元素,一般大家都這嘛說,其實有好多細節呢 你造嗎?一 塊級元素和塊元素 1.塊級元素是那些視覺上會被格式化成塊狀的元素,通俗一點來說就是那些會換新行的元素。display屬性的 block,list item,table,flex,grid值都可以將乙個元素設定成塊級元素 2.塊元素是...

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

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