html中塊級元素和行內元素

塊級元素和行內元素的三個區別

1.行內元素與塊級元素直觀上的區別:

　　行內元素會在一條直線上排列,都是同一行,水平方向排列

　　塊級元素獨占一行,垂直方向排列.塊級元素從新行開始結束接著一個斷行

2.塊級元素可以包含行內元素和塊級元素, 行內元素不能包含塊級元素

3.行內元素和塊級元素屬性的不同,主要是盒模型屬性上

　　行內元素設置width無效,height無效(可以設置line-height),

　　行內元素margin上下無效,padding上下無效

行內元素轉換塊級元素,用css實現

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

塊級元素

常用的塊級元素

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

<h1>到<h6>標題

<p>定義段落

<ul>無序列表

<ol>有序列表

<li>列表項

<dl>自定義列表

<dt>自定義列表項標題

<dd>自定義列表項

<form>創建HTML表單

<tabel>定義HTML表格

<caption>表格標題

<thead>表格表頭

<tbody>表格主題

<tfoot>表格頁腳

<th>表頭單元格

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

<tr>定義表格中的行

<pre>預格式話文本

<hr/>

行內元素

<a>錨點標簽

<abbr>表示一個縮寫形式

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

<b>加粗標簽

<strong>語義更強烈的加粗標簽

<i>斜體文本效果

<em>斜體但是語義更強烈

<img>向頁面中插入圖片

<input>輸入框

<label for="">標簽為 input 元素定義標註（標記）

<small>呈現小號字體效果

<select>創建單選和多選菜單,下拉菜單

<sub>下標文本

<sup>上標文本

<textarea>多行可控文本輸入框

行內塊級元素inline-block

<img>向頁面插入圖片

<input>輸入框

<button>按鈕