元素型別

塊狀元素 block

特點

• 獨佔一行或一塊區域，豎著排列
• 可以新增寬高
• 可以設定margin和padding值，上下左右都生效
• 可以作為其他元素的父元素

代表性標籤

<div> ...</div>

<p> ... </p>

<h2> ... </h2>

<ul> <li>..</li> </ul>

<fieldset>...<fieldset>

行內元素 inline

特點

• 在預設情況下，元素是挨著排列的
• 在預設情況下，給元素新增寬高是無效的
• 在預設情況下，給元素新增margin和padding值，僅有左右方向生效，上下不生效

代表性標籤

<a>...</a>

<span>...</span>

<i>...<i>

<b>...</b>

<label>...<label>

行內塊級元素 inline-block

特點

• 就是塊狀元素和行內元素的綜合
  • 可以設定寬高的屬性，來自塊狀元素的特點
  • 挨著排列的屬性，來自行內元素
• 與其他元素挨在一起的時候，會有預設間距
• 它有一個專有屬性 vertical-align:top/middle/bottom

代表性標籤

<img>...</img>

<input>...</input>

<button>...</button>

作用

• 可以解決圖片在向下撐大3畫素的問題

  • 給圖片本身新增vertical-align:top/middle/bottom可以解決被撐下來的3px問題 （推薦）
  • 給圖片加display:block轉為塊級元素 （推薦）
  • 可以給圖片本身或者圖片的父級元素新增float:left （圖片右邊的邊距）
  • 給body{}新增font-size為0 （不推薦）

• 可以結合其他屬性一起，讓圖片在一個區域裡面做水平垂直居中的效果

圖片水平垂直居中

給父級元素設定line-height和text-align:center，給圖片設定vertical-align:middle

可變元素

給元素加浮動float，隱含的給元素加了display:block

元素的顯示與隱藏

使用display:none隱藏元素
使用:hover{display:block} 滑鼠經過時，顯示元素

.boss:hover .box{display:block}
/* 最好後面的元素是前面元素的後代，在父級元素上懸停滑鼠，元素出現 */

元素型別轉換

給標籤加display；block，改善導航欄使用者體驗