南寧網(wǎng)站建設(shè)醉懂網(wǎng)絡(luò)外鏈官網(wǎng)
一、vertical-align
在學(xué)習(xí)vertical-align的時候,可能會很困惑。即使網(wǎng)上有一大推文章講veitical-align,感覺看完好像懂了,等自己布局的時候用到vertical-align的時候好像對它又很陌生。這就是我在布局的時候遇到的問題。
本來vertical-align就很不好理解,網(wǎng)上又有很多大佬把它和line-height放在一起講,我覺得這是造成學(xué)習(xí)這個屬性困惑的原因之一。其實我認為這兩個屬性關(guān)系不大。
我希望看這篇文章的時候都默認了解了基本的知識點,比如行高是什么,vertical-align的官方定義,line box(行盒),inline-level 的基線,inline-level 默認基線對齊。如果對這些還不明白可以去MDN上,或者我推薦的這篇文章css vertical-align你真的很了解嘛? 仔細看看,因為這里沒有介紹基本含義,只是記錄我當(dāng)時踩的坑。
我知道 vertical-align默認是基線對齊,也明白一個img底下為啥會多出來空白內(nèi)容,而我們修改了vertical-align屬性值,空白就會消失。
我疑惑的點是,我們對inline-level設(shè)置的vertical-align到底是和父元素的什么對齊,當(dāng)時我有以下幾點想法,但都證明是錯誤的。
1、inline-level設(shè)置的vertical-align始終和父元素的baseline對齊;
例如:inline-level設(shè)置了vertical-align:top;那結(jié)果應(yīng)該是inline-level的top去和父元素的baseline對齊,經(jīng)驗證并不對
2、inline-level設(shè)置的vertical-align始終和父元素對應(yīng)的子元素的vertical-align去對齊
例如:inine-level設(shè)置了vertical-align:top;那結(jié)果應(yīng)該是inline-level的top和父元素的top對齊,經(jīng)驗證也不對。
3、元素的對齊方式始終是基線對齊,inline-level設(shè)置的vertical-align行盒相對自己來說行盒的基線就是自己設(shè)置的vertical-align的值
例如:inline-level設(shè)置了vertical-align:top;行盒的基線就變成了top,然和在將inline-level和行盒的top對齊,毋庸置疑這也是錯誤的。
我也不知道我在學(xué)習(xí)vertical-align怎么會有這么多錯誤的想法,之所以記錄下來,是想讓自己知道學(xué)習(xí)知識點不要過多的想當(dāng)然,要仔細去看看官方到底是怎么定義的。
之所以會有這么多錯誤的想法,是因為vertical-align的每個值的含義區(qū)別很大,真正理解每個值的含義,那就能明白vertical-align的各種現(xiàn)象了。
重點來了
看W3C對vertical-align給出的定義:
官方文檔的翻譯:vertical-align會影響行內(nèi)級塊元素在一個行盒中垂直方向的位置。
我把那篇文章有兩句重點的地方粘過來了
一定要仔細去看vertical-align每個值的含義
baseline
Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent’s baseline.
將框的基線與父框的基線對齊。 如果框沒有基線,則將底部邊距邊緣與父級的基線對齊。
middle
Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
將框的垂直中點與父框的基線加上父框 x 高度的一半對齊。
sub
Lower the baseline of the box to the proper position for subscripts of the parent’s box. (This value has no effect on the font size of the element’s text.)
將框的基線降低到父框下標的適當(dāng)位置。 (此值對元素文本的字體大小沒有影響。)
看這個例子
.box{width: 300px;height: 200px;text-align: center;background-color: orange;}.box img{width: 60px;vertical-align: sub;}<div class="box"><img src="./imgs/165.png" alt=""><sub>sub text</sub>xxx</div>
super
Raise the baseline of the box to the proper position for superscripts of the parent’s box. (This value has no effect on the font size of the element’s text.)
將框的基線提高到父框上標的正確位置。 (此值對元素文本的字體大小沒有影響。)
<style>.box{width: 300px;height: 200px;text-align: center;background-color: orange;}.box img{width: 60px;vertical-align: sub;}</style><div class="box"><img src="./imgs/165.png" alt=""><sup>super text</sup>xxx</div>
text-top
Align the top of the box with the top of the parent’s content area
將框的頂部與父內(nèi)容區(qū)域的頂部對齊
text-bottom
Align the bottom of the box with the bottom of the parent’s content area
將框的底部與父內(nèi)容區(qū)域的底部對齊
<percentage>
Raise (positive value) or lower (negative value) the box by this distance (a percentage of the ‘line-height’ value). The value ‘0%’ means the same as ‘baseline’.
百分比的值是相對該元素的line-height數(shù)值的(元素有默認行高的),具體的升高/降低數(shù)值由由該元素的line-height的值乘以百分比計算得出。相對自己baseline,升高或較低該元素一定距離。
<length>
Raise (positive value) or lower (negative value) the box by this distance. The value ‘0cm’ means the same as ‘baseline’.
該值為一定的像素數(shù)值,與vertical-align:percentage效果類似,除了移動的距離是被計算出來的。
vertical-algin和line-height真的像網(wǎng)上說的關(guān)系不可分割嗎
我倒是覺的其實完全沒必要每次將這兩個一起介紹,因為它倆的關(guān)系沒有那么深,一起說反而會讓初學(xué)者搞蒙。
我們知道line-height是設(shè)置一行文本的高度,其實就是一個行盒的高度。
vertical-align和line-height有關(guān)聯(lián)的地方就是如果父元素設(shè)置行高等于它的height,那么就是這個行盒的高度就是父元素的高度,img又設(shè)置了vertical-align:middle;所以img的中垂線和父元素的baseline+x-height的一半(字母x高度的一半)位置對齊,就是如圖經(jīng)典的一幕。
<style>.box{padding-left: 20px;line-height: 100px;border: 1px solid gray;}.box img{width: 60px;vertical-align: middle;}</style><div class="box"><img src="./images/slin.jpg" alt=""><span>x</span>x</div>
所以vertical-align也沒有那么難吧,它和line-height也并不像網(wǎng)上說所謂的基友關(guān)系。
現(xiàn)在我們來看為什么會說像上面的設(shè)置圖片只是相似垂直居中,實際上并沒有真正左到居中
我們?nèi)绻靼琢诵懈呔椭浪鼤π芯嘧鲆粋€等分,那么文字就會是垂直居中的。但是x交叉點(x一半的位置)沒有在文本中線這個位置,中線是在x一半偏上一點點的位置,即和文本x一半對齊的img也就在中線偏下一點點的位置。(我們這里說的文本的中線不是圖里這個藍色線middle,而是整行文本的中垂線)
二、水平居中方法總結(jié)
1、行內(nèi)級元素
設(shè)置父元素的text-align:center
2、塊級元素
設(shè)置當(dāng)前塊級元素margin: 0 aut0;(此塊級元素是有寬度的,塊級元素沒有設(shè)置寬度就獨占一行了)
3、絕對定位
元素有寬度情況下,left:0/right:0/mafrgin:0 auto;
4、left + translate
此方法和垂直居中方法原理一樣,元素設(shè)置相對定位,不用脫標(元素如果本身有需要設(shè)置了絕對定位也是這個效果);且只需要做兩件事
- 讓元素向下位移父元素的50%
- 讓元素向上位移自身的50%
<style>.box{height: 200px;background-color: orange;}.child{position: relative;width: 60px;height: 60px;background: darkred;left: 50%;transform: translateX(-50%);}</style><div class="box"><div class="child"></div>
</div>
5、flex
justify-content:center
三、垂直居中方法總結(jié)
1、絕對定位
元素有高度情況下,top:0/ bottom:0/margin:auto 0;
2、flex布局
弊端:
- 當(dāng)前flex布局中所有的元素都會被垂直居中
- 相對來說,兼容性差一點點(基本可以忽略)
3、top + translate
<style>.box{height: 200px;background-color: orange;}.child{position: relative;width: 60px;height: 60px;background: darkred;top: 50%;transform: translateY(-50%);}</style><div class="box"><div class="child"></div></div>
四、理解auto的含義
五、BFC是什么
css最難懂部分就是屬性值auto的理解、vertical-align和line-height的關(guān)系以及BFC是什么
水平居中的方法和垂直居中整理