DAY15 CSS該如何處理元素位置? 1!

今天我們要來學的就是CSS中元素的排版方式! 首先我們要先學習一個觀念，就是Block Box(區塊元素)和Inline Box(行內元素)的差別。

Block Box(區塊元素)
區塊元素的意思是指這個元素不允許其他元素佔到他的水平空間，簡單來說就是這種元素自己一個就是一行的
意思，他能夠設定寬度,高度,留白與邊界，常見的區塊元素我舉例以下幾種:

 標題元素-h1~h6
 段落元素-p
 列表元素-ol,ul,li
 表單元素-form

Inline Box(行內元素)
行內元素的意思是指這個元素能夠在水平空間內並行，就是相同平行範圍能夠有複數個元素存在，無法設定寬度
,高度，以及上下的留白與邊界，常見的行內元素我舉例以下幾種:

  超連結元素-a
  圖片元素-img
  輸入元素-input
  
但我們有時會因為某些排版需求，仍會需要將區塊元素進行不換行的處理，或是需要設定行內元素的寬度與高度
，這時我們就能利用到display這個屬性，這個屬性能夠幫助我們轉換元素的層級，display的設定值有以下幾種:

 **block**
      這個是將元素設定為區塊元素，就能夠進行寬度與高度等設定。
 
 **inline**
      這個是將元素設定為行內元素，無法進行寬度與高度等設定。
 
 **inline-block**
      這個是將元素設定為像行內元素般，能夠進行不換行的處理，但同時保有能夠進行寬度與高度
      等設定的特性。

今天的課程就教到這邊，下一篇會講css的幾種定位方式~~~~~~