元素顯示模式
前言
了解元素的顯示模式可以更好的讓我們布局頁面。了解顯示模式需要學習以下三個方面
-
什么是元素的顯示模式
-
元素顯示模式的分類
-
元素顯示模式的轉換
什么是元素顯示模式
元素顯示模式就是元素（標簽）以什么方式進行顯示，比如<div>自己占一行，比如一行可以放多個<span>。
HTML 元素一般分為塊元素和行內元素兩種類型。
網頁的標簽非常多，在不同地方會用到不同類型的標簽，了解他們的特點可以更好的布局我們的網頁。
塊元素
常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div> 標簽是最典型的塊元素。
塊級元素的特點：
① 比較霸道，自己獨占一行。
② 高度，寬度、外邊距以及內邊距都可以控制。
③ 寬度默認是容器（父級寬度）的100%。
④ 是一個容器及盒子，里面可以放行內或者塊級元素。
注意：
- 文字類的元素內不能使用塊級元素，
<p>標簽主要用於存放文字，因此<p>里面不能放塊級元素，特別是不能放<div>，同理，<h1>~<h6>等都是文字類塊級標簽，里面也不能放其他塊級元素
行內元素
常見的行內元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中
<span> 標簽是最典型的行內元素。有的地方也將行內元素稱為內聯元素。
行內元素的特點：
① 相鄰行內元素在一行上，一行可以顯示多個。
② 高、寬直接設置是無效的。
③ 默認寬度就是它本身內容的寬度。
④ 行內元素只能容納文本或其他行內元素
注意：
-
鏈接里面不能再放鏈接
-
特殊情況：鏈接
<a>里面可以放塊級元素，但是給<a>轉換一下塊級模式最安全
行內塊元素
在行內元素中有幾個特殊的標簽 —— <img/>、<input/>、<td>，它們同時具有塊元素和行內元素的特點。
有些資料稱它們為行內塊元素。
行內塊元素的特點：
① 和相鄰行內元素（或行內塊元素）可以在一行上，但是他們之間會有空白縫隙。一行可以顯示多個（行內元素特點）。
② 默認寬度就是它本身內容的寬度（行內元素特點）。
③ 高度，行高、外邊距以及內邊距都可以控制（塊級元素特點）。
元素顯示模式總結
元素顯示模式轉換
特殊情況下，我們需要元素模式的轉換，簡單理解: 一個模式的元素需要另外一種模式的特性比如想要增加鏈接<a>的觸發范圍。
- 轉換為塊元素：
display:block; - 轉換為行內元素：
display:inline; - 轉換為行內塊：
display: inline-block;
案例
實現如圖側邊欄
步驟：
-
標簽
a原本是行內元素，無法設置長寬，所以需要轉換為塊元素 -
鼠標懸浮在標簽上時背景變色
-
文字垂直居中
<body>
<a href="#">手機 電話卡</a>
<a href="#">電視 盒子</a>
<a href="#">筆記本 平板</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">健康 兒童</a>
<a href="#">耳機 音響</a>
</body>
<style>
a {
display: block; /*轉換為塊元素*/
color: #ffff;
width: 240px;
height: 40px;
background: #55585a;
text-indent: 2em; /* 首行縮進2個字符*/
text-decoration: none;
line-height: 40px; /*文字垂直居中*/
}
a:hover {
background: #ff6700; /*懸浮變色*/
}
</style>