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

資訊專欄INFORMATION COLUMN

玩兒前端——CSS垂直的那些事兒

tigerZH / 1707人閱讀

摘要：替換元素或任何其他類型的非文本元素會忽略這個值。要對齊的元素的行內(nèi)框底端再與父元素的底端對齊。往往將元素的垂直中點與父元素基線上方處的一個點對齊。

說說自己對行高和垂直對齊的理解
行高 
line-height屬性是指文本行基線之間的最小距離，而不是字體的大小

首先，基線(baseline)指的是英文四線格的倒數(shù)第二條線。

其次，關(guān)于font-size，字體大小受font-size形成的em框限制。

最后，在line-height設(shè)定時，由line-height決定基線間最小距離。


關(guān)于上圖

A line box containing some text and elements.

一行文字被放在一個line box里，而line box又由一個或多個inline box(行內(nèi)框)組成，上圖有5個inline box。

inline box中的文本內(nèi)容組成了content area(虛線框所示)，content area的大小跟文字大小有關(guān)，而決定文字大小的是font-size，因此font-size作用于content area。在未設(shè)置line-height的情況下，inline box的高度由content area決定。

而line-height則是作用于inline box高度，line-height為20px;font-size為16px;的情況下，會在content area的上下設(shè)定2px的間隔。這樣上下兩行基線間距離也就增加了4px

line box的高度由inline boxs中最高的那一個決定。

height設(shè)定的是容器的高度，并非line box高度，如果容器高度正好與line box高度相等，那么行文本就在容器內(nèi)垂直居中了。
line-height例子

垂直對齊 
vertical-align
作用于:行內(nèi)元素和表單元格
默認(rèn)值：baseline

baseline: 一個元素的基線與其父元素的基線對齊。如果元素沒有基線，比如這是一個圖像或表單輸入元素，或者是其他替換元素——那么該元素的底端與其父元素的基線對齊。

bottom: 將元素行內(nèi)框的底端與行框的底端對齊

text-bottom: text-bottom是指行內(nèi)文本的底端。替換元素或任何其他類型的非文本元素會忽略這個值。要對齊的元素的行內(nèi)框底端再與父元素content area的底端對齊。

middle: 往往（但并不總是）應(yīng)用于圖像。middle往往將元素的垂直中點與父元素基線上方0.25em處的一個點對齊。

百分?jǐn)?shù): 把元素的基線（或替換元素的底邊）相對于父元素的基線升高或降低指定的量（你指定的百分?jǐn)?shù)要計算為該元素line-height的百分?jǐn)?shù)，而不是相對于其父元素的line-height）。


I felt that, if nothing else, I deserved a
raisefor my efforts.


span的基線身高9px，繼承自父元素的line-height×50%

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

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

相關(guān)文章

  • CSS那些事兒——居中布局

    摘要：前言居中布局，是前端頁面最常見的一種布局需求。下面將現(xiàn)今自己了解的居中布局方法作個小總結(jié)。水平居中行內(nèi)元素在包含的父元素定義屬性為。垂直水平居中對于這個問題，可以綜合上述點進行實現(xiàn)。 前言 居中布局，是前端頁面最常見的一種布局需求。剛開始學(xué)習(xí)前端時還是困擾了一段時間，后來看了Centering in CSS: A Complete Guide一文后才算掌握了方法。下面將現(xiàn)今自己了解的居...

    JeOam 評論0 收藏0

  • React 服務(wù)端渲染完美的解決方案

    摘要：三服務(wù)端渲染方式方式一傳統(tǒng)方式服務(wù)端渲染，解決用戶體驗和更好的，有諸多工具使用這種方式如的的等。未列入白名單即請求不是請求或未通過任何過濾器，將只是充當(dāng)反向代理，只是按原樣傳送請求和響應(yīng)。 一、服務(wù)器端渲染是什么?使用 React 構(gòu)建客戶端應(yīng)用程序，默認(rèn)情況下，可以在瀏覽器中輸出 React 組件，進行生成 DOM 和操作 DOM。React 也可以在服務(wù)端通過 Node.js 轉(zhuǎn)換...

    CoderBear 評論0 收藏0

  • React 服務(wù)端渲染完美的解決方案

    摘要：服務(wù)端渲染兩種方式根據(jù)上文介紹對服務(wù)端渲染利弊有所了解，我們可以根據(jù)利弊權(quán)衡取舍，最近在做服務(wù)端渲染的項目，找到多種服務(wù)端渲染解決方案，大致分為兩類。第一種方式傳統(tǒng)方式服務(wù)端渲染，解決用戶體驗和更好的，有諸多工具使用這種方式如的的等。 最近在開發(fā)一個服務(wù)端渲染工具，通過一篇小文大致介紹下服務(wù)端渲染，和服務(wù)端渲染的方式方法。在此文后面有兩中服務(wù)端渲染方式的構(gòu)思，根據(jù)你對服務(wù)端渲染的利弊權(quán)...

    DesGemini 評論0 收藏0

  • 2019前端面試那些事兒

    摘要：雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總新特性，語義化瀏覽器的標(biāo)準(zhǔn)模式和怪異模式和的區(qū)別使用的好處標(biāo)簽廢棄的標(biāo)簽，和一些定位寫法放置位置和原因什么是漸進式渲染模板語言原理盒模型，新特性，偽 雖然今年沒有換工作的打算 但為了跟上時代的腳步 還是忍不住整理了一份最新前端知識點 知識點匯總1.HTMLHTML5新特性，語義化瀏覽器的標(biāo)準(zhǔn)模式和怪...

    JeOam 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<