IFC：inline formatting content
基本知識(shí)點(diǎn)：深入理解CSS：字體度量、line-height扬绪、vertical-align
理解font-size:規(guī)定em-square
font-size: 100px;/*和字體大小沒有直接關(guān)系,不同字體font-size后的表現(xiàn)樣式不一樣。字體大小是由設(shè)計(jì)師決定的裤唠。font-size指的不是看的見的任何高度挤牛，指的是看不見的一個(gè)字體的框框*/
理解line-height：決定內(nèi)聯(lián)元素的真實(shí)占位。
- 行和：每一行的高度是由每一個(gè)span的真實(shí)占地面積決定种蘸，和可視化占地面積無關(guān)墓赴。
- 每一行的行和是所有的字以基線對(duì)齊得到的高度確定的。
- 字體不同航瞭，基線也不同诫硕。
- 父元素寫一個(gè)line-height，會(huì)使其子內(nèi)聯(lián)元素自動(dòng)居中刊侯。
- 父元素設(shè)置line-height章办，但是其高度不一定是line-heiht的取值。
兩個(gè)字體不同的span會(huì)使其父容器變高
- 當(dāng)內(nèi)部兩個(gè)inline元素的字體不同時(shí)滨彻，基線不同藕届，又因?yàn)橐曰€對(duì)齊，所以會(huì)使其父容器的高度變高亭饵。
span {
font-size: 100px;
border: 1px solid red;
line-height: 100px;
}
span:nth-child(2) {
font-family: SimSun-ExtB;
}
p {
border: 1px solid black;
margin:20px 0;
}
<p>
<span>你B</span>
<span>你B</span>
<span>你B</span>
</p>
當(dāng)不寫line-height時(shí)休偶，line-height是多少。
line-heigt默認(rèn)值：normal辜羊，是字體設(shè)計(jì)師決定的踏兜，不同字體的line-height是不同的。最少：字體的0.618八秃；最大：字體的3.378倍碱妆，一般是1.5；即line-height:1.5喜德；
vertical-align：
- vertical-align: top / bottom山橄，表示與 line-box 的頂部或底部對(duì)齊，基本沒用
-
vertical-align: text-top / text-bottom，表示與 content-area 的頂部或底部對(duì)齊
v2-c4550a3a0387a2dd7fd323bd9e98ccf5_r.jpg - vertical-align:middle;middle不是居中對(duì)齊航棱。大部分可以對(duì)齊睡雇，但是字體很奇葩，就很難對(duì)齊饮醇。middle 的意思是「用父元素 baseline 高度加上父元素中 x-height 的一半的高度來對(duì)齊當(dāng)前元素的垂直方向的中點(diǎn)」它抱。即：設(shè)置middle的元素自己的中線對(duì)齊另外一個(gè)元素的基線。
所以朴艰，對(duì)齊方式使用flex观蓄。
圖片下面為什么有空隙？
<div>
<img src = "https://i.ytimg.com/vi/SfLV8hD7zX4/maxresdefault.jpg">
</div>
div {
border: 1px solid red;
}
img {
height: 200px;
}
-
圖片和其父容器之間存在空隙
TIM圖片20190112142437.png - 原因：父容器中有一個(gè)內(nèi)聯(lián)元素祠墅，也會(huì)存在對(duì)齊侮穿，它以看不見的基線對(duì)齊。
- 不要使用font-size：0毁嗦；解決亲茅，會(huì)引起其他bug。
- 可以采用
vertical-align:top / bottom / middle / text-top / text-bottom
div {
border: 1px solid red;
}
img {
height: 200px;
vertical-align: top;
}
不要用inline-block做布局狗准，兩個(gè)inline-block元素之間存在空格克锣，因?yàn)镠TML中加了空格。
span {
border: 1px solid red;
}
<div class = "parent">
<span class = "child1">○</span>
<span class = "child2">你</span>
</div>
TIM圖片20190112144009.png
- 解決辦法： flex,或者float
.parent {display: flex;}
總結(jié)
- font-size指的是：em-square
- line-height指的是： 實(shí)際占地高度
- 100px 100px -> 103px腔长，因?yàn)閮蓚€(gè)內(nèi)聯(lián)元素之間袭祟，因字體的不同，導(dǎo)致基線不同捞附，所以存在高度差
- vertical-align: top ：實(shí)際高度頂部對(duì)齊巾乳。 middle：用父元素 baseline 高度加上父元素中 x-height 的一半的高度來對(duì)齊當(dāng)前元素的垂直方向的中點(diǎn)。 bottom 故俐、 text-top想鹰、 text-bottom
- 圖片下面有空隙,因?yàn)閳D片會(huì)以看不見的基線對(duì)齊
解決辦法：
vertical-align: topimg{display: block;}-
font-size: 0傻逼采用
- inline-block 元素對(duì)不齊 ——無解 —— 用 flex 或 float
- inline-block 有空隙 ——用 flex 或 float
