資訊專欄INFORMATION COLUMN
摘要：對比一下圖片和右邊的等字母，你會發(fā)現(xiàn)這三個字母的小尾巴和圖片下方的空白一樣高。要去掉空格可以使用或?qū)?biāo)簽變?yōu)閴K級元素。用這個試了下，果然有效。非常好的文章的應(yīng)用元素應(yīng)該是以及。如果應(yīng)用在塊級元素上，則會為其子元素應(yīng)用該屬性。
在做項(xiàng)目里一個頁面的時候，要在頁面底部放一張長條的圖片，我就直接放了個圖片在最下面，為其設(shè)置了
width: 100%
ftp 到服務(wù)器上去之后，以后就完工了，結(jié)果打開手機(jī)一看，（圖片）下面有一條白邊??！
各種嘗試（比如外面套個 div 之類）無果，就上網(wǎng)查了下。正好 segmentFault 里有一個類似的問題 為什么 div 里嵌套了 img 底部會有白塊
這里有人解釋了：
因?yàn)閕mg默認(rèn)是按基線(baseline)對齊的。對比一下圖片和右邊的 p, q, y 等字母，你會發(fā)現(xiàn)這三個字母的“小尾巴”和圖片下方的空白一樣高。
要去掉空格可以使用 vertical-align: bottom 或?qū)?img 標(biāo)簽變?yōu)閴K級元素。
用這個 vertical-align 試了下，果然有效。
然后我就查了下這個 vertical-align 屬性，結(jié)果發(fā)現(xiàn)它直接影響著元素在垂直方向上對位置，特別是對于圖片。
查了 dash 文檔里的 vertical-align，又鏈接到了這篇Understanding vertical-align, or "How (Not) To Vertically Center Content"。非常好的文章！
vertical-align 的應(yīng)用元素應(yīng)該是 table-cell 以及 inline-block 。如果應(yīng)用在塊級元素上，則會為其 inline-block 子元素應(yīng)用該屬性。
那如果真的想搞個垂直居中怎么辦？文章還介紹了兩種垂直居中的方法：
一種就是把父設(shè)為 relative，子設(shè)為 absolute 并且把子的 margin-top 設(shè)為負(fù)的自身一半高度（也就是說這里的子元素的高度是一個確定的值）。
還有一種是針對只有一行文本的情況，Set the line-height of the parent element to the fixed height you want.
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111218.html
摘要：移動端活動頁面常常需要能夠分享到各種社交中，常用的有微信等。微信二維碼問題同一個頁面里要是有兩個二維碼，長按掃描總是只能掃出左側(cè)第一個二維碼。 首發(fā)于簡書博客：http://www.jianshu.com/p/e958... 2017-11-25 更新：5. 使用 Gulp 拼合圖片 1. 單個頁面內(nèi)容不能過多 設(shè)計常用尺寸：750 x 1334 / 640 x 1134，包含了手機(jī)頂...
摘要：移動端活動頁面常常需要能夠分享到各種社交中，常用的有微信等。微信二維碼問題同一個頁面里要是有兩個二維碼，長按掃描總是只能掃出左側(cè)第一個二維碼。 首發(fā)于簡書博客：http://www.jianshu.com/p/e958... 2017-11-25 更新：5. 使用 Gulp 拼合圖片 1. 單個頁面內(nèi)容不能過多 設(shè)計常用尺寸：750 x 1334 / 640 x 1134，包含了手機(jī)頂...
摘要：一個元素如果設(shè)置了但沒有設(shè)置此元素的位置在哪在涉及到絕對定位元素的位置問題時一個重要的概念是想要了解元素的位置還得找到此元素的才行如下是我進(jìn)行的一系列測試以及對測試結(jié)果的試探性解釋文中的英文術(shù)語都不翻譯方便直接查或者其他技術(shù)文檔請持有懷疑精 一個元素如果設(shè)置了position: absolute;, 但沒有設(shè)置top, right, bottom, left, 此元素的位置在哪? 在涉...
摘要：多行文本溢出時出現(xiàn)省略號本文推薦種方法。溢出時不顯示溢出的內(nèi)容發(fā)生溢出時使用省略號代替瀏覽器的私有屬性。顯示指定的文本。顯示多少行塊級元素。默認(rèn)顯示的替代文本延遲多長時間后執(zhí)行是否有窗口大小改變時執(zhí)行默認(rèn)操作具有這個類的元素。 多行文本溢出時出現(xiàn)省略號 本文推薦2種方法。 1. css tip：只兼容chrome內(nèi)核的瀏覽器。ff不支持。 .box { overflow: hi...
摘要：問題描述寫的時候遇到了一個小問題只包含一個元素，但是頁面展示上卻比高出一點(diǎn)。因此當(dāng)我們的塊級元素包含這個行內(nèi)元素的時候底部就出現(xiàn)了的間距。 問題描述 寫css的時候遇到了一個小問題div只包含一個img元素，但是頁面展示上div卻比img高出一點(diǎn)。當(dāng)時只覺得匪夷所思...找了半天自己樣式的問題...情況如下圖 showImg(https://segmentfault.com/img/b...
閱讀 2190·2021-09-22 10:56
閱讀 1492·2021-09-07 10:11
閱讀 1813·2019-08-30 15:54
閱讀 2299·2019-08-30 15:44
閱讀 2318·2019-08-29 12:40
閱讀 3040·2019-08-28 18:25
閱讀 1750·2019-08-26 10:24
閱讀 3195·2019-08-23 18:39
