【CSS3】區塊層級元素與行內元素的區別

標籤：style   io   color   ar   os   for   sp   strong   div   

一、行內元素與塊級函數的三個區別

行內元素的特點：

• 和其他元素都在一行上；
• 高，行高及外邊距和內邊距部分可改變；
• 寬度只與內容有關；
• 行內元素只能容納文本或者其他行內元素。
• 行內元素設定width無效，height無效(可以設定line-height)，margin上下無效，padding上下無效

 

區塊層級元素

• 總是在新行上開始，佔據一整行；
• 高度，行高以及外邊距和內邊距都可控制；
• 寬頻始終是與瀏覽器寬度一樣，與內容無關；
• 它可以容納行內元素和其他塊元素。

二、行內元素轉換為區塊層級元素

        display:block (字面意思表現形式設為塊級)

三、行內元素與區塊層級元素

 

區塊層級元素列表

<address>	定義地址
<caption>	定義表格標題
<dd>	定義列表中定義條目
<div>	定義文檔中的分區或節
<dl>	定義列表
<dt>	定義列表中的項目
<fieldset>	定義一個框架組
<form>	建立 HTML 表單
<h1>	定義最大的標題
<h2>	定義副標題
<h3>	定義標題
<h4>	定義標題
<h5>	定義標題
<h6>	定義最小的標題
<hr>	建立一條水平線
<legend>	元素為 fieldset 元素定義標題
<li>	標籤定義清單項目
<noframes>	為那些不支援架構的瀏覽器顯示文本，於 frameset 元素內部
<noscript>	定義在指令碼未被執行時的替代內容
<ol>	定義有序列表
<ul>	定義無序列表
<p>	標籤定義段落
<pre>	定義預格式化的文本
<table>	標籤定義 HTML 表格
<tbody>	標籤表格主體（本文）
<td>	表格中的標準儲存格
<tfoot>	定義表格的頁尾（腳註或表注）
<th>	定義表頭儲存格
<thead>	標籤定義表格的表頭
<tr>	定義表格中的行

行內元素列表

<a>	標籤可定義錨
<abbr>	表示一個縮寫形式
<acronym>	定義只取首字母縮寫
<b>	字型加粗
<bdo>	可覆蓋預設的文本方向
<big>	大號字型加粗
<br>	換行
<cite>	引用進行定義
<code>	定義電腦代碼文本
<dfn>	定義一個定義項目
<em>	定義為強調的內容
<i>	斜體文字效果
<img>	向網頁中嵌入一幅映像
<input>	輸入框
<kbd>	定義鍵盤文本
<label>	標籤為 input 元素定義圖說文字（標記）
<q>	定義短的引用
<samp>	定義樣本文本
<select>	建立單選或多選菜單
<small>	呈現小號字型效果
<span>	組合文檔中的行內元素
<strong>	語氣更強的強調的內容
<sub>	定義下標文本
<sup>	定義上標文本
<textarea>	多行的文本輸入控制項
<tt>	打字機或者等寬的文字效果
<var>	定義變數

 

可變元素素列表--可變元素為根據上下文語境決定該元素為塊元素或者內嵌元素

<button>	按鈕
<del>	定義文檔中已被刪除的文本
<iframe>	建立包含另外一個文檔的內聯架構（即行內架構）
<ins>	標籤定義已經被插入文檔中的文本
<map>	用戶端影像對應（即熱區）
<object>	object對象
<script>	用戶端指令碼

【CSS3】區塊層級元素與行內元素的區別