HTML的display屬性將行內元素、塊狀元素、行內塊狀元素互相轉換以及三者的區別

綠林豪士發表於2018-04-13
HTML

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>
<style type="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

相關文章