HTML的display屬性將行內元素、塊狀元素、行內塊狀元素互相轉換以及三者的區別
阿新 • • 發佈：2018-04-13
light 參考 utf 嵌入 label 支持 列表項 sub idt
1.行內元素
(1)設置寬高無效
(2)對margin僅設置左右方向有效，上下無效；padding設置上下左右都有效，即會撐大空間
(3)不會自動進行換行
<html> <head> <meta charset="utf-8" /> <title>行內元素</title> <style type="text/css"> span { width: 120px; /*設置寬高無效*/ height: 120px; /*設置寬高無效*/ margin: 20px; /*左右方向有效，上下無效*/ padding: 20px; /*padding設置上下左右都有效*/ background:#009933; } </style> </head> <body> <span>代碼改變世界</span> </body> </html>
2.塊狀元素
(1)能夠識別寬高
(2)margin和padding的上下左右均對其有效
(3)可以自動換行
(4)多個塊狀元素標簽寫在一起，默認排列方式為從上至下
<html> <head> <meta charset="utf-8" /> <title>測試案例</title> <styletype="text/css"> div { width: 200px; /*能夠識別寬高*/ height: 100px; /*能夠識別寬高*/ margin: 20px; /*margin的上下左右均對其有效*/ padding: 20px; /*padding的上下左右均對其有效*/ background:#009933; } </style> </head> <body> <div>代碼改變世界</div>
<div>代碼改變世界</div>
</body>
</html>
3.行內塊狀元素
行內塊狀元素綜合了行內元素和塊狀元素的特性，但是各有取舍。因此行內塊狀元素在日常的使用中，由於其特性，使用的次數也比較多。
(1)不自動換行
(2)能夠識別寬高
(2)margin和padding的上下左右均對其有效
(3)默認排列方式為從左到右
<html> <head> <meta charset="utf-8" /> <title>行內塊狀元素</title> <style type="text/css"> div { display: inline-block; /*轉換為行內塊狀元素*/ width: 100px; height: 50px; /*能夠識別寬高*/ margin: 20px; padding: 20px; /*margin和padding的上下左右均對其有效*/ background: lightblue; } </style> </head> <body> <div>代碼改變世界</div> <div>代碼改變世界</div> </body> </html>
4.display屬性轉換
(1)display:inline;轉換為行內元素
(2)display:block;轉換為塊狀元素
(3)display:inline-block;轉換為行內塊狀元素
5.行內元素列表
<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>定義變量
6.塊級元素列表
<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>定義表格中的行
參考文章：
https://www.cnblogs.com/ljwk/p/7090320.html
https://zhidao.baidu.com/question/1988012763773636867.html
HTML的display屬性將行內元素、塊狀元素、行內塊狀元素互相轉換以及三者的區別