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

資訊專欄INFORMATION COLUMN

vertical-align:垂直對齊方式相關(guān)說明

BenCHou / 2200人閱讀

摘要：關(guān)于盒子模型相關(guān)的東西，我們會多帶帶去仔細(xì)說明，因為非常重要，這里只是給出簡單的說明，包括下面的行高等一樣內(nèi)容區(qū)域一種圍繞著文字看不見的盒子，大小和有關(guān)。

作者：心葉
時間：2018-04-28 09:23

第一步：行內(nèi)盒子模型。

為什么明明說的是垂直對齊方式，開始卻要說盒子模型，還是行內(nèi)盒子模型，因為垂直對齊方式控制的對象就是這個模型，因此我們先了解一下控制的環(huán)境，再看如何控制。

關(guān)于盒子模型相關(guān)的東西，我們會多帶帶去仔細(xì)說明，因為非常重要，這里只是給出簡單的說明，包括下面的行高等一樣：

內(nèi)容區(qū)域（content area）：一種圍繞著文字看不見的盒子，大小和font-size有關(guān)。

內(nèi)聯(lián)盒子（inline boxes）：不好表達(dá)，舉例子解釋一下，被inline水平標(biāo)簽（em、a和span等）包含的稱為"內(nèi)聯(lián)盒子"，如果是光禿禿的文字就稱為"匿名內(nèi)聯(lián)盒子"。

行框盒子（line boxes）：一行就是一個行框盒子，里面由一個個內(nèi)聯(lián)盒子組成，應(yīng)該不是太難理解。

包含盒子（containing box）：由一行行的行框盒子組成，比如"

單純的文字被inline水平標(biāo)簽包含的文字

"。

行內(nèi)盒子模型布局有一個問題，隨便提一下：在使用display:inline-block使元素位于一行時元素之間有間隙是由于一些比如換行符等空白字符導(dǎo)致的（解決方法是對外殼設(shè)置font-size:0px，里面小格子再恢復(fù)font-size為需要的值，當(dāng)然別的方法也有，比如標(biāo)簽全部一行，不要換行，不過這個感覺好用些）。

還有一個技巧，對于想整體居中，內(nèi)部左對齊的布局，為了最后一行不足一行的時候不會突兀的居中，可以添加幾行和內(nèi)容元素一樣寬，高為零的行內(nèi)元素，非常好用。

此外，還有幾個常用的屬性，列舉一下：

white-space：屬性設(shè)置如何處理元素內(nèi)的空白，比如是否換行等。

第二步：行高。

為什么行高也是要提前說明一下，因為垂直對齊是在一行中進(jìn)行的，行高代表的是實際高，有必要了解一下，幫助去尋找對齊線條。

行高定義的是二行文字基線（baseline）的距離（不一定準(zhǔn)確，更嚴(yán)格說應(yīng)該是行框盒子的實際高度，不是高度），內(nèi)容區(qū)域（content area）高度+行間距(vertical spacing)=行高，行高由于繼承，無處不在，包括單行文本也不例外；其次，高度的表現(xiàn)不是行高而是內(nèi)容區(qū)域高度+行間距，而且內(nèi)容區(qū)域高度只與字號和字體有關(guān)，和行高沒有任何關(guān)系。

簡單的說就是：行高決定了內(nèi)聯(lián)盒子高度，行間距可大可小、可正可負(fù)，始終保證行高等于高。

內(nèi)容區(qū)域高度不一定是font-size，還取決于字體，不同字體不一樣，在simsum下二者是一樣的。

line-height取值數(shù)字時所有可繼承根據(jù)font-size重新計算，而取百分百和em時，當(dāng)前元素根據(jù)font-size計算之后把計算的結(jié)果繼承給下面元素，區(qū)別有點大。

替換元素比較特別，一般有內(nèi)在尺寸和寬高比，不可以簡單的去理解，遇到要小心，后期關(guān)于該元素會專門去討論。

第三步：正文。

垂直對齊方式是用來設(shè)置垂直對齊方式，所有垂直對齊的元素都會影響行高，修改的是自己的什么線垂直對齊父元素的什么線，比如默認(rèn)自己的基線對齊父元素的基線；如果取值百分百，計算是相對行高計算的。

根據(jù)前置知識你應(yīng)該可以猜到，其是一個inline-block、table-cell（比如td元素）或inline依賴型元素。

如果設(shè)置為數(shù)值，百分百或em等單位，表示的是在默認(rèn)基礎(chǔ)上偏移的對齊。

第四步：注意點。

inline-block的基線是正常流中最后一個line box的基線，除非，這個line box里面既沒有l(wèi)ine boxes或者本身overflow屬性的計算值而不是visible，這種情況下基線是margin底邊緣。

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

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

相關(guān)文章

  • [翻譯]關(guān)于Vertical-Align你需要知道的事情

    摘要：在元素的和固定的情況下，一點小的改變也很有可能對布局造成影響。其中高度有可能是由元素的內(nèi)容決定的。行高的上下邊界是紅線。元素也有和上下邊界，元素是需要對齊的對象。因此文字的最高點超過了的高度。在第二種情況下，另外兩個元素的位置發(fā)生了下移。 寫在前面的話 開始學(xué)習(xí)前端以來，在CSS相關(guān)知識當(dāng)中困擾我最多的就是Vertical-Align這個屬性。在stackoverflow上查找相關(guān)問...

    reclay 評論0 收藏0

  • 垂直居中相關(guān)知識總結(jié)

    摘要：垂直居中相關(guān)知識總結(jié)前言工作中用到了很多關(guān)于垂直居中相關(guān)的知識之前，在上提問了個問題關(guān)于垂直居中，大家有沒有什么比較好的建議。 垂直居中相關(guān)知識總結(jié) 前言 工作中用到了很多關(guān)于垂直居中相關(guān)的知識之前，在SF上提問了個問題CSS關(guān)于垂直居中，大家有沒有什么比較好的建議。非常感謝各位前輩對我的幫助，前輩們給的答案都非常多也各式各樣，我覺得有必要把大家的回答總結(jié)一下。 方法總結(jié) 一、絕對定...

    Labradors 評論0 收藏0

  • 垂直居中相關(guān)知識總結(jié)

    摘要：垂直居中相關(guān)知識總結(jié)前言工作中用到了很多關(guān)于垂直居中相關(guān)的知識之前，在上提問了個問題關(guān)于垂直居中，大家有沒有什么比較好的建議。 垂直居中相關(guān)知識總結(jié) 前言 工作中用到了很多關(guān)于垂直居中相關(guān)的知識之前，在SF上提問了個問題CSS關(guān)于垂直居中，大家有沒有什么比較好的建議。非常感謝各位前輩對我的幫助，前輩們給的答案都非常多也各式各樣，我覺得有必要把大家的回答總結(jié)一下。 方法總結(jié) 一、絕對定...

    GeekGhc 評論0 收藏0

  • CSS居中

    摘要：備份及更新說明表示要被居中的元素，表示要居中的元素的父元素包含元素的元素。左右居中要居中的塊級元素元素設(shè)置。網(wǎng)格布局居中根據(jù)需要布局網(wǎng)格，將要居中的元素擺放在網(wǎng)格中間即可。 [TOC]備份及更新 說明 .center表示要被居中的元素，.wrap 表示要居中的元素的父元素（包含.center元素的元素）。 為了便于理解和敘述同一： 對于文本內(nèi)容居中的情況，.wrap就是指包含文...

    劉永祥 評論0 收藏0

  • 《CSS世界》筆記三：內(nèi)聯(lián)元素與對齊

    摘要：上一篇世界筆記二盒模型四大家族下一篇世界筆記四流的保護(hù)與破壞寫在前面在頁面布局中，內(nèi)聯(lián)元素的垂直對齊是比較常見和基礎(chǔ)的布局需求，但是我們往往會因為垂直對齊中的，而頭疼不已。 上一篇：《CSS世界》筆記二：盒模型四大家族下一篇：《CSS世界》筆記四：流的保護(hù)與破壞 寫在前面 在頁面布局中，內(nèi)聯(lián)元素的垂直對齊是比較常見和基礎(chǔ)的布局需求，但是我們往往會因為垂直對齊中的1px，2px而頭疼不已...

    HtmlCssJs 評論0 收藏0

發(fā)表評論

0條評論

BenCHou

男|高級講師

TA的文章

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