瞭解元素的顯示模式可以更好的讓我們佈局頁面.

1. 什麼是元素的 顯 示 模 式
2. 元素顯示模式 的 分類
3. 元素顯示模式 的 轉換
2.1 什麼是元素顯示模式
作用：網頁的標籤非常多，在不同地方會用到不同型別的標籤，瞭解他們的特點可以更好的佈局我們的網頁。

元素顯示模式就是元素（標籤）以什麼方式進行顯示，比如<div>自己佔一行，比如一行可以放多個<span>。 HTML 元素一般分為塊元素和行內元素兩種型別。

2.2 塊元素
常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中 <div> 標籤是最典型的塊元素。 塊級元素的特點：

① 比較霸道，自己獨佔一行。

② 高度，寬度、外邊距以及內邊距都可以控制。

③ 寬度預設是容器（父級寬度）的100%。

④ 是一個容器及盒子，裡面可以放行內或者塊級元素。

注意：

文字類的元素 內 不 能 使 用 塊級 元素
<p> 標籤主要用於存 放 文 字 ， 因 此 <p> 裡面不能放塊級 元 素 ， 特 別 是 不 能 放 <div>
同理， <h1>~<h6> 等 都 是 文 字 類 塊 級 標 籤 ， 裡 面 也 不 能 放 其 他 塊 級 元素
2.2 行內元素
常見的行內元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中

<span> 標籤是最典型的行內元素。有的地方也將行內元素稱為內聯元素。

行內元素的特點：

① 相鄰行內元素在一行上，一行可以顯示多個。

② 高、寬直接設定是無效的。

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

④ 行內元素只能容納文字或其他行內元素。

注意：

連結裡面不能再放連結

特殊情況連結 <a> 裡面可以放塊級元素，但是給 <a> 轉換一下塊級模式最安全

2.3 行內塊元素
在行內元素中有幾個特殊的標籤 —— <img />、<input />、<td>，它們同時具有塊元素和行內元素的特點。 有些資料稱它們為行內塊元素。

行內塊元素的特點：

① 和相鄰行內元素（行內塊）在一行上，但是他們之間會有空白縫隙。一行可以顯示多個（行內元素特點）。

② 預設寬度就是它本身內容的寬度（行內元素特點）。

③ 高度，行高、外邊距以及內邊距都可以控制（塊級元素特點）。

2.4 元素顯示模式總結

學習元素顯示模式的主要目的就是分清它們各自的特點，當我們網頁佈局的時候，在合適的地方用合適的標籤元素。

2.5 元素顯示模式轉換
特殊情況下，我們需要元素模式的轉換，簡單理解: 一個模式的元素需要另外一種模式的特性

比如想要增加連結 <a> 的觸發範圍。

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

2.6 一個小工具的使用 snipaste
Snipaste 是一個簡單但強大的截圖工具，也可以讓你將截圖貼回到螢幕上.

常用快捷方式:

1.F1 可以截圖. 同時測量大小, 設定箭頭 書寫文字等

2. F3 在桌面置頂顯示
3. 點選圖片 , alt 可以取色 ( 按下 shift 可以切換取色 模 式 )
4. 按下 esc 取消圖片顯示
2.7 一個小技巧 單行文字垂直居中的程式碼
CSS 沒有給我們提供文字垂直居中的程式碼. 這裡我們可以使用一個小技巧來實現.

解決方案: 讓文字的行高等於盒子的高度 就可以讓文字在當前盒子內垂直居中

2.8 單行文字垂直居中的原理

原文連結：https://blog.csdn.net/qq_57587705/article/details/124272948

搜尋

複製