塊級標籤(行元素)和內聯標籤(行內元素)

時間 2020-08-10

標籤標籤元素內聯简体版

原文原文鏈接

塊級標籤

若是兩個一樣的標籤寫在一塊兒，出如今不一樣的行上面，這種就是塊級標籤css

常見的塊級標籤：

<h1-h6></h1-h6>，<p></p>，<div></div>html

（需特別注意）塊級標籤的特色：

佔據整行，自帶換行效果。除了div之外，通常塊級標籤都會有內外邊距，寬度和高度。spa

塊元素標籤示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>標題1</h1>
    <h1>標題2</h1>
</body>
</html>

輸出大概以下：
標題1
標題2

內聯標籤

若是兩個一樣的標籤寫在一塊兒，出如今同一行上面，這種就是內聯標籤code

常見的內聯標籤：

<span></span>，<a></a>，<img/>htm

注意：在內聯標籤中，有一個標籤，img標籤，是有邊距和寬度和高度的，叫行內塊級標籤。blog

（需特別注意）內聯標籤的特色：

不會佔據多餘面積。
沒有內外邊距，可是能夠經過css來設置內邊距，可是設置外邊距只能設置左右外邊距，不能設置上下邊距，即便設置了也無效！
沒有寬度和高度，css設置也無效！
注意img標籤和塊級標籤同樣，有邊距和寬高！因此img標籤又叫行內塊級標籤。

影響：圖片

使用text-align對標籤內容進行對齊方式的顯示，若是是在行內元素和行內塊級元素上面，可能看不出效果。
緣由是，行內元素沒有寬高，行內元素的寬高所有來自於內容的長度和高度。
行內塊級元素默認也是沒有設置寬高，可是行內塊級元素能夠設置寬度和高度。一旦設置了寬高之後，只要有剩餘空間就能夠看到對齊方式的效果。get

內聯元素標籤示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="https://www.baidu.com" target="_blank">百度</a>
    <a href="https://www.qq.com" target="_blank">騰訊</a>
</body>
</html>

輸出大概以下：
百度 騰訊 （均爲超連接）