塊級元素和行内元素相關問題

塊級元素和行内元素相關問題

最近實習接觸到前端的東西，以後想要往這個方向發展，把自己入門過程中遇到的一些問題都記錄下來。友善以後回來看。

問題：

塊級元素有哪些？行内元素有哪些？

參考來源：

http://www.cnblogs.com/Jackie0714/p/4923639.html

http://blog.csdn.net/zyy88886666/article/details/53448131

1.關于行内元素和塊狀元素的說明

1.1 CSS規範規定

每一個網頁元素都有一個display屬性，用于确定該元素的類型，每一個元素都有預設的display屬性值

div元素，它的預設display屬性值為“block”，稱為“塊級”元素(block-level)；

而span元素的預設display屬性值為“inline”，稱為“行内”元素。

div這樣的塊級元素，就會自動占據一定矩形空間，可以通過設定高度、寬度、内外邊距等屬性，來調整的這個

矩形的樣子；與之相反，像“span”“a”這樣的行内元素，則沒有自己的獨立空間，它是依附于其他塊級元素存在的，是以，對行

内元素設定高度、寬度、内外邊距等屬性，都是無效的。

1.2 改變類型

但可以使用css中display屬性改變生成框的類型，這意味着，通過将display屬性設定為block，可以讓行内元素表現得像塊級元素一樣

還可以通過把display設定為none，讓生成的元素根本沒有框。這樣的話，該框及其所有内容就不再顯示，不占用文檔的空間。

塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來的。

1.2 排列方式

行内框在一行中水準布置，可以通過水準内間距、邊框和外邊距調整它們的間距。但是，垂直内邊距、邊框和外邊距不影響内行框的高度。

有一行形成的水準框成為行框的告訴總是足以容納它包含的所有行内框。

2.行内、塊狀元素差別：

   (1).塊級元素會獨占一行，其寬度自動填滿其父元素寬度

      行内元素不會獨占一行，相鄰的行内元素會排列在同一行裡，知道一行排不下，才會換行，其寬度随元        素的内容而變化

   (2).一般情況下，塊級元素可以設定 width, height屬性，行内元素設定width,  height無效

      (注意：塊級元素即使設定了寬度，仍然是獨占一行的)

   (3).塊級元素可以設定margin 和 padding. 

      行内元素的水準方向的padding-left,padding-right,margin-left,margin-right 都産生邊距效果，但        是豎直方向的padding-top,padding-bottom,margin-top,margin-bottom都不會産生邊距效果。（水準方        向有效，豎直方向無效）

3.行内、塊狀元素：

塊元素(block element)

<address>定義位址

<div>定義文檔中的分區或節

<div>定義文檔中的分區或節

<dl>定義清單        

<dt>定義清單中的項目  

<dd>定義清單中定義條目

<ol>定義有序清單   

<ul>定義無序清單    

<li>标簽定義清單項目

<form>建立 HTML 表單

<h1-h6> 定義的标題

<hr>建立一條水準線

<p>标簽定義段落

<pre>定義預格式化的文本

<table>标簽定義 HTML 表格   

<caption>定義表格标題      

<tbody>标簽表格主體（正文）

<thead>标簽定義表格的表頭   

<th>定義表頭單元格

 <tr>定義表格中的行

<td>表格中的标準單元格  

<tfoot>定義表格的頁腳（腳注或表注)

内聯元素(inline element)

<span>組合文檔中的行内元素

<label>标簽為

<input> 元素定義标注（标記） 

<input>輸入框            

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

<textarea>多行的文本輸入控件 

<a>标簽可定義錨

<abbr>表示一個縮寫形式    

<acronym>定義隻取首字母縮寫

<b>字型加粗              

<em>定義為強調的内容   

<i>斜體文本效果          

<strong>語氣更強的強調的内容

<cite>引用進行定義        

<q>定義短的引用

<bdo>可覆寫預設的文本方向

<br>換行

<code>定義計算機代碼文本

<dfn>定義一個定義項目

<img>向網頁中嵌入一幅圖像

<kbd>定義鍵盤文本

<samp>定義樣本文本

<small>呈現小号字型效果

<sub>定義下标文本

<sup>定義上标文本

<tt>打字機或者等寬的文本效果

<var>定義變量

可變元素

可變元素為根據上下文語境決定該元素為塊元素或者内聯元素。

　　< applet> - java applet

　　<button >- 按鈕

　　< del> - 删除文本

　　<iframe> - inline frame

　　< ins >- 插入的文本

　　<map >- 圖檔區塊(map)

　　< object >- object對象

　　< script> - 用戶端腳本

　　<button >- 按鈕

　　< del> - 删除文本

　　<iframe> - inline frame

　　< ins >- 插入的文本

　　<map >- 圖檔區塊(map)

　　< object >- object對象

　　< script> - 用戶端腳本

另外HTML5增加了8個語義(semantic)元素,都是塊級元素

header,section,footer,aside,nav,main,article,figure