成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS 行內(nèi)對齊的黑魔法

enda / 2374人閱讀

摘要：魔法完整代碼如下今日瞎選篇以上代碼運(yùn)行效果和之前一摸一樣這里就不一一截圖費(fèi)大家流量啦良心前端。。。。對這個(gè)屬性不熟悉的朋友可以去看的文檔幾種語法如下我們用的這個(gè)長度單位實(shí)際應(yīng)用較少，卻是行內(nèi)元素垂直對齊的黑魔法。

本文和以前的文章類似，orange 盡量帶給大家分享實(shí)際項(xiàng)目中的坑怎么填，當(dāng)然只是提供思想，方法很多歡迎討論，還有就是對于剛上手前端的新人不是特別友好，沒關(guān)系，涉及到基礎(chǔ)知識(shí)我會(huì)對應(yīng)的進(jìn)行指引，給出鏈接或給出提示，大家可以自行 Google(百度)。

說到行內(nèi)對齊大家可能會(huì)想到類似水平對齊，垂直對齊總結(jié)類型的文章，既然我們叫 黑魔法 就不會(huì)是基礎(chǔ)的對齊教程，基礎(chǔ)教程的文章好多，大家想必都知道多種方法實(shí)現(xiàn)對齊

項(xiàng)目背景

還是 orange 所在公司的移動(dòng)端項(xiàng)目，上案例

截多了，咱們只看第一行的文字，算是每一天都有的 title，有人說: TMD 你在逗我？這有什么可講的誰都會(huì)寫好不好！

先別激動(dòng)，我當(dāng)然不是解釋這個(gè)布局怎么實(shí)現(xiàn)的，簡單的例子更容易解釋問題，繼續(xù)往下看初步實(shí)現(xiàn)的代碼，


  14 OCT
  x
  今日瞎選6篇

截圖如下

細(xì)心的朋友看出問題了，看不出也沒關(guān)系，我們加兩條輔助線嘛！


  14 OCT
  x
  今日瞎選6篇

效果如下

好，相信大家現(xiàn)在一目了然存在的問題了，那就是前面的 date 并沒有垂直居中，原因呢！解釋起來也簡單

這里只需要修改一行代碼就能回答大家的疑問

14 OCT orange

將上文對應(yīng) html 修改后，得到截圖

這個(gè)讓我不禁想起了小學(xué)英語作業(yè)本的四線格，哈哈，大寫字母的確都在上方的兩個(gè)格，而小寫上中下都有例子，多帶帶看 g，很好解釋上面的顯現(xiàn)了吧。

看似簡單的案例還就是這么特殊，恰巧都是數(shù)字和大寫字母，細(xì)心的還會(huì)發(fā)現(xiàn)后面的 6 也有問題，一不留神，不居中了，設(shè)計(jì)來找你，你一臉蒙逼的說我是按照居中寫的啊，解決不了了？

不是的，我們接下來就是解決這個(gè)問題的，現(xiàn)實(shí)項(xiàng)目要更復(fù)雜一些，有經(jīng)驗(yàn)的前端知道字體間的差異，個(gè)別的字體上下相差特別懸殊，

這里前后的字體是不同的，但幸好垂直方向的差異不是很大，這里我引入了項(xiàng)目原有的字體，中間的 x 其實(shí)是個(gè) svg 這里不贅述。因?yàn)榭炊枷朐賮硪话賯€(gè)不對齊的你也能迎刃而解。

進(jìn)入真正的魔法世界，針對此案例給出兩個(gè)思路大家自行選擇

inline-block 魔法

不一步一步解釋，直接上已經(jīng)解決問題的代碼


  
14 OCT

  
x

  
今日瞎選6篇

效果如下

好棒啊，我只改變了后面文字的 font-size: 16px; 解決問題了耶，高興的拿給設(shè)計(jì)師，對比之后返工了，

what fuck？什么鬼？心中一萬個(gè)草泥馬（神獸）奔騰而過，仔細(xì)看！瞪大眼睛。。。。沒錯(cuò)

今字的上頭出了我們的輔助線，設(shè)計(jì)師也會(huì)將手機(jī)截屏然后對照原稿做輔助線對比的哦～

解決辦法相當(dāng)簡單，只需要

.desc {
  margin-top: 1px;  /* add */

  font-size: 16px;
  font-family: FZYouH_512B;
}

只需要加一行，當(dāng)當(dāng)當(dāng)當(dāng)～

嗑嗑，湊合這樣吧，為什么？明明對齊了?。≡僮屑?xì)看，我是認(rèn)真的，沒玩大家，發(fā)現(xiàn)我們的 date 低了不到一個(gè)像素（使用 Retina 屏幕的朋友看的明顯些），有人問一像素以內(nèi)可以調(diào)整嘛？明確告訴大家可以，之后的文章準(zhǔn)備做解釋，這里不展開

第一種方案到這為止，上手試驗(yàn)的朋友雖然沒有我的字體，你不必去下載，瀏覽器默認(rèn)字體一樣的，我們講的是原理，沒必要還原我的 demo，關(guān)鍵就是 block 元素的上下 margin 調(diào)整。

提醒：這里的 margin 可以設(shè)置負(fù)值，如果負(fù)值無用自己去探索原因吧，給大家線上項(xiàng)目的控制臺(tái)

我這里給的就是負(fù)值，是有作用的哦，可以去 敢玩移動(dòng)端主頁，記得在模擬器里查看（不然會(huì)亂成一鍋粥），控制臺(tái)一看便知，不過多解釋啦。

vertical-align 魔法

完整代碼如下


  14 OCT
  x
  今日瞎選6篇

以上代碼運(yùn)行效果和之前一摸一樣這里就不一一截圖費(fèi)大家流量啦（良心前端。。。。）

和上一個(gè)方法區(qū)別在于我們行內(nèi)元素還用之前的 span 標(biāo)簽。然后通過 vertical-align: 1px; 來調(diào)節(jié)垂直方向上下的位置。對這個(gè)屬性不熟悉的朋友可以去看MDN的文檔：https://developer.mozilla.org...

幾種語法如下

/* keyword values */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/*  values */
vertical-align: 10em;
vertical-align: 4px;

/*  values */
vertical-align: 20%;

/* Global values */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;

我們用的這個(gè) values 長度單位實(shí)際應(yīng)用較少，卻是行內(nèi)元素垂直對齊的黑魔法。不了解的不要緊，趕快 get 新技能

總結(jié)

兩種方案都可行，有時(shí)候不要因?yàn)橐幌袼亟g盡腦汁，找到突破口，以后誰還會(huì)怕行內(nèi)對齊了呢？

你們還有更好的想法嗎？歡迎交流

文章出自 orange 的 個(gè)人博客 http://orangexc.xyz/

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111643.html

相關(guān)文章

  • 來自前端菜鳥對css display屬性的理解

    摘要：對于一個(gè)剛起步的新手來說，搞定屬性確實(shí)沒有那么容易。現(xiàn)在我來說說我對幾個(gè)屬性值得理解。此屬性是說不讓元素顯示。先上圖是對于行內(nèi)元素來說的，例如等。 對于一個(gè)剛起步的新手來說，搞定css屬性確實(shí)沒有那么容易?，F(xiàn)在我來說說我對display幾個(gè)屬性值得理解。（只是幾個(gè)經(jīng)常用到的屬性值），不足的地方還請大佬們指正。 1.display:none display：none; 此屬性是說不讓元素...

    TZLLOG 評論0 收藏0

  • 來自前端菜鳥對css display屬性的理解

    摘要：對于一個(gè)剛起步的新手來說，搞定屬性確實(shí)沒有那么容易。現(xiàn)在我來說說我對幾個(gè)屬性值得理解。此屬性是說不讓元素顯示。先上圖是對于行內(nèi)元素來說的，例如等。 對于一個(gè)剛起步的新手來說，搞定css屬性確實(shí)沒有那么容易?，F(xiàn)在我來說說我對display幾個(gè)屬性值得理解。（只是幾個(gè)經(jīng)常用到的屬性值），不足的地方還請大佬們指正。 1.display:none display：none; 此屬性是說不讓元素...

    SHERlocked93 評論0 收藏0

  • 從hello world看JavaScript隱藏的黑魔法

    摘要：如果類型轉(zhuǎn)換你還不是很了解，可以先讀下這篇來理解一下從看隱式強(qiáng)制轉(zhuǎn)換機(jī)制。函數(shù)可對通過編碼的字符串進(jìn)行解碼。而作者封裝的也是基于這兩者來實(shí)現(xiàn)輸出黑魔法字符串的。同時(shí)通過，返回了一個(gè)匿名函數(shù)形成了閉包。為了達(dá)到裝逼的效果。 寫在最前 事情的起因是這段看起來不像代碼的代碼： showImg(https://segmentfault.com/img/remote/14600000126810...

    cnio 評論0 收藏0

  • CSS魔法堂：深入理解line-height和vertical-align

    摘要：下的屬性值詳解以下內(nèi)容均在中測試默認(rèn)對齊方式這里作為參考系，而它的就是所要對齊的了。沒有任何變化。那改變又如何呢為了讓的清晰可見，特意添加一個(gè)的包裹著。 前言 一直聽說line-height是指兩行文本的基線間的距離，然后又說行高等于行距，最近還聽說有個(gè)叫行間距的家伙，@張鑫旭還說line-height和vertical-align基情四射，貴圈真亂啊。。。。。。于是通過本篇來一探究竟...

    avwu 評論0 收藏0

  • CSS字體和文本相關(guān)

    摘要：本博文主要分為兩部分，第一部分介紹字體屬性，第二部分則介紹了文本常用屬性二字體屬性字體系列首先介紹一下什么是字體系列所謂字體系列我理解的就同一字體下的不同風(fēng)格的具體字體的集合。這里的楷體，就可以看做是一個(gè)單獨(dú)的字體系列。 一 前言 目前在做IFE的練習(xí)，初步學(xué)習(xí)到CSS內(nèi)容，所以做了總結(jié)。本博文主要分為兩部分，第一部分介紹CSS字體屬性，第二部分則介紹了文本常用屬性 二 字體屬性 2....

    xiaokai 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<