塊級元素和行內元素的三個區別 1.行內元素與塊級元素直觀上的區別: 行內元素會在一條直線上排列,都是同一行,水平方向排列 塊級元素獨占一行,垂直方向排列.塊級元素從新行開始結束接著一個斷行 2.塊級元素可以包含行內元素和塊級元素, 行內元素不能包含塊級元素 3.行內元素和塊級元素屬性的不同,主要是盒 ...
塊級元素和行內元素的三個區別
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>按鈕