HTML的塊狀 內聯 內聯塊狀元素的特點

2021-09-26 13:33:44 字數 1167 閱讀 5976

元素分類及特點:

1.塊級元素:

在html中、 、、、和 就是塊級元素。設定display:block就是將元素顯示為塊級元素。塊級元素特點:

(1)、每個塊級元素都從新的一行開始,並且其後的元素也另起一行;(乙個塊級元素獨佔一行

(2)、元素的高度、寬度、行高以及頂和底邊距都可設定;

(3)、元素寬度在不設定的情況下,是它本身父容器的100%(和父元素的寬度一致),除非設定乙個寬度。

2.內聯元素:

在html中,、、、、和就是典型的內聯元素(行內元素)(inline)元素。當然塊狀元素也可 以通過**display:inline將元素設定為內聯元素。內聯元素特點:

(1)、和其他元素都在一行上;

(2)、元素的高度、寬度、行高及頂部和底部邊距不可設定;

(3)、元素的寬度就是它包含的文字或的寬度,不可改變。

注意:為 a 元素設定了寬和高,但都沒有起到作用,原因是a在預設的時候是內聯元素,內聯元素是不可以設定寬和高的

3.內聯塊狀元素:

內聯塊狀元素(inline-block)就是同時具備內聯元素、塊狀元素的特點,**display:inline-block就是將元素設定為內聯塊狀元素。inline-block元素特點:

(1)、和其他元素都在一行上;

(2)、元素的高度、寬度、行高以及頂和底邊距都可設定。

注意:img是inline元素,但是他同時也是替換元素,他有著特殊的表現:

1.可以設定width/height;

2. 預設的,img元素在螢幕佔據的空間與其的實際畫素一致,除非css有設定或者自身的width/height html 屬性有設定;

3. 如果img標籤的包裹元素為也為inline元素,則img的邊界可以超出其直接父元素的邊界,直到自己的寬、高達到最大或者設定值為止,而且文件流中img的兄弟元素也不能遮蓋住img。最常見的就是裡面包含的

4. 所以從行為上看,img元素作為替換元素,有著類似於inline-block的行為,儘管在spec裡面,他的確是乙個inline元素。

HTML的塊狀 內聯 內聯塊狀元素的特點

元素分類及特點 1.塊級元素 在html中 和 就是塊級元素。設定display block就是將元素顯示為塊級元素。塊級元素特點 1 每個塊級元素都從新的一行開始,並且其後的元素也另起一行 乙個塊級元素獨佔一行 2 元素的高度 寬度 行高以及頂和底邊距都可設定 3 元素寬度在不設定的情況下,是它本...

HTML的塊狀 內聯 內聯塊狀元素的特點

元素分類及特點 1.塊級元素 在html中 和 就是塊級元素。設定display block就是將元素顯示為塊級元素。塊級元素特點 1 每個塊級元素都從新的一行開始,並且其後的元素也另起一行 乙個塊級元素獨佔一行 2 元素的高度 寬度 行高以及頂和底邊距都可設定 3 元素寬度在不設定的情況下,是它本...

HTML的塊狀 內聯 內聯塊狀元素的特點

元素分類及特點 1.塊級元素 在html中 和 就是塊級元素。設定display block就是將元素顯示為塊級元素。塊級元素特點 1 每個塊級元素都從新的一行開始,並且其後的元素也另起一行 乙個塊級元素獨佔一行 2 元素的高度 寬度 行高以及頂和底邊距都可設定 3 元素寬度在不設定的情況下,是它本...