塊級元素和內聯元素的區別

2021-08-15 03:32:35 字數 1744 閱讀 1916

行級元素和塊級元素的其區別

1、塊級元素特點:

(1)總是在新行上開始,佔據一整行

(2)高度、行高以及外邊距和內邊距都可控制

(3)跨密度始終與瀏覽器寬度一致,與內容無關

(4)他可以容納內聯元素和其他塊元素

2、行級元素的特點:

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

(2)行高以及外邊距內邊距部分可變

(3)寬度只與內容有關

(4)行內元素只能容納文字或者其他行內元素

(5)不能設定寬高,其寬度隨內容增加,高度隨字型大小而改變。

(6)內聯元素可以設定外邊界,但部分有用,也可以設定內邊界,部分瀏覽器不支援。

3、常見的塊級元素和內聯元素

(1)內聯元素:

* 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 - 定義變數

(2)塊元素(block element)

* 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 - 非排序列表

塊級元素和內聯元素區別

在標準文件流裡面,塊級元素具有以下特點 總是在新行上開始,佔據一整行 高度,行高以及外邊距和內邊距都可控制 寬頻始終是與瀏覽器寬度一樣,與內容無關 它可以容納內聯元素和其他塊元素。行內元素的特點 和其他元素都在一行上 高,行高及外邊距和內邊距部分可改變 寬度只與內容有關 行內元素只能容納文字或者其他...

塊級元素和內聯元素

我們首先要了解,所有的html元素,都要麼是block 塊元素 要麼是inline 內聯元素 下面了解一下block inline各自的特點 block元素的特點 example source code www.52css.com 總是在新行上開始 高度,行高以及頂和底邊距都可控制 寬度預設是它的容...

塊級元素和內聯元素

塊級元素和內聯元素 塊級元素 譯為 block level element,內聯元素 譯為 inline element。塊級元素在瀏覽器顯示時,通常會以新行來開始 和結束 例子 內聯元素在顯示時通常不會以新行開始。例子 html 分組標籤 定義文件中的分割槽或節 division section ...