HTML&CSS基礎-内聯和塊元素
作者：尹正傑
版權聲明：原創作品，謝絕轉載！否則将追究法律責任。
一.html源代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>尹正傑的網頁</title>
</head>
<body>
<!--
div就是一個塊元素:
所謂塊元素就是獨占一行的元素,無論它的内容有多少,它都會獨占一行;
div這個标簽沒有任何語義,就是一個純粹的塊元素，并且不會為它裡面的元素設定任何的預設樣式;
div元素主要是對頁面進行布局的;
其它常見的塊元素:
<p></p>:
段落标簽。
<h1></h1>~<h1></h6>
标題标簽
-->
<div style="background-color: red; width: 200px;">
我的部落格位址:https://www.cnblogs.com/yinzhengjie
</div>
<div style="background-color: yellow; width: 1400px;">
我的部落格位址:https://www.cnblogs.com/yinzhengjie
</div>
<div style="background-color: deeppink;">
我的部落格位址:https://www.cnblogs.com/yinzhengjie
</div>
<!--
span是一個内聯元素:
所謂内聯元素指的是隻占自身大小的元素，不會占用一行。
span沒有任何語義，span标簽專門用來選中文字，然後為文字來設定樣式。
常見的内聯元素:
<a></a>
<img src=""/>
<iframe src="" width="" height=""></iframe>
-->
<span>我是一個span</span>
<span>我是一個span</span>
<!--
塊元素和内聯元素使用原則:
塊元素主要要用來做頁面的布局，内聯元素主要用來選中文本設定樣式;
一般情況下隻使用塊元素去包含内聯元素，而不會使用内聯元素去包含一個塊元素;
<a></a>元素可以包含任意元素，除了它本身，換句話說就是不能嵌套使用;
<p></p>元素不可用包含任意其它的塊元素;
壓根的來說，其實在HTML5中已經把塊元素和内聯元素的概念去除了:
在HTML5有一個非常複雜的内容模型來解釋塊元素和内聯元素，它的内容模型分了8~9種，把标簽分類搞得非常複雜，為了節省我們的腦細胞，我建議大家沒有必要去記那麼多種，還是按照之前的規則去記憶塊級标簽和内聯标簽。
-->
</body>
</html> 二.浏覽器打開以上代碼渲染結果
當你的才華還撐不起你的野心的時候，你就應該靜下心來學習。當你的能力還駕馭不了你的目标的時候，你就應該沉下心來曆練。問問自己，想要怎樣的人生。
歡迎加入基礎架構自動化運維：598432640，大資料SRE進階之路：959042252，DevOps進階之路：526991186
![margin-top塌陷問題的現象與解決[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)