html 塊級元素 與 行級元素

2021-07-24 12:38:34 字數 1636 閱讀 2842

**:

一、塊級元素:block element

每個塊級元素預設佔一行高度,一行內新增乙個塊級元素後無法一般無法新增其他元素(float浮動後除外)。兩個塊級元素連續編輯時,會在頁面自動換行顯示。塊級元素一般可巢狀塊級元素或行內元素;

塊級元素一般作為容器出現,用來組織結構,但並不全是如此。有些塊級元素,如只能包含塊級元素。其他的塊級元素則可以包含 行級元素如.也有一些則既可以包含塊級,也可以包含行級元素。

div 是最常用的塊級元素,元素樣式的display:block都是塊級元素。它們總是以乙個塊的形式表現出來,並且跟同級的兄弟塊依次豎直排列,左右撐滿。

二、行內元素:inline element

也叫內聯元素、內嵌元素等;行內元素一般都是基於語義級(semantic)的基本元素,只能容納文字或其他內聯元素,常見內聯元素 「a」。比如 span 元素,iframe元素和元素樣式的display : inline的都是行內元素。例如文字這類元素,各個字母 之間橫向排列,到最右端自動折行。

三、block(塊)元素的特點

①、總是在新行上開始;

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

③、寬度預設是它的容器的100%,除非設定乙個寬度。

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

四、inline元素的特點

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

②、高,行高及外邊距和內邊距不可改變;

③、寬度就是它的文字或的寬度,不可改變

④、內聯元素只能容納文字或者其他內聯元素

對行內元素,需要注意如下

五、常見的塊狀元素

六、常見的內聯元素

七、行內元素與塊級元素有什麼不同?

區別一:

塊級:塊級元素會獨佔一行,預設情況下寬度自動填滿其父元素寬度

行內:行內元素不會獨佔一行,相鄰的行內元素會排在同一行。其寬度隨內容的變化而變化。

區別二:

塊級:塊級元素可以設定寬高

行內:行內元素不可以設定寬高

區別三:

塊級:塊級元素可以設定margin,padding

行內:行內元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是豎直方向的margin-bottom; margin-top; padding-top; padding-bottom;卻不能生效。

區別四:

塊級:display:block;

行內:display:inline;

可以通過修改display屬性來切換塊級元素和行內元素

HTML 塊級元素與行級元素

一 行內元素與塊級元素 塊級元素列表 定義位址 定義 標題 定義列表中定義條目 定義文件中的分割槽或節 定義列表 定義列表中的專案 定義乙個框架集 建立 html 表單 定義最大的標題 定義副標題 定義標題 定義標題 定義標題 定義最小的標題 建立一條水平線 元素為 fieldset 元素定義標題 ...

HTML塊級元素與行級元素

一.兩種型別 html中的大部分元素都可分為兩種型別 塊級元素和行級元素。這些元素的型別是通過文件型別定義 dtd 來指明。塊級元素會從新的一行出現,行 級元素則不會。塊級元素的前後都會有插入的斷行,所以如果不用css則沒法讓兩個塊級元素並列在一起。二.塊級元素 塊級元素一般作為容器出現,用來組織結...

行級元素 塊級元素

一.元素分類 行間元素 inline span,strong,em,a,del 塊級元素 block div,p,h1 h6,ul,ol,li,form,address 行塊級元素 inline block img 1.行間元素 內容決定元素所在位置,不可以通過css改變寬高。1234 設定的寬高無...