html塊、行內塊、行內元素

html塊、行內塊、行內元素

• 塊級元素： <div>、<p>、<h1-5>、<nav>、<aside>、<header>、<footer>、<section>、<article>、<ul-li>、<address

  特性：

  1. 識別寬高

  2.自動換行

  3.可設置margin 和 padding

  4.多個塊狀元素標籤寫在一起，默認排列方式爲從上至下

• 示例

html代碼：

<div class="block">
	塊級元素
</div>
<p>塊級元素margin</p>
<div class="block block-margin">
	塊級元素margin
</div>
<p>塊級元素padding</p>
<div class="block block-padding">
	塊級元素padding
</div>

css 代碼：

<style>
	.block {
		width: 100px;
		height: 100px;
		background-color: brown;
		text-align: center;
		line-height: 100px;
		color: #ffffff;
	}
	.block-margin {
		margin: 20px;
	}
	.block-padding {
		padding: 20px;
	}
</style>

### 行內塊狀元素

特性：

1. 識別寬高屬性

2. 不自動換行

3. 默認排列方式爲從左到右

<style>
.block {
	width: 100px;
	height: 100px;
	background-color: brown;
	text-align: center;
	line-height: 100px;
	color: #ffffff;
	/* 設置display 元素之間轉換 */
	display: inline-block; 
}
.block-margin {
	margin: 20px;
}
.block-padding {
	padding: 20px;
}
</style>

行內元素

標籤：<b> 、span、<li>、<sub>、<sup>

• 特性

1、設置寬高無效

2、設置margin 上下無效，左右有效；設置padding有效

3、自動換行顯示

• 圖示1：

margin重疊問題

塊級元素設置magin 與同級得p標籤重疊了，這就是比較常見的margin重疊

• 什麼是margin 重疊？

兩個或多個塊級盒子的垂直相鄰邊界會重合。結果的邊界寬度是相鄰邊界寬度中最大的值。如果出現負邊界，則在最大的正邊界中減去絕對值最大的負邊界。如果沒有正邊界，則從零中減去絕對值最大的負邊界。注意：相鄰的盒子可能並非是由父子關係或同胞關係的元素生成。

• 邊界的重疊也有例外情況：

1、水平邊距永遠不會重合。

2、在規範文檔中，2個或以上的塊級盒模型相鄰的垂直margin會重疊。最終的margin值計算方法如下：

a、全部都爲正值，取最大者；

b、不全是正值，則都取絕對值，然後用正值減去最大值；

c、沒有正值，則都取絕對值，然後用0減去最大值。
注意：相鄰的盒模型可能由DOM元素動態產生並沒有相鄰或繼承關係。

3、相鄰的盒模型中，如果其中的一個是浮動的（float），垂直margin不會重疊，並且浮動的盒模型和它的子元素之間也是這樣。

4、設置了overflow屬性的元素和它的子元素之間的margin不被重疊（overflow取值爲visible除外）。

5、設置了絕對定位（position:absolute）的盒模型，垂直margin不會被重疊，並且和他們的子元素之間也是一樣。

6、設置了display:inline-block的元素，垂直margin不會重疊，甚至和他們的子元素之間也是一樣。

7、如果一個盒模型的上下margin相鄰，這時它的margin可能重疊覆蓋（collapse through）它。在這種情況下，元素的位置（position）取決於它的相鄰元素的margin是否重疊。

a、如果元素的margin和它的父元素的margin-top重疊在一起，盒模型border-top的邊界定義和它的父元素相同。

b、另外，任意元素的父元素不參與margin的重疊，或者說只有父元素的margin-bottom是參與計算的。如果元素的border-top非零，那麼元素的border-top邊界位置和原來一樣。一個應用了清除操作的元素的margin-top絕不會和它的塊級父元素的margin-bottom重疊。
注意，那些已經被重疊覆蓋的元素的位置對其他已經重疊的元素的位置沒有任何影響；只有在對這些元素的子元素定位時，border-top邊界位置纔是必需的。
8、根元素的垂直margin不會被重疊。

• 外邊距(margin)重疊示例

外邊距重疊是指兩個垂直相鄰的塊級元素，當上下兩個邊距相遇時，起外邊距會產生重疊現象，且重疊後的外邊距，等於其中較大者。

• 圖示1：同級

• 圖示2：父與子

<p>標題</p>
<div class="same">
	<div class="block block-margin">
		margin: 20px
	</div>
	margin: 30px
</div>

• 圖示3
  如下圖，父元素沒有設置margin-top，而子元素設置了margin-top：20px;可以看出，父元素也一起有了邊距。

- 外邊距重疊的意義

外邊距的重疊只產生在普通流文檔的上下外邊距之間，這個看起來有點奇怪的規則，其實有其現實意義。設想，當我們上下排列一系列規則的塊級元素（如段落P）時，那麼塊元素之間因爲外邊距重疊的存在，段落之間就不會產生雙倍的距離。

• 防止外邊距重疊解決方案：

• 外層元素padding代替

• 外層元素 overflow:hidden;

• 內層元素絕對定位 postion:absolute:

• 內層元素 加float:left;或display:inline-block;

• 內層元素padding:1px;

• 內層元素透明邊框 border:1px solid transparent;