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

元素內(nèi)容區(qū)

** 2. 邊框和內(nèi)邊距的寬度不能會負值，外邊距可以為負值**

術語：

• 正常流：傳統(tǒng)的HTML文檔的文本布局，文本從左向右，從上向下顯示。大多數(shù)元素都在正常流中，要讓一個元素不在正常流中，唯一的辦法就是使之成為浮動或定位元素

• 非替換元素：如果元素的內(nèi)容包含在文檔中，則稱之為非替換元素。大部分HTML元素都是非替換元素。

• 替換元素：這是指用作為其他內(nèi)容占位符的一個元素。img就是一個典型的替換元素，它只是指向一個圖像文件，這個文件將插入到文件流中替換img所在的位置。

• 塊級元素：在正常流中，在其框之前和之后生成“換行”，所以在正常流中的塊級元素會垂直擺放。例如p, div

• 行內(nèi)元素：元素不會再之前或者之后生成“換行”，他們是塊級元素的后代。例如: span, strong, i

1. 塊級元素

塊級元素的框模型

1.1 水平寬度

一個元素的width被定義為從左內(nèi)邊界到右內(nèi)邊界的距離，所以width影響的是內(nèi)容區(qū)的寬度，而不是整個可見的元素框。

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的使用情景以及值的計算：

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

負外邊距

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

百分數(shù)

在上述值設為百分數(shù)時，會應用同樣的基本規(guī)則。百分數(shù)的相對值是包含塊的寬度

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

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

但有一個例外，如果width 為auto，元素的寬度則是內(nèi)容的固有寬度

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

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

1.2 豎直高度

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

一個元素的默認高度尤其內(nèi)容決定?？梢詫θ魏螇K級元素設置顯示高度，如果指定高度大于顯示內(nèi)容所需的高度，多余的高度會產(chǎn)生視覺效果，就像有額外的內(nèi)邊距一樣。如果高度小于內(nèi)容所需的高度，瀏覽器會提供某種方法來查看所有內(nèi)容。瀏覽器的具體行為取決于overflow的屬性值。

一個元素的height被定義為從上內(nèi)邊界到下內(nèi)邊界的距離。

公式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。

百分數(shù)高度

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

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

auto高度

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

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

<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>

<img src="/Users/fangjuan/Documents/MyBlogs/CSS/png/有塊級子元素且高度為auto.png" alt="有塊級子元素且高度為auto" style="zoom:50%;" />

合并垂直外邊距

在元素沒有內(nèi)邊距和邊框的情況下，垂直相鄰外邊距會進行合并。

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

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

負外邊距

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

2. 行內(nèi)元素

2.1 基本術語

1. 匿名文本：所有為包含在行內(nèi)元素中的字符串，例如<p>hello world</p>,hello world 是匿名文本，其中空格也是匿名文本的一部分。
2. em框：字符框，font-size 確定了各個em框的高度。
3. 內(nèi)容區(qū)：元素中個字符的em框串在一起構成的框。
4. 行間距：font-size 和 line-height值之差。
5. 行內(nèi)框：①對于非替換元素，元素行內(nèi)框的高度等于line-height的大小，②對于替換元素，元素行內(nèi)框的高度等于內(nèi)容區(qū)的高度。
6. 行框：包含該行中出現(xiàn)的行內(nèi)框的最高的和最低點的最小框，行框的上邊界要位于最高行內(nèi)框的上邊界，行框的底邊要放在最低行內(nèi)框的下邊界。

2.2 確定行內(nèi)元素的高度

1. ①非替換元素： 得到個行內(nèi)非替換元素及不屬于后代行內(nèi)元素的所有文本的font-size值和line-height值，再將line-height減去font-size,

   ②替換元素：得到個替換元素的height,margin-top, margin-bottom, padding-top, padding-bottom, border-top-width, border-bottom-width 值，把他們加在一起。

2. 對于各內(nèi)容區(qū)，確定他在整行基線的上方和下方分別超出多少。需要知道各元素及匿名文本各部分的基線的位置，還需要知道該行本身基線的位置，然后將他們對齊。對于非替換元素，要將其底邊放在整行的基線上。

3. 對于指定了vertical-align值的元素，確定其垂直偏移量。該屬性改變的是元素在基線上方或下方超出的距離。

4. 最后計算行框高度，將基線與最高行內(nèi)框頂端之間的距離加上基線與最低行內(nèi)框低端之間的距離。

2.3 行內(nèi)非替換元素

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

考慮一下標記：

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

行內(nèi)框

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

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

管理line-height

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

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

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

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

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

增加框?qū)傩?/h4>

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

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

可以為行內(nèi)元素指定內(nèi)邊距，這會把邊框從文本本身拉開。

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

內(nèi)邊距和邊框不改變行高

注：這個內(nèi)邊距并沒有改變內(nèi)容區(qū)的具體形狀，不過它會影響這個元素行內(nèi)框的高度。

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

2.4 行內(nèi)替換元素

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

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

替換元素增加高度

.png)]

增加框?qū)傩?/h4>

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

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; }

/替換元素內(nèi)邊距和外邊距

注：上圖向我們展現(xiàn)了：默認情況下，行內(nèi)替換元素位于基線上

3. 改變元素顯示display

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

3.1 行內(nèi)塊元素

display: inline-block

行內(nèi)塊元素是塊級元素和行內(nèi)元素的混合。實際上，行內(nèi)塊元素會作為替換元素放在行中。

3.2 display計算值

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