在學習替換元素的時候學到了行框line-box的概念，算是磨了很久大致理解了何爲line-box，如何形成，然後在本文記錄了我對line-box的理解，然而今天學習vertical-align的時候又遇到了line-box，表示內心想哭，因爲發現自己也就一知半解，又磨了大半天有了更深的理解，因此將本文再次修改。學習就是一個不斷進步的流程呀～希望我再過不久能有更加深刻的理解，再來修改?
inline-box
inline-box又名內聯盒子，通常由一些標籤包裹形成，最常用的如標籤包裹文字會形成內聯盒子，那些沒有標籤包裹的文字默認自己形成一個盒子稱爲anonymous inline box匿名內聯盒子
font-size
font-size相同，font-family不同，得到的span的元素的高度也不同 => 字體度量都是基於這個em-square相對單位設置的- 計算出來的高度決定了
html元素的content-area內容區域高度
對於font-size我並沒有特別深入去學習，只是大致瞭解了下，知悉了爲何font-size一樣但是字體不同呈現出來的span高度不同，感興趣的同學可點擊本文參考鏈接查看。
line-box行框
line-box名爲行框，line-box的高度基本上是由line-box中line-height最大的inline-box決定的。（是不是很繞口，是不是快瘋了～）看具體下面的解釋吧
- 當
p元素出現在屏幕上時，它可能包含了多行內容，每行內容由多個內聯元素inline-box組成（內聯標籤或者是包含文本的匿名內聯元素），每一行都叫做一個line-box。 line-box的高度是由它所有的子元素的高度計算出來的
- => 從子元素的最高點到最低點的高度
- => 默認情況下，一個
line-box總是有足夠的高度來容納它的子元素。 - =>
line-height與font-size的計算值之差（行間距）分爲兩半，分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框line-box- 行間距：css沒有直接設置行間距的方式，通過設置行高來間接設置行間距
- 一個內聯元素有兩個高度：
content-area內容高度和line-height行高高度【line-height高度用於計算line-box的高度】
content-area的高度與line-height的高度差爲行間距，【或者說是line-height與font-size的計算值之差，按照我的看法就是content-area的高度 =font-size的高度】line-height可以等於、大於或小於content-area的高度（如果line-height<content-area的height，line-box看起來就比content-area內容還矮）- 對於內聯元素，padding 和 border 會增大 background 區域，但是不會增大 content-area（不是行框 line-box 的高度）。 爲什麼不是
line-box的高度，這個我現在還是一知半解的，似懂非懂的狀態，我的理解是line-box的高度和line-height有關，但是line-height又和vertical-align有關，設置不同的vertical-align就會產生不一樣的line-height。希望有同學可以幫我解釋下，讓我醍醐灌頂～- 特殊的內聯元素
- 對於可替換內聯元素（replaced inline elements）、inline-block 元素和 某種特殊格式化上下文（flex box）的內聯元素，
padding、margin和border會增大height（注意margin），因此會影響content-area和line-box的高度 - 如果你將其 height 設置爲 auto 的話，那麼其高度的取值就是
line-height，其content-area的取值也是line-height。
- 對於可替換內聯元素（replaced inline elements）、inline-block 元素和 某種特殊格式化上下文（flex box）的內聯元素，
- 特殊的內聯元素
替換元素
內容不受css視覺格式化模型控制的元素，通過修改某個屬性值，呈現的內容就可以被改變的元素
- 例如
img（src屬性）、嵌入的文檔（iframe）、applet、input（type屬性）、textarea、select、object、audio。這些元素沒有實際的內容，是空元素 - 瀏覽器會根據元素的標籤類型和屬性來顯示這些元素。替換元素在其顯示中生成了框,這就是內聯元素能夠設置寬高的原因
- 都是內聯元素 =>特殊的內聯元素
<img>這類替換元素的基線位於元素的下邊緣，而vertical-align的默認值是基線對齊，（圖片下方會存在幾個像素的空隙）<input>這類可輸入文本的替換元素的基線就是文本的基線
- 尺寸分爲三類：固有尺寸、HTML尺寸、CSS尺寸
- 固有尺寸：替換內容原本的尺寸 => 一個固有的寬度、高度、比率
- 如果僅設置了寬度或者高度，該元素會按照固有尺寸的寬高比例顯示
- 即使替換元素設置爲
display:block；它的寬度也不會撐滿父容器（因爲按照比例）
- HTML尺寸：在HTML屬性上設置的尺寸，會覆蓋固有尺寸
- CSS尺寸：在CSS樣式表中設置的尺寸，將覆蓋固有尺寸和HTML尺寸
- 替換元素可增加line-box高度，但不影響行高line-height。
content height = padding-top + padding-bottom + margin-top + margin-bottom + height
- 內聯元素的高度僅由行高
line-height決定，垂直方向的margin、padding、border不影響行框高度，但替換元素的可以撐開行框。
- 要想替換元素居中，可設置
line-height = height
例子
// html
<body>
<div class ="div1">
<input type="text" value="input裏的值">
</div>
</body>
//css
*{
margin:0;
padding:0;
}
input{
height:90px;
line-height:50px;
padding:10px;
margin:20px;
background-color:#9deaf1;
text-align:center;
}
.div1{
background:red
}
注意點：
1.只設置了input的高度後，它的寬度是按照一定的比例顯示的，設置爲display:block，會發現input的寬度沒有發生任何改變，並沒有去撐滿父容器；
2.input的line-box行框高度爲height+padding+margin的值，並且因爲父容器div1沒有設置line-height，則父容器的行框高度就是子元素input的行框高度，父容器被撐開了；
div.wrapper的高度 = 子元素的行高line-height
// html
<div class='wrapper'>
<strong>hello world</strong>
</div>
// css
*{
margin:0;
padding:0;
}
div.wrapper{
margin:0 auto;
background-color:#9deaf1;
margin-top:100px;
/* line-height:200px; */
}
strong{
padding:40px;
margin:50px;
line-height:50px;
/* height:100px; */
background-color:#5dc2f6;
}
注意點：
- 內聯元素
strong的行框高度僅由行高line-height決定，padding和margin並沒有改變它的行高line-height，如果設置了height會發現也沒改變行框高度； - 父元素的行框高度，受
line-height以及其子元素影響，
- 如果
line-height設置的高度小於子元素形成的行框，子元素形成的就是該元素的行框高度； - 如果
line-height大於子元素形成的行框高度，則父元素的行框就是自身line-height設置形成的行框高度。
- 因爲
div.wrapper沒有設置line-height高度，所以此時的高度=子元素的行內框高度；如果設置line-height:200px;會發現父元素div.wrapper的高度就變爲自己的inline box高度了；
// html
<div class='wrapper'>
<strong>hello world</strong>
</div>
// css
*{
margin:0;
padding:0;
}
div.wrapper{
margin:0 auto;
background-color:#9deaf1;
}
strong{
background-color:#5dc2f6;
}
- 當內聯元素沒有設置
line-height及padding等時，inline-box行內框高度=content-area內容區域高度=元素外部容器的行內框高度； - 當增加
line-height:50px;內聯元素設置line-height會有位置的變化，但沒有改變盒子大小（如下圖所示：在爲內聯元素設置背景時，只有默認高度的地方有背景）；
而位置變化是因爲設定line-height時content-area高度不變，半行距[(line-height-font-size)/2]分別增加/減少到content-area的上下兩邊，因此下移，（如替換元素開頭所說line-height與font-size的計算值之差（行間距）分爲兩半，分別加到一個文本行內容的頂部和底部）
strong{
line-height:50px;
background-color:#5dc2f6;
}
