資訊專欄INFORMATION COLUMN
摘要：張?chǎng)涡窭蠋熢谖恼挛覍?duì)的一些理解與認(rèn)識(shí)一中提到屬性的表現(xiàn)與否，僅僅與其父標(biāo)簽有關(guān)，至于我們通?？吹降呐c后面的文字垂直居中顯示那都是假象經(jīng)過摸索測(cè)試，才對(duì)這句話有種豁然開朗的感覺。匿名元素我是一段卡哇伊的文字。
張?chǎng)涡窭蠋熢谖恼隆段覍?duì)CSS vertical-align的一些理解與認(rèn)識(shí)（一）》中提到：
vertical-align:middle屬性的表現(xiàn)與否，僅僅與其父標(biāo)簽有關(guān)，至于我們通常看到的與后面的文字垂直居中顯示那都是假象！
經(jīng)過摸索測(cè)試，才對(duì)這句話有種豁然開朗的感覺。
html：
匿名元素
我是一段卡哇伊的文字。
css：
.box {
margin: 36px 0;
border: 1px dashed blue;
font-size: 12px;
color: white;
background: red;
/*height: 50px;*/
}
.box .dot {
display: inline-block;
width: 16px;
height: 16px;
/*line-height:50px;*/
background: white;
vertical-align: baseline; // 這個(gè)baseline到底在哪里
}
.box .text {
vertical-align: middle;
/*line-height:50px; */
font-size: 16px;
}
首先要明白的是，一個(gè)行內(nèi)元素有四條看不見的線（直接復(fù)制了張老師文章里的圖片）：
這四條線的位置由誰(shuí)決定呢，我認(rèn)為是字體的大小，當(dāng)字體的font-size:0時(shí)，則四線重合。
所以實(shí)際上子元素的vertical-align對(duì)齊是父元素的這幾條線，看下圖，我直接在父元素span里放樂“匿名元素”幾個(gè)字，你能直觀的發(fā)現(xiàn)，子元素對(duì)齊的就是“匿名元素”的baseline
另外 ：
1.vertical-align: baseline/middle...是指此元素的baseline/middle line 和父元素的對(duì)齊
2.對(duì)于空的元素，其baseline就是底邊緣，比如.dot元素
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/115605.html
摘要：張?chǎng)涡窭蠋熢谖恼挛覍?duì)的一些理解與認(rèn)識(shí)一中提到屬性的表現(xiàn)與否，僅僅與其父標(biāo)簽有關(guān)，至于我們通?？吹降呐c后面的文字垂直居中顯示那都是假象經(jīng)過摸索測(cè)試，才對(duì)這句話有種豁然開朗的感覺。匿名元素我是一段卡哇伊的文字。 張?chǎng)涡窭蠋熢谖恼隆段覍?duì)CSS vertical-align的一些理解與認(rèn)識(shí)（一）》中提到： vertical-align:middle屬性的表現(xiàn)與否，僅僅與其父標(biāo)簽有關(guān)，至于我們通...
摘要：某日閱讀世界，筆者的一段話鞭撻了我的靈魂。原文是這樣的說到這里，我就忍不住多說兩句。很多其實(shí)工作很多年的前端開發(fā)人員，也可能不知道的屬性值支持?jǐn)?shù)值，更不知道支持負(fù)值，這著實(shí)讓我很意外。只顯示文本的時(shí)候行高是。上集完敬請(qǐng)期待中下集 showImg(https://segmentfault.com/img/bVbmTbb?w=277&h=336); 某日閱讀《CSS世界》，筆者的一段話鞭撻...
摘要：下的屬性值詳解以下內(nèi)容均在中測(cè)試默認(rèn)對(duì)齊方式這里作為參考系，而它的就是所要對(duì)齊的了。沒有任何變化。那改變又如何呢為了讓的清晰可見，特意添加一個(gè)的包裹著。 前言 一直聽說line-height是指兩行文本的基線間的距離，然后又說行高等于行距，最近還聽說有個(gè)叫行間距的家伙，@張?chǎng)涡襁€說line-height和vertical-align基情四射，貴圈真亂啊。。。。。。于是通過本篇來一探究竟...
摘要：之前看了張大大的博客總結(jié)一下我對(duì)和的一些認(rèn)知。站在巨人的肩膀上學(xué)習(xí)，再次謝謝張大大阮大大的各種分享。 對(duì)于元素的水平居中，我根據(jù)我自己之前的一些學(xué)習(xí)來進(jìn)行一些總結(jié)，如果有不對(duì)的地方，歡迎指正~ 一、讓大小不固定的元素垂直居中 因?yàn)椋罕砀竦膯卧竦奶貏e屬性：垂直居中等； `div.parent { display: table-cell; vertical-align...
摘要：之前看了張大大的博客總結(jié)一下我對(duì)和的一些認(rèn)知。站在巨人的肩膀上學(xué)習(xí)，再次謝謝張大大阮大大的各種分享。 對(duì)于元素的水平居中，我根據(jù)我自己之前的一些學(xué)習(xí)來進(jìn)行一些總結(jié)，如果有不對(duì)的地方，歡迎指正~ 一、讓大小不固定的元素垂直居中 因?yàn)椋罕砀竦膯卧竦奶貏e屬性：垂直居中等； `div.parent { display: table-cell; vertical-align...
閱讀 1083·2021-11-23 09:51
閱讀 2763·2021-08-23 09:44
閱讀 713·2019-08-30 15:54
閱讀 1491·2019-08-30 13:53
閱讀 3159·2019-08-29 16:54
閱讀 2597·2019-08-29 16:26
閱讀 1256·2019-08-29 13:04
閱讀 2380·2019-08-26 13:50
