行內元素 塊級元素 替換元素和非替換元素

2021-08-19 04:45:44 字數 894 閱讀 5213

css中對元素有兩種分類:

一、行內元素與塊級元素

這種分類一目了然

說到塊級元素,我們就能想到display: block,

說到行內元素,我們就能想到display: inline。

下面我們來看看這兩者的特點

塊級元素特點:

1. 預設獨自佔據一行,左右兩邊都沒有元素;

2. 可以設定寬高,在不設定寬度的情況下,預設為父元素的寬度一致。

常見的塊級元素:;

; 等等。

行內元素特點:

1. 左右兩邊都可以有元素,和其他元素在一行上;

2. 不可以設定寬高,其寬度就是內容的寬度。對margin僅設定左右方向有效,上下無效;padding設定上下左右都有效,但是padding上下對其他元素無影響。

常見的行內元素:; ;

二、替換元素與非替換元素

這種分類理解起來會抽象一些

替換元素:

替換元素是瀏覽器根據元素的標籤和屬性,來決定元素的具體顯示內容。

這是什麼意思呢?我們舉乙個例子就能理解:

img標籤,只寫這乙個標籤,不新增屬性,頁面上是顯示不出來你要的的,但是我們往img標籤裡面新增src,這時候頁面上就能顯示出你要的,src不同,頁面上顯示出來的內容也就不同。

同樣為替換元素的還有標籤,標籤等等

非替換元素:

理解了什麼是替換元素,理解非替換元素就很簡單了,他們將內容直接告訴瀏覽器,將其顯示出來

比如我們常用的標籤,瀏覽器直接會將標籤裡面的東西顯示出來。

而塊級元素與行內替換元素是可以設定寬高的,行內非替換元素無法設定寬高,但是行內元素和塊級元素一樣,都擁有盒子模型,行內元素在垂直方向的padding與margin是無效的。

行內元素和塊級元素 替換元素和不可替換元素

一般我們習慣性將html元素分為行內元素和塊級元素 行內元素 1.和其他元素都在一行 2.高度 寬度以及內邊距都是不可控的 3.寬高就是內容的高度,不可以改變 4.行內元素只能行內元素,不能包含塊級元素 5.行內元素的水平方向的padding left,padding right,margin le...

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

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

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

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