標籤顯示模式

2022-08-11 16:30:14 字數 1466 閱讀 6478

html標籤一般分為塊標籤和行內標籤兩種型別,它們也稱塊元素和行內元素。具體如下:

塊級元素(block-level)

每個塊元素通常都會獨自佔據一整行或多整行,可以對其設定寬度、高度、對齊等屬性,常用於網頁布局和網頁結構的搭建。

常見的塊元素有、、

、等,其中標籤是最典型的塊元素。

1.總是從新行開始(獨佔一行)

2.高度,行高、外邊距以及內邊距都可以控制(可以自己設定寬高)

3.寬高預設是容器的100%

4.可以容納內聯元素和其他塊元素。

行內元素(inline-level)

行內元素(內聯元素)不占有獨立的區域,僅僅靠自身的字型大小和影象尺寸來支撐結構,一般不可以設定寬度、高度、對齊等屬性,常用於控制頁面中文字的樣式。

常見的行內元素有、、、、、、、、、等,其中標籤最典型的行內元素。
行內元素的特點:

1.和相鄰行內元素在一行上(共行顯示)

2.高、寬無效,但水平方向的padding和margin可以設定,垂直方向的無效。

3.預設寬度就是它本身內容的寬度。

4.行內元素只有容納文字或則其他行內元素。(a特殊)

注:

1. 只有 文字才 能組成段落  因此 p  裡面不能放塊級元素,同理還有這些標籤h1,h2,h3,h4,h5,h6,dt,他們都是文字類塊級標籤,裡面不能放其他塊級元素。

2. 鏈結裡面不能再放鏈結。

塊級元素和行內元素區別
塊級元素的特點:

1.總是從新行開始

2.高度,行高、外邊距以及內邊距都可以控制

3.寬高預設是容器的100%

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

行內元素的特點:

1.和相鄰行內元素在一行上

2.高、寬無效,但水平方向的padding和margin可以設定,垂直方向的無效

3.寬高預設就是它本身內容的寬度

4.行內元素只能容納文字或則其他行內元素

行內塊元素(inline-block)
在行內元素中有幾個特殊的標籤——、、,可以對它們設定寬高和對齊屬性,有些資料可能會稱它們為行內塊元素。

行內塊元素的特點:

(1)和相鄰行內元素(行內塊)在一行上,但是之間會有空白縫隙。

(2)預設寬度就是它本身內容的寬度。

(3)高度,行高、外邊距以及內邊距都可以控制。

標籤顯示模式轉換display
塊轉行內: display: inline;

行內轉塊: display: block;

塊、行內元素轉換為行內塊: display:inline-block;

標籤顯示模式

1.簡介 標籤顯示模式是標籤以什麼方式進行顯示。html標籤一般分為塊標籤和行內標籤兩種型別,它們也稱為塊元素和行內元素。2.塊級元素 block level 常見的塊元素有 3.行內元素 inline level 有的地方也稱為內聯元素常見的行內元素有 等,其中標籤最典型的行內元素。注意 4.行內...

css標籤顯示模式

1.1.1 塊級元素 block level 常見的塊級元素 等,其中標籤是典型的塊元素。塊級元素的特點 1 比較霸道,自己獨佔一行 2 高度,寬度,外邊距和內邊距都可以控制 3 寬度預設是父元素寬度的100 4 是乙個容器及盒子,裡面可以放行內或者塊級元素 1.1.2 行內元素 inline le...

標籤顯示模式 display

1 塊級元素 block 常見得塊級元素有 1.自己獨佔一行 2.可以設定寬度和高度,外邊距以及內邊距都可以控制 3.寬度預設是容器 父級寬度 得100 2 行內元素 inline 常見的行內元素有 等1.一行可以顯示多個行內元素 2.高度和寬度直接設定是無效得 3.預設寬度就是他本身內容得寬度 3...