30天分享(18) - 行內元素 & 區塊元素

CSS 的行內元素與區塊元素有不同的規則與預設樣式，

區塊元素有以下標籤等 :

<div>

<h1> ... <h6>

<p>

<ul>, <ol>, <dl>

<li>, <dt>, <dd>

<table>

<blockquote>

<pre>

<form>

這些元素的特色是上下排列，當本身未設定值時會繼承父元素的值，

比方說設了一個區塊元素的高100px , 沒設寬度的話區塊元素的寬會延伸至瀏覽器內容的寬，

因為這個區塊元素被父層 影響，區塊元素是相當一個矩形容器，能夠隨置入物件的寬高延伸。

至於行內元素就不相同，行內元素的概念比較像文章，是左右排列不會自動斷行，

除了受限於區塊元素之中無法延伸會斷行，行內元素大小會因文字大小而改變，

行內元素的標籤有以下等 :

<a>

<strong>

<em>

<img />

<input>

<abbr>

當然也能依自己的喜好定義標籤樣式，想將區塊元素變成行內元素，

或從行內元素改變至區塊元素只要在 CSS 設定 :

display : inline; //行內

或者

display : block ; //區塊