不是塊級標簽和行級標簽都是塊級元素

而是 塊級標簽和行級標簽 我們都可以把其變成 塊級元素

我們知道行標簽有<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

塊級標簽有<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

舉個簡單的例子:

1.<span> ?<stong><em>都是行內元素?

在 <span>我是css的樣式標簽么么噠<strong>我給字體加粗</strong>。我是css的樣式標簽<em>我是斜體</em>我是css的樣式標簽么么噠我是css的樣式標簽么么噠我是css的樣式標簽么么噠</span>

以上3個家伙 一個是樣式標簽。一個是加粗。一個是搞斜體的。但無論在這段文字中再加入多少個他們都改變不了這段文字的排版?

2<div>??<p>?<h1>

<h1>我是標題欄</h1>

<p>我是一段文字我是一段文字我是一段文字</p>

<div>我就是個容器 俺胸懷可大可小 你是行的這里就變成塊 的</div>

相信看完以上2點 ?應該能理解 行內標簽 和 塊狀標簽了

為什么塊級標簽和行級標簽和行級標簽都是盒子模型：

我們可以用<p>的開始和</p>的結束

把<span>或者<strong>或者<em>等行級標簽包圍起來 那么行級標簽就能 獨立出來 成為一個塊?

也就是一個獨立段落。。。但成為塊還不行 ?我們要讓它成為盒子 以方便我們在網頁布局中給他定位

SO：用<div>的開始和</div>的結束吧<span>或者<strong>或者<em>等行級標簽包圍起來

甚至用<div>把<P>包圍起來 ? ? ? ? ?就相當于是盒子了

所以說什么都可以是盒子模型 只要用<div>和</div>把他們保衛起來 ? ?么么噠

塊級元素會獨占一行,默認情況下,其寬度自動填滿其父元素寬度.

行內元素不會獨占一行,相鄰的行內元素會排列在同一行里,直到一行排不下,才會換行,其寬度隨元素的內容而變化. 另外

塊級元素可以設置width,height屬性.

行內元素設置width,height屬性無效，它的長度高度主要根據內容決定.

塊級元素即使設置了寬度,仍然是獨占一行.

塊級元素可以設置margin和padding屬性.

行 內元素的margin和padding屬性,水平方向的padding-left,padding-right,margin-left,margin- right都產生邊距效果,但豎直方向的padding-top,padding-bottom,margin-top,margin-bottom卻不 會產生邊距效果.

塊級元素對應于display:block.

行內元素對應于display:inline.

就是說，可以給其設置 border、padding、margin等值。