一.首先我們總結下行內元素和塊級元素有哪些: 行內元素: <a>標簽可定義錨<abbr>表示一個縮寫形式<acronym>定義只取首字母縮寫<b>字體加粗<bdo>可覆蓋預設的文本方向<big>大號字體加粗<br>換行<cite>引用進行定義<code>定義電腦代碼文本<dfn>定義一個定義項目< ...
一.首先我們總結下行內元素和塊級元素有哪些:
行內元素:
<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>定義變數
塊級元素:
<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>定義表格中的行
二.然後我們再來看看行內元素和塊級元素的區別:
1.行內元素與塊級元素直觀上的區別
行內元素會在一條直線上排列,都是同一行的,水平方向排列
塊級元素各占據一行,垂直方向排列。塊級元素從新行開始結束接著一個斷行。
2.塊級元素可以包含行內元素和塊級元素。行內元素不能包含塊級元素。
3.行內元素與塊級元素屬性的不同,主要是盒模型屬性上
行內元素設置width無效,height無效(可以設置line-height),margin上下無效,padding上下無效
三.行內元素和塊級元素的轉化:
把塊級元素轉換成行內元素:display:inline;
將行內元素轉換成塊級元素:display:block;
行內塊元素:display:inline-block;