區塊層級元素和行內元素

標籤：

• 常見的區塊層級元素有 div,form,table,p,pre,h1~h6,dl,ol,ul,li等。
• 常見的內嵌元素有 span,a,strong,em,label,input,select,text,textarea,img,br等。
• 如果需要對某個行內元素設定固定的寬度或者高度或者設定垂直方向上的margin或padding，需要先將其轉化成區塊層級元素，可以使用display：block，或者display：inline-block
• • display:block
  1. 1. block元素會獨佔一行，多個block元素會各自新起一行。預設情況下，block元素寬度自動填滿其父元素寬度。
     2. block元素可以設定width,height屬性。區塊層級元素即使設定了寬度,仍然是獨佔一行。
     3. block元素可以設定margin和padding屬性。
  • display:inline
  1. 1. inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裡，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。
     2. inline元素設定width,height屬性無效。
     3. inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。
  • display:inline-block
  1. 1. 簡單來說就是將對象呈現為inline對象(可以顯示在一行），但是對象的內容作為block對象呈現（可以設定高度和寬度，可以設定垂直方向的margin和padding）。之後的內聯對象會被排列在同一行內。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。

區塊層級元素和行內元素