HTML 標籤(元素)可以分為兩個類別,分別是區塊級元素和內嵌元素(也稱為行內元素)。
一、內聯元素(inline)
1.內聯元素的概念
內聯元素(html規範中的概念)英文:inline element,其中文叫法有多種,如:內聯元素、內嵌元素、行內元素、直進式元素等。基本上沒有統一的翻譯。另外提到內聯元素,通常會牽涉到的屬性是display:inline;這個屬性能夠修復著名的IE雙倍浮動邊界問題。
2.內聯元素的特性
①和相鄰的內聯元素在同一行;
②寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變;
③寬度就是它的文字或圖片的寬度,不可改變
④內聯元素只能容納文字或其他內嵌元素
對於行內元素的使用,需要注意以下幾點:
• 設定寬度width 無效;
• 設定高度height 無效,但可以透過line-height 來設定行高;
• 可設定margin 外邊距,但只對左右外邊距有效,上下無效;
• 設定padding 內邊距時,只有左右padding 有效,上下則無效,需要注意的是元素範圍是增大了,但是對元素周圍的內容是沒影響的;
• 可透過display 屬性將元素在行內元素和區塊級元素之間進行切換。
3. HTML標籤中常見的內嵌元素
二、區塊級元素(block)
1. 區塊級元素的概念
區塊級元素(block element),和其對應的是內聯元素(inline element),都是html規範中的概念。區塊元素和內聯元素的基本差異是區塊元素一般都從新行開始,相鄰的區塊級元素將會在不同行顯示。
2. 塊級元素的特性
①總是獨佔一行,表現為另起一行開始,而且其後的元素也必須另起一行顯示;
②寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)都可控制;
③如果省略區塊級元素的寬度,那麼它的寬度預設為目前瀏覽器視窗的寬度;
④區塊級元素中可以包含其它的內聯元素和區塊級元素。
3. HTML標籤中常見的區塊級元素