CSS高度和寬度

CSS假定每個元素都會生成一個或多個矩形框，這稱爲元素框，各元素框中心有一個內容區。內容區周圍有可選的內邊距、邊框和外邊距。如下圖：

注：1. 元素背景顯示的區域是內容區+內邊距

** 2. 邊框和內邊距的寬度不能會負值，外邊距可以爲負值**

術語：

正常流：傳統的HTML文檔的文本佈局，文本從左向右，從上向下顯示。大多數元素都在正常流中，要讓一個元素不在正常流中，唯一的辦法就是使之成爲浮動或定位元素
非替換元素：如果元素的內容包含在文檔中，則稱之爲非替換元素。大部分HTML元素都是非替換元素。
替換元素：這是指用作爲其他內容佔位符的一個元素。img就是一個典型的替換元素，它只是指向一個圖像文件，這個文件將插入到文件流中替換img所在的位置。
塊級元素：在正常流中，在其框之前和之後生成“換行”，所以在正常流中的塊級元素會垂直襬放。例如p, div
行內元素：元素不會再之前或者之後生成“換行”，他們是塊級元素的後代。例如: span, strong, i

1. 塊級元素

1.1 水平寬度

一個元素的width被定義爲從左內邊界到右內邊界的距離，所以width影響的是內容區的寬度，而不是整個可見的元素框。

1.1.1 正常流中非替換塊級元素的水平寬度

正常流中塊級元素的水平部分的總和就等於父元素的width。

公式1： maring-left, border-left, padding-left, width, padding-right, border-right, margin-right 這7個屬性的和加在一起是元素包含塊的寬度，這往往是塊元素的父元素的width

這7個元素中，width, margin-left, margin-right 可以設置爲auto，其餘屬性必須設置爲特定值，或者默認是0。

auto

auto的使用情景以及值的計算：

如果這三個值都不爲auto，那麼margin-right會被強制爲auto，用來彌補實際值與所需總和的差距。
如果margin-left和margin-right不爲auto，width爲auto，則width會按照上面的公式1計算出某個值，從而達到總寬度。
如果margin-left和margin-right爲auto，width不爲auto，則會將margin計算爲相同的值，從而使元素居中。（元素居中的一種方法）
如果三個屬性都爲auto，則margin-left和margin-right都會爲0，width會盡可能的寬。

負外邊距

在margin未負的情況下，上述公式1仍然成立，可能導致子元素超出父元素。

百分數

在上述值設爲百分數時，會應用同樣的基本規則。百分數的相對值是包含塊的寬度

1.1.2 正常流中替換塊級元素的水平寬度

非替換塊元素的所有規則同樣適用於替換塊元素。也就是說，上述的公式仍然適用於非替換元素。

但有一個例外，如果width 爲auto，元素的寬度則是內容的固有寬度

<img src="smile.png" style="display:block;width:auto;margin:0 px">
<!-- 如果圖片的實際寬度是100px，該元素的寬度也爲100px -->

如果一個替換元素的width不同於其固有寬度，那麼height值也會成比例變化，除非將height也設置爲一個特定值。

1.2 豎直高度

1.2.1 正常流中塊級元素的高度

一個元素的默認高度尤其內容決定。可以對任何塊級元素設置顯示高度，如果指定高度大於顯示內容所需的高度，多餘的高度會產生視覺效果，就像有額外的內邊距一樣。如果高度小於內容所需的高度，瀏覽器會提供某種方法來查看所有內容。瀏覽器的具體行爲取決於overflow的屬性值。

一個元素的height被定義爲從上內邊界到下內邊界的距離。

公式2：margin-top, border-top, padding-top, height, padding-bottom, border-bottom, margin-bottom 這7個垂直相關的屬性的總和等於包含塊的height，這往往是父元素的height值。

有三個屬性可以設置爲auto：元素的height以及上下外邊距。

如果正常流中一個塊元素的margin-top或margin-bottom設置爲auto，他會自動計算爲0。

百分數高度

如果一個塊級正常流元素的height設置爲百分數，這個值是包含塊height的百分數。

如果沒有顯示聲明包含塊的height, 百分數高度會重置爲auto。

auto高度

正常流元素的高度設置爲auto的情況：

只有塊級子元素，其默認高度將是從最高塊級子元素的外邊框邊界到最低級子元素外邊框邊界之間的距離。
塊級元素有上內邊距或下內邊距，或者有上邊框或者下邊框，其高度則是從最高子元素的上外邊距邊界到期最低子元素的下外邊界之間的距離

<div style="height:auto;background:silver">
		<p margin-top="2em" margin-bottom="2em">
			高度爲1em
		</p>
	</div>
	<div style="height:auto;border-top: 1px solid;border-bottom: 1px solid;background-color: silver;">
		<p style="margin-top:2em;margin-bottom:2em;">
			高度爲5em
		</p>
	</div>

合併垂直外邊距

在元素沒有內邊距和邊框的情況下，垂直相鄰外邊距會進行合併。

li { margin-top: 10px; margin-bottom: 15px; }

顯示上面的列表時，相鄰列表項之間的距離是15像素，而不是25像素。

負外邊距

如果垂直外邊距都設置爲負值，瀏覽器會取兩個外邊距絕對值的最大值。
如果一個正外邊距與一個負外邊距合併，會直接求和。

2. 行內元素

2.1 基本術語

匿名文本：所有爲包含在行內元素中的字符串，例如
hello world
,hello world 是匿名文本，其中空格也是匿名文本的一部分。
em框：字符框，font-size 確定了各個em框的高度。
內容區：元素中個字符的em框串在一起構成的框。
行間距：font-size 和 line-height值之差。
行內框：①對於非替換元素，元素行內框的高度等於line-height的大小，②對於替換元素，元素行內框的高度等於內容區的高度。
行框：包含該行中出現的行內框的最高的和最低點的最小框，行框的上邊界要位於最高行內框的上邊界，行框的底邊要放在最低行內框的下邊界。

2.2 確定行內元素的高度

①非替換元素：得到個行內非替換元素及不屬於後代行內元素的所有文本的font-size值和line-height值，再將line-height減去font-size,

②替換元素：得到個替換元素的height,margin-top, margin-bottom, padding-top, padding-bottom, border-top-width, border-bottom-width 值，把他們加在一起。
對於各內容區，確定他在整行基線的上方和下方分別超出多少。需要知道各元素及匿名文本各部分的基線的位置，還需要知道該行本身基線的位置，然後將他們對齊。對於非替換元素，要將其底邊放在整行的基線上。
對於指定了vertical-align值的元素，確定其垂直偏移量。該屬性改變的是元素在基線上方或下方超出的距離。
最後計算行框高度，將基線與最高行內框頂端之間的距離加上基線與最低行內框低端之間的距離。

2.3 行內非替換元素

line-height會顯著的影響行內元素如何顯示，line-height隻影響行內元素和其他行內內容，而不影響塊級元素，至少不會直接影響塊級元素。

考慮一下標記：

<p style="font-size:12px; line-height: 12px;">
		which is <strong style="font-size: 24px;">strongly emphasized</strong>
	</p>

上述使用的字體的基線在離1/4em處。

上例中，對於正常文本而言，font-size和line-height都是12px，內容高度沒有改變。而對於strong文本，line-height與font-size之差是-12px, 半間距是-6px，再把這個半間距增加到內容區的頂部和底部，就得到了行內框，大小也爲12px（灰色部分）。因爲文本是按照基線對齊的，所以排列的不整齊。

管理line-height

改變一個行內元素的line-height可能導致文本相互重疊，改進辦法是

① 對font-size有改變的元素結合使用em單位

② 對line-height使用數字值，該數字會成爲縮放因子，該因子是一個繼承值而非計算值

p { font-size: 14px; line-height: 1em; }
p strong { font-size: 250%; line-height: 1em; }

p{ font-size: 14px; line-height: 1.5}

增加框屬性

內邊距、外邊距和邊框都可以應用到行內非替換元素。但行內元素的這些屬性根本不會影響行框的高度。

行內元素的邊框邊界由font-size而不是line-height控制。也就是說，如果一個span元素的font-size爲12px，line-height爲36px，其內容區就是12px高。

可以爲行內元素指定內邊距，這會把邊框從文本本身拉開。

span { border: 1px solid black; padding: 4px; }

注：這個內邊距並沒有改變內容區的具體形狀，不過它會影響這個元素行內框的高度。

注：外邊距不會應用到行內非替換元素的頂端和低端。

2.4 行內替換元素

行內替換元素一般有固定的高度和寬度。替換元素可能導致行框比正常要高，但這不會改變行中任何元素的line-height值，包括替換元素本身。

p { font-size: 15px; line-height: 18px; }
img { height: 30px; margin: 0; padding: 0; border: none; }

.png)]

增加框屬性

內邊距和邊框像平常一樣應用到替換元素；內邊距在具體內容外插入空間，邊框圍繞着內邊距。

p { font-size: 15px; line-height: 18px; }
img { height: 30px; margin: 0; padding: 0; border: none; }
img.one { margin: 0; padding: 0; border: 1px dotted; }
img.two { margin: 5px; padding: 3px; border: 1px solid; }

注：上圖向我們展現了：默認情況下，行內替換元素位於基線上

3. 改變元素顯示display

display: none | inline | block | inline-block 等等

3.1 行內塊元素

display: inline-block

行內塊元素是塊級元素和行內元素的混合。實際上，行內塊元素會作爲替換元素放在行中。

3.2 display計算值

如果元素是浮動元素或定位元素，display的計算值可以改變，計算結果由聲明值確定，如下表

聲明值	計算值
inline-table	table
inline, run-in, table-row-group,table-column, table-column-group,table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block	block
所有其他	根據指定確定