搬磚~

塊元素

1. 塊級元素前後會單獨換行
2. 塊級元素可設定width,height,margin,padding屬性有效
3. 可以容納行內元素和其他塊元素，<form>只能容納其他塊元素

塊級元素卻總是會在新的一行開始排列，各個塊級元素獨佔一行，垂直向下排列，若想使其水平方向排序，可使用左右浮動（float：left/right）讓其水平方向排列。塊級元素即使設定了寬度,仍然是獨佔一行。

• <address>聯絡方式資訊。
• <article> HTML5文章內容。
• <aside> HTML5伴隨內容。
• <audio> HTML5音訊播放。
• <blockquote>塊引用。
• HTML5繪製圖形。
• <dd>定義列表中定義條目描述。
• <div>文件分割槽。
• <dl>定義列表。
• <fieldset>表單元素分組。
• <figcaption> HTML5圖文資訊組標題
• <figure> HTML5圖文資訊組 (參照 <figcaption>)。
• <footer> HTML5區段尾或頁尾。
• <form>表單。
• <h1>, <h2>, <h3>, <h4>
  , <h5>, <h6>標題級別 1-6.
• <header> HTML5區段頭或頁頭。
• <hgroup> HTML5標題組。
• <hr>水平分割線。
• <noscript>不支援指令碼或禁用指令碼時顯示的內容。
• <ol>有序列表。
• <output> HTML5表單輸出。
• <p>行。
• <pre>預格式化文字。
• <section> HTML5一個頁面區段。
• <table>表格。
• <tfoot>表腳註。
• <ul>無序列表。
• <video> HTML5視訊。

 行內元素

行內元素也叫內聯元素或者內嵌元素。

1. 會在水平方向排列，不能包含塊級元素，只能容納文字或者其他內聯元素。
2. 設定width、height無效(可以設定line-height)，margin、padding上下無效，但是左右有效
3. 寬度高度隨文字內容的變化而變化

部分常用的行內元素：

<a>定義超連結

<b>字型加粗

<span>定義在文件中的行內元素

<img>向網頁中插入題影象

<input>輸入框

<small>小號字型效果

<br>換行

<big>字型加大加粗

<strong>強調的語氣

<select>建立單選或多選選單

<textarea>定義文字域，多行的文字輸入控制元件

行內塊元素--inline-block

行內塊狀元素綜合了行內元素和塊狀元素的特性，但是各有取捨。因此行內塊狀元素在日常的使用中，由於其特性，使用的次數也比較多。

1. 不自動換行
2. 能夠識別寬高
3. margin和padding的上下左右均對其有效
4. 預設排列方式為從左到右 

常見的行內塊元素：img  input  td  ;

然而，塊級元素和行內元素和行內塊級元素可以相互轉換的。即通過display屬性設定。

{
display:block;  //可將行內元素變為塊級元素
/*display:inline;  //可將塊級元素變為行內元素*/ 
/*display:inline-block;轉換為行內塊狀元素*/
}

display

首先，所有主流瀏覽器都支援 display 屬性。其次，我們都知道display 屬性規定元素應該生成的框的型別。預設值：inline

display常用屬性值：

inline   預設。此元素會被顯示為內聯元素，元素前後沒有換行符。

block   此元素將顯示為塊級元素，此元素前後會帶有換行符。

inline-block   行內塊元素。（CSS2.1 新增的值）既具有block的寬度高度特性又具有inline的同行特性

none  此元素不會被顯示。

ps: display 設定成 none 不會保留元素本該顯示的空間，但是 visibility: hidden 還會保留。

預設情況下，block元素寬度自動填滿其父元素寬度；

替換元素

內容不受CSS視覺格式化模型控制，渲染模型不考慮對此內容渲染，擁有固定的尺寸（寬、高）的元素。

或者說瀏覽器依據元素的標籤和屬性來決定元素的具體顯示內容。

比如：<input /> type="text" 的是，這是一個文字輸入框，換一個其他的時候，瀏覽器顯示就不一樣

(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替換元素，這些元素都沒有實際的內容。

行內替換元素：如img    ，height/width/padding/margin均可用。效果等於塊元素。這也解釋了為什麼有些行內級元素可以設定礦都、高度、和邊距。

非替換元素

與替換元素相反，元素的內容直接顯示出來，內容包括在文件中的元素，內容都放在本身之中。如<lable>、<p>等；

行內非替換元素：例如, height/width/padding top、bottom/margin top、bottom均無效果。只能用padding left、right和padding left、right改變寬度。

行內級置換和非置換元素的寬度定義

對於行內級非置換元素，寬度設定是不適用的。·

對於行內級置換元素來說，其寬度的設定需遵循以下幾點：

• 若寬高的計算值都為 auto 且元素有固有寬度，則 width 的使用值為該固有寬度；

  典型的例子是：擁有預設寬高的 input 當寬度的計算值為auto時，則寬度使用值為其預設的固有寬度

• 若寬度的計算值為 auto 且元素有固有寬度，則 width 的使用值為該固有寬度；

  例子同上

• 若寬度的計算值為 auto 且高度有 非auto 的計算值，並且元素有固有寬高比，則width 的使用值為 高度使用值 * 固有寬高比；

  典型的例子：img 當只定義了其高度值時，其寬度將會根據固有寬高比進行等比設定

• 除此之外，當 width 的計算值為 auto 時，則寬度的使用值為 300px

  典型的例子：比如iframe, canvas

其它型別的置換元素，其寬度的定義都參照行內建換元素的定義。

行內級置換和非置換元素的高度定義

對於行內級非置換元素，高度設定是不適用的。

對於行內級置換元素來說，其高度的設定需遵循以下幾點：

• 若寬高的計算值都為 auto 且元素有固有高度，則 height 的使用值為該固有高度；
• 若高度的計算值為 auto 且元素有固有高度，則 height 的使用值為該固有高度；
• 若高度的計算值為 auto 且寬度有 非auto 的計算值，並且元素有固有寬高比，則height 的使用值為：寬度使用值 / 固有寬高比；
• 若高度的計算值為 auto 且上述條件完全不符，則 height 的使用值 不能大於150px，且寬度不能大於長方形高度的2倍。