目錄
vertical-align
一、vertical-align基本：
二、vertical使用環(huán)境：
三、vertical-align ，line-height，幽靈空白點(diǎn) 導(dǎo)致神秘高度的問(wèn)題：
1. 解釋莫名高度出現(xiàn)的原因
2、調(diào)整div框框比圖片 大的問(wèn)題：
3、內(nèi)聯(lián)導(dǎo)致margin-top:-1000px失效的問(wèn)題
四、vertical-align的線性屬性
1、inline-block和baselineicon 簡(jiǎn)化開(kāi)發(fā)
2、top/bottom
3、middle近似居中
五、文本屬性/上下標(biāo)text-top:盒子頂部和父級(jí)內(nèi)容區(qū)域的頂部對(duì)齊上下標(biāo)類(lèi)屬性值
六 、彈出框
vertical-align 為css中最難的一部分，需要和內(nèi)聯(lián)盒子模型，不同屬性 以及不同屬性在table-cell inline-block共同左右下才有的效果，最后的表現(xiàn)形式和x line-height font-size font-family ' 幽靈空白點(diǎn)'都有密不可分的關(guān)系
一、vertical-align基本：
當(dāng)我們?cè)O(shè)置了line-height 和 font-size的時(shí)候，往往發(fā)現(xiàn)元素比我們的line-height高，為什么了？這個(gè)就是由vertical-align導(dǎo)致的；
vertical-align的值有以下幾種：
- 線類(lèi)：
baselinetop middle bottom - 文本類(lèi):
text-top text-bottom - 上下標(biāo)類(lèi):
sub,super -
數(shù)值百分比類(lèi):
20px2em20%
上邊三種我們常見(jiàn)，但是數(shù)值和百分比功能強(qiáng)大，他兼容性比較好，然后不同的字體base-line能達(dá)到的效果并不一致，所以用數(shù)值比較直接一點(diǎn)，也能夠自由的調(diào)整、精確控制，當(dāng)vertical-align:0的時(shí)候表示的是baseline 然后在這個(gè)基礎(chǔ)上上移一個(gè)像素或者是下移一個(gè)像素。
- 百分比是相對(duì)于
line-height的 - 但是我們還是建議直接用
px，因?yàn)楫?dāng)我們具體寫(xiě)的時(shí)候，行高一般都已經(jīng)確定了，很少會(huì)改變行高的，所以這個(gè)高度百分比意義不大，還需要計(jì)算，不如直接用vertical-align:1px;這種語(yǔ)法
二、vertical使用環(huán)境：
只能作用在
display的計(jì)算值為inline、inline-block、inline-table、table-cel上并不是我們?cè)O(shè)置了
display或者是默認(rèn)的行內(nèi)元素就沒(méi)問(wèn)題了，狠毒css屬性會(huì)在背后默默的改變display的屬性，像float，position：absolute
當(dāng)display:table-cell的時(shí)候，vertical-align這個(gè)語(yǔ)句是需要作用在自己身上，才能讓兒子居中的，其他的都是作用在兒子身上的
其他vertical-align不起作用的情況：
1、父元素的行高不夠
<style>
.point03 .box1 {
height: 128px;
background: gray;
}
.point03 .content1 {
vertical-align: middle;
height: 50px
}
</style>
<div class="point03 box">
<div class="box1">
<img src="./img/test.png" alt="" class="content1">
</div>
</div>
效果如圖，并沒(méi)有垂直居中，那是因?yàn)橛撵`空白節(jié)點(diǎn)不夠大，加一行代碼就好了
.point03 .box1 {
height: 128px;
background: gray;
}
2、作用在table-cell的字節(jié)點(diǎn)上的效果
<style>
.point03 .box1 {
height: 128px;
background: gray;
display: table-cell
}
.point03 .content1 {
vertical-align: middle;
height: 50px
}
.point03 .box2 {
height: 128px;
background: #ccc;
display: table-cell;
vertical-align: middle;
}
.point03 .content2 {
height: 50px
}
</style>
<div class="point03 box">
<div class="box1">
box01
<img src="./img/test.png" alt="" class="content1">
</div>
<div class="box2">
box02
<img src="./img/test.png" alt="" class="content2">
</div>
</div>
如下圖可見(jiàn)，verticalalign作用在img上的時(shí)候并沒(méi)有居中，只有在display:table-cell的元素上的時(shí)候才能夠居中
雖然就效果而言，
table-cell元素設(shè)置了vertical-align垂直對(duì)齊的是子元素，但是他作用的并不是子元素而是table-cell元素自己，就算table-cell元素的子元素是一個(gè)塊級(jí)元素的，也一樣可以讓其有個(gè)字垂直對(duì)齊的表現(xiàn)
三、vertical-align ，line-height，幽靈空白點(diǎn) 導(dǎo)致神秘高度的問(wèn)題：
1. 解釋莫名高度出現(xiàn)的原因
<style>
.point04 .box1 {
line-height: 64px;
font-size: 20px;
}
.point04 .content1 {
font-size: 32px;
}
</style>
<div class="point04 box">
<div class="box1">
x
<span class="content1"> 文本x</span>
</div>
</div>
解釋：如上，我們?cè)O(shè)置了line-height:64px得到的高度卻是68這四個(gè)像素來(lái)自于哪里呢？來(lái)自于文本前邊的幽靈空白節(jié)點(diǎn)，這里我們用span前邊的x表示空白節(jié)點(diǎn)，因?yàn)? span前邊的空白節(jié)點(diǎn)的font-size是繼承的（這里我寫(xiě)在box下模擬繼承）font-size不一樣導(dǎo)致了基線位置不一樣，font-size越大，基線越靠下，文本的基線就比前邊的x的基線靠下，這樣差開(kāi)的基線使兩個(gè)字不在同一水平上，導(dǎo)致高度比line-height要高
解決方法：兩種方式
- 改變對(duì)齊方式，
.point04 .content1 { font-size: 32px; vertical-align:top;}上對(duì)齊就好了 - 讓幽靈空白點(diǎn)的字體大小和span里額一樣大，也就是
.point04 .box1 { line-height: 64px; font-size: 32px; }
2、調(diào)整div框框比圖片 大的問(wèn)題：
<style>
.point04{margin: 100px;}
.point04 .box1 {
width: 300px;
text-align: center;
border: 1px solid #ccc;
}
.point04 .content1 {
height: 70px;
}
</style>
<div class="point04 box">
<div class="box1">
x
<img src="./img/test02.jpeg" class="content1"/>
</div>
</div>
解釋 如圖，高度77px 因?yàn)榍斑厁所代表的幽靈空白點(diǎn)導(dǎo)致，所以會(huì)大于圖片的70px的高度，其實(shí)這個(gè)效果的出現(xiàn)是line-height vertical-alien 幽靈空白點(diǎn)共同作用產(chǎn)生的，
解決方法： 四種方式：
- 圖片塊狀，這樣同時(shí)干掉了
line-heightvertical-align還有幽靈空白點(diǎn) -
line-height足夠小，半間距小到x的下邊緣位置靠上就好了，這樣就沒(méi)有下邊的半間距撐開(kāi)了。讓line-height:0 -
Font-size足夠小 ，同時(shí)line-height:150%/1.5之類(lèi)的。 - 圖片設(shè)置其他的
vertical-align的屬性值，top,middle,bottom都可以
3、內(nèi)聯(lián)導(dǎo)致margin-top:-1000px失效的問(wèn)題
<style>
.point04 .box1 {
border: 1px solid #ccc;
}
.point04 .content1 {
margin-top:-1000px;
height: 70px;
}
</style>
<div class="point04 box">
<div class="box1">
x
<img src="./img/test02.jpeg" class="content1"/>
</div>
</div>
如圖，本來(lái)設(shè)置了margin-top:-1000px;我們期望的是吳彥祖能夠飛掉，消失在框框中，但是，圖中我們看到，并沒(méi)，原理和上邊講的高度變高是一樣的，css世界中，非主動(dòng)觸發(fā)位移的內(nèi)聯(lián)元素是不可能跑到計(jì)算容器外邊的
- 幽靈空白點(diǎn)無(wú)法主動(dòng)設(shè)置到
inline的外邊 - 幽靈空白點(diǎn)的下邊和圖片是需要對(duì)齊的
所以圖片無(wú)法跑到box的外邊了
四、vertical-align的線性屬性
1、inline-block和baseline
一開(kāi)始我們知道線性屬性有：baseline top middle bottom
Inline 的vertical-align的baseline就是x的下邊緣
如果是inline-block元素，里邊沒(méi)有內(nèi)聯(lián)元素，或者overflow不是visible,baseline就是margin的底邊緣
否則就是元素里左后銀行內(nèi)聯(lián)元素的基線
<style>
.point05 {
margin: 100px;
}
.point05 .box1 {
display: inline-block;
width: 150px;height: 150px;
border: 1px solid #cad5ec;
background: #f0f3f9;
}
</style>
<div class="point05 box">
<span class="box1">
</span>
<span class="box1">x-baseline</span>
</div>
效果如圖，沒(méi)有文字的時(shí)候，基線就是容器的下邊緣，也就是下邊框下邊的文字。如果里邊有文字的時(shí)候也就有了行內(nèi)元素，第二個(gè)框就是這些字符的基線，我們看到第一個(gè)框的下邊緣和第二個(gè)框的x的下邊緣對(duì)齊了。
如果line-height:0
line-height為0 字符占據(jù)的高度也是另，高度的起始位置就成了中心位置，這樣文字就有一半到了外邊
icon 簡(jiǎn)化開(kāi)發(fā)
<style>
.point05.box1 {
line-height: 20px;
}
.point05 .icon{
display: inline-block;
width: 20px;height: 20px;
white-space: nowrap;/*不換行*/
letter-spacing: -1em;/*所有的里邊的子都在一塊兒顯示*/
text-indent: -99em;/*首行縮進(jìn)的看不見(jiàn)了*/
}
.icon::before{content: "\3000"}
.icon_delete{
background: url(./img/delete@2x.png) no-repeat center;
}
</style>
<div class="point05 box1">
<span class="icon icon_delete">刪除</span>delete
</div>
注意：
- 圖的高度和當(dāng)前的行高都是20px;(不是由圖片說(shuō)了算，而是css決定了多么高)
- 圖標(biāo)標(biāo)簽里永遠(yuǎn)有字符：（before的作用就是如此）
- 圖標(biāo)不適用
overflow:hidden是為了保證里邊的字符基線，同時(shí)還要讓里邊的字符不可見(jiàn) -
box外邊的容器需要時(shí)inline-block,然后就是找基線的問(wèn)題了
如下，不同的字體大小都沒(méi)有問(wèn)題
<Style>
.point05 .larger {
font-size: 20px;
}
</Style>
<div class="point05 box1">
<h4> 標(biāo)簽內(nèi)沒(méi)有文字
</h4>
<p class="">
x
<span class="icon icon_delete"> </span> x刪除
</p>
<h4>標(biāo)簽有文字</h4>
<p class="">
<span class="icon icon_delete "> 刪除 </span> x刪除
</p>
<h4>large</h4>
<p class="larger">
<i class="icon icon_delete "> 刪除 </i> x刪除</p>
<p>
<i class="icon icon_delete "> </i> x刪除
</p>
</div>
2、top/bottom
top垂直上邊對(duì)齊
- 內(nèi)聯(lián)元素，元素底部和當(dāng)前行框盒子的頂部對(duì)齊
Table-cell元素底padding邊緣和表哥行的頂部對(duì)齊
如果是內(nèi)聯(lián)元素，則和這一行位置最高的內(nèi)聯(lián)元素頂部對(duì)齊
如果是table-cell 腦補(bǔ)成td 和tr的上邊緣對(duì)齊
這里的邊緣指的是行框盒子，而不是塊狀容器的上下邊緣
3、middle近似居中
- 內(nèi)聯(lián)元素，元素垂直中心點(diǎn)和行框盒子基線往上1/2
x-height處對(duì)齊 -
Table-cell單元格填充盒子相對(duì)于外面的表格行居中
關(guān)鍵是第一點(diǎn)，盒子的基線就是x的下邊緣，x-height就是x的高度，所以middle的點(diǎn)就是x的交叉點(diǎn)，但是一般來(lái)說(shuō)，x的交叉點(diǎn)因字體的原因會(huì)略微靠下，一般來(lái)說(shuō)也就是一兩個(gè)像素的問(wèn)題，font-size越大越明顯
解決：如果要實(shí)現(xiàn)真正意義上的垂直居中，通常是font-size:0將x變成一個(gè)看不見(jiàn)的點(diǎn)，這樣就可以實(shí)際上的居中了
五、文本屬性/上下標(biāo)
text-top:盒子頂部和父級(jí)內(nèi)容區(qū)域的頂部對(duì)齊
內(nèi)容區(qū)域：可以看成是firefox /ie瀏覽器文本選中當(dāng)前元素font-size和font-family下應(yīng)由區(qū)域的大小
實(shí)用性不強(qiáng)，因?yàn)椋?/p>
- 場(chǎng)景比較缺乏，當(dāng)前
css以精致布局為主流，對(duì)齊文本場(chǎng)景比舊時(shí)代少很多 - 文本類(lèi)垂直對(duì)齊理解成本高，不如直接用vertical-align或者是relative等
- 內(nèi)容區(qū)域不直觀，容易改變
上下標(biāo)類(lèi)屬性值
sub和super兩個(gè) ，b的圈在小編，表示下標(biāo)，p在上邊，標(biāo)上上標(biāo)
vertical-align:super:提高盒子的基線到父級(jí)合適的上標(biāo)基線位置
。。。合適的位置，這個(gè)語(yǔ)義這么不明確，怎么玩。。。
注意的是，vertical-align不會(huì)改變font-size的大小，但是可以實(shí)用<sup></sup>這一類(lèi)的標(biāo)簽
六 、彈出框
<style>
.point06.container{
position: fixed;
top: 0;right: 0;bottom: 0;left: 0px;
background: rgba(0,0,0,.5);
text-align: center;
font-size:0;
white-space: nowrap;
overflow: auto;
}
.point06.container::after{
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.dialog{
display: inline-block;
vertical-align: middle;
background: white;
text-align: left;
font-size: 14px;
white-space: nowrap;
}
.content {
width: 240px;
height: 120px;
padding: 20px;
}
</style>
<div class="point06 container">
<div class="dialog">
<div class="content">test</div>
</div>
</div>
