引言
一次偶然的面試遇到的題目,雖然當時知道塊級元素和行內元素的區別,但是沒有仔細去想。
一、行內元素與塊級元素
塊級元素列表
<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>
客戶端腳本
二、行內元素與塊級函數的三個區別
1.行內元素與塊級元素直觀上的區別
行內元素會在一條直線上排列,都是同一行的,水平方向排列
塊級元素各占據一行,垂直方向排列。塊級元素從新行開始結束接著一個斷行。
2.塊級元素可以包含行內元素和塊級元素。行內元素不能包含塊級元素。
3.行內元素與塊級元素屬性的不同,主要是盒模型屬性上
行內元素設置width無效,height無效(可以設置line-height),margin上下無效,padding上下無效
三、行內元素轉換為塊級元素
display:block (字面意思表現形式設為塊級)