CSS-元素顯示模式及其轉換 隨學筆記
阿新 • • 發佈：2021-10-24
首先，什麼是元素顯示模式？
一、元素顯示模式
元素顯示模式就是元素（標籤）以什麼方式進行顯示，比如<div>自己佔一行，比如一行可以放多個<span>。 作用：網頁的標籤非常多，在不同的地方會用到不同型別的標籤，瞭解他們的特點可以很好的佈局我們的網頁。 HTML元素一般分為塊元素和行內元素兩種型別。1.塊元素：
常見的塊元素有<h1>~<h6> <p> <div> <ul> <ol> <li>等，其中<div>是最典型的塊元素。 塊級元素的特點： 1.比較霸道，自己獨佔一行； 2.高度、寬度、外邊距以及內邊距都可以控制； 3.寬度預設是容器（父級寬度）的100%； 4.是一個容器及盒子，裡面可以放行內或者塊級元素。 注意：文字類元素內不能使用塊級元素； <p>標籤主要用於存放文字，因此<p>裡不能放塊級元素，特別是不能放<div>； 同理，<h1>~<h6>等都是文字類塊級標籤，裡面也不能放其他塊級元素。 2.行內元素： 行內元素 常見的：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>標籤是最典型的行內元素，有的地方也將行內元素稱為內聯元素。 行內元素的特點： 1.相鄰行內元素在一行上，一行可以顯示多個； 2.高、寬直接設定是無效的； 3.預設寬度就是它本身內容的寬度； 4.行內元素只能容納文字或其他行內元素。 注意： 連結裡不能再放連結； 特殊情況連結<a>裡面可以放塊級元素，但是給<a>轉換一下塊級模式最安全。 除這兩種之外，還有一種特殊的元素顯示模式，行內塊元素： 在行內元素中有幾個特殊的標籤---<img/>、<input/>、<td>,它們同時具有塊元素和行內元素的特點，有些資料稱他們為行內塊元素。 行內塊元素的特點： 1.和相鄰行內元素（行內塊）在一行上，但是他們之間會有空白縫隙。一行可以顯示多個（行內元素特點）； 2..預設寬度就是它本身內容的寬度（行內元素的特點）； 3.高度，行高、外邊距以及內邊距都可以控制（塊級元素的特點）。 二、元素顯示模式的轉換 特殊情況下，我們需要元素模式的轉換，簡單理解：一個模式的元素需要另外一種模式的特性，比如增加<a>連結的觸發範圍。 方法： 轉換為塊元素：display:block; 轉換為行內元素：display:inline; 轉換為行內塊元素：display:inline-block;<!--把行內元素a轉換為塊級元素 --> <style> a { width: 150px; height: 100px; background-color: aquamarine; display: block; } /* 把塊級元素轉換為行內元素 */ div { width: 300px; height: 150px; background-color: bisque; display: inline; } /*轉換為行內塊 */ span { width: 300px; height: 50px; background-color: brown; display: inline-block; } </style> </head> <body> <a href="#">1111</a> <div> 我是塊級元素 </div> <span>行內元素轉換為行內塊元素</span></body>