詳解內聯元素和塊元素

2021-07-02 15:40:22 字數 2089 閱讀 8300

《css權威指南》中文中:任何不是塊級元素的可見元素都是內聯元素。其表現的特性是「 行布局」形式,這裡的「行布局」的意思就是說其表現形式始終以行進行顯示。

block元素的特點:

1. 總是另起一行開始;

2. 高度,行高以及頂、底邊距都可控制;

3. 寬度預設是它所在容器的100%,除非設定乙個寬度。

inline元素的特點:

1. 和其它元素都在一行上;

2. 高度,行高以及頂、底邊距不可改變;

3. 寬度就是它所容納的文字或的寬度,不可改變。

說白了就是塊元素是以行為單位,緊接它的下乙個元素會另起一行,而在內聯元素後面的元素則不會另起一行。

然後就是關於巢狀問題,塊元素裡可以巢狀內聯元素,而內聯元素卻並不能隨意巢狀塊元素。例如天空晴朗不溫不火

不睡懶覺頁面會用三行來顯示,但這樣寫是錯誤的,w3c校驗也無法通過。哪些內聯元素不能巢狀塊元素?

有乙個區別標準挺好用,先把所有的塊元素再次劃分成幾個級別的,在最外層,下一級裡面有、、、,可視的元素只會出現在裡,所以我們把划在第乙個級裡面,接著,把不可以自由巢狀的元素劃在第三個級,其他的就歸進第二個級。所謂的不可自由巢狀的元素就是裡面只能放內聯元素的,它們包括有:標題標記的、、、、、、;段落標記的;分隔線和,只存在於的子一級。

塊元素(block element) html標籤分類明細

* address - 位址

* blockquote - 塊引用

* center - 舉中對齊塊

* dir - 目錄列表

* div - 常用塊級容易,也是css layout的主要標籤

* dl - 定義列表

* fieldset - form控制組

* form - 互動表單 (只能用來容納其它塊元素)

* h1 - 大標題

* h2 - 副標題

* h3 - 3級標題

* h4 - 4級標題

* h5 - 5級標題

* h6 - 6級標題

* hr - 水平分隔線

* isindex - input prompt

* menu - 選單列表

* noframes - frames可選內容,(對於不支援frame的瀏覽器顯示此區塊內容

* noscript - 可選指令碼內容(對於不支援script的瀏覽器顯示此內容)

* ol - 排序表單

* p - 段落

* pre - 格式化文字

* table - **

* ul - 非排序列表

內聯元素(inline element) 一般都是基於語義級(semantic)的基本元素,只能容納文字或者其它內聯元素。

* a - 錨點

* abbr - 縮寫

* acronym - 首字

* b - 粗體(不推薦)

* bdo - bidi override

* big - 大字型

* br - 換行

* cite - 引用

* code - 計算機**(在引用原始碼的時候需要)

* dfn - 定義字段

* em - 強調

* font - 字型設定(不推薦)

* i - 斜體

* img -

* input - 輸入框

* kbd - 定義鍵盤文字

* label - **標籤

* q - 短引用

* s - 中劃線(不推薦)

* samp - 定義範例計算機**

* select - 專案選擇

* small - 小字型文字

* span - 常用內聯容器,定義文字內區塊

* strike - 中劃線

* strong - 粗體強調

* sub - 下標

* sup - 上標

* textarea - 多行文字輸入框

* tt - 電傳文字

* u - 下劃線

* var - 定義變數

可變元素是基於以上兩者隨環境而變化的,它的基本概念就是根據上下文關係確定該元素是塊元素還是內聯元素。一旦確定了它的類別,它就遵循塊元素或者內聯元素的規則限制。

塊元素 內聯元素 內聯塊元素

元素就是標籤 在布局中常用標籤有三種 塊元素 內聯元素 內聯塊元素 1.塊元素也是行級元素 在布局中常用的標籤有 div p ul li h1 h6 dl dd dt等。在布局中的行為 如果不設定固定寬度預設百分之百,不設定高度 由內容撐起,獨佔一行 2.內聯元素也是行內元素 在布局中常用的標籤有 ...

塊元素 內聯元素 內聯塊元素

元素就是標籤,布局中常用的有三種標籤,塊元素 內聯元素 內聯塊元素,了解這三種元素的特性,才能熟練的進行頁面布局。塊元素 塊元素,也可以稱為行元素,布局中常用的標籤如 div p ul li h1 h6 dl dt dd等等都是塊元素,它在布局中的行為 內聯元素 內聯元素,也可以稱為行內元素,布局中...

塊元素 內聯元素 內聯塊元素

一 塊元素 行元素 div p ul li h1 h6 dl dt dd 盒子佔據一行 即使設定了寬度 支援全部的樣式 如果沒有設定寬度,預設的寬度為父級寬度100 二 內聯元素 行內元素 a span em b strong i 盒子並在一行 支援部分樣式 不支援寬 高 margin上下 padd...