資訊專欄INFORMATION COLUMN
摘要：關(guān)于盒子模型相關(guān)的東西，我們會(huì)多帶帶去仔細(xì)說明，因?yàn)榉浅Ｖ匾?，這里只是給出簡(jiǎn)單的說明，包括下面的行高等一樣內(nèi)容區(qū)域一種圍繞著文字看不見的盒子，大小和有關(guān)。
作者：心葉
時(shí)間：2018-04-28 09:23
為什么明明說的是垂直對(duì)齊方式，開始卻要說盒子模型，還是行內(nèi)盒子模型，因?yàn)榇怪睂?duì)齊方式控制的對(duì)象就是這個(gè)模型，因此我們先了解一下控制的環(huán)境，再看如何控制。
關(guān)于盒子模型相關(guān)的東西，我們會(huì)多帶帶去仔細(xì)說明，因?yàn)榉浅Ｖ匾?，這里只是給出簡(jiǎn)單的說明，包括下面的行高等一樣：
內(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）：一行就是一個(gè)行框盒子，里面由一個(gè)個(gè)內(nèi)聯(lián)盒子組成，應(yīng)該不是太難理解。
包含盒子（containing box）：由一行行的行框盒子組成，比如"
單純的文字被inline水平標(biāo)簽包含的文字
"。行內(nèi)盒子模型布局有一個(gè)問題，隨便提一下：在使用display:inline-block使元素位于一行時(shí)元素之間有間隙是由于一些比如換行符等空白字符導(dǎo)致的（解決方法是對(duì)外殼設(shè)置font-size:0px，里面小格子再恢復(fù)font-size為需要的值，當(dāng)然別的方法也有，比如標(biāo)簽全部一行，不要換行，不過這個(gè)感覺好用些）。
還有一個(gè)技巧，對(duì)于想整體居中，內(nèi)部左對(duì)齊的布局，為了最后一行不足一行的時(shí)候不會(huì)突兀的居中，可以添加幾行和內(nèi)容元素一樣寬，高為零的行內(nèi)元素，非常好用。
此外，還有幾個(gè)常用的屬性，列舉一下：
white-space：屬性設(shè)置如何處理元素內(nèi)的空白，比如是否換行等。
第二步：行高。為什么行高也是要提前說明一下，因?yàn)榇怪睂?duì)齊是在一行中進(jìn)行的，行高代表的是實(shí)際高，有必要了解一下，幫助去尋找對(duì)齊線條。
行高定義的是二行文字基線（baseline）的距離（不一定準(zhǔn)確，更嚴(yán)格說應(yīng)該是行框盒子的實(shí)際高度，不是高度），內(nèi)容區(qū)域（content area）高度+行間距(vertical spacing)=行高，行高由于繼承，無處不在，包括單行文本也不例外；其次，高度的表現(xiàn)不是行高而是內(nèi)容區(qū)域高度+行間距，而且內(nèi)容區(qū)域高度只與字號(hào)和字體有關(guān)，和行高沒有任何關(guān)系。
簡(jiǎn)單的說就是：行高決定了內(nèi)聯(lián)盒子高度，行間距可大可小、可正可負(fù)，始終保證行高等于高。
內(nèi)容區(qū)域高度不一定是font-size，還取決于字體，不同字體不一樣，在simsum下二者是一樣的。
line-height取值數(shù)字時(shí)所有可繼承根據(jù)font-size重新計(jì)算，而取百分百和em時(shí)，當(dāng)前元素根據(jù)font-size計(jì)算之后把計(jì)算的結(jié)果繼承給下面元素，區(qū)別有點(diǎn)大。
替換元素比較特別，一般有內(nèi)在尺寸和寬高比，不可以簡(jiǎn)單的去理解，遇到要小心，后期關(guān)于該元素會(huì)專門去討論。
第三步：正文。垂直對(duì)齊方式是用來設(shè)置垂直對(duì)齊方式，所有垂直對(duì)齊的元素都會(huì)影響行高，修改的是自己的什么線垂直對(duì)齊父元素的什么線，比如默認(rèn)自己的基線對(duì)齊父元素的基線；如果取值百分百，計(jì)算是相對(duì)行高計(jì)算的。
根據(jù)前置知識(shí)你應(yīng)該可以猜到，其是一個(gè)inline-block、table-cell（比如td元素）或inline依賴型元素。
如果設(shè)置為數(shù)值，百分百或em等單位，表示的是在默認(rèn)基礎(chǔ)上偏移的對(duì)齊。
第四步：注意點(diǎn)。inline-block的基線是正常流中最后一個(gè)line box的基線，除非，這個(gè)line box里面既沒有l(wèi)ine boxes或者本身overflow屬性的計(jì)算值而不是visible，這種情況下基線是margin底邊緣。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/113187.html
摘要：在元素的和固定的情況下，一點(diǎn)小的改變也很有可能對(duì)布局造成影響。其中高度有可能是由元素的內(nèi)容決定的。行高的上下邊界是紅線。元素也有和上下邊界，元素是需要對(duì)齊的對(duì)象。因此文字的最高點(diǎn)超過了的高度。在第二種情況下，另外兩個(gè)元素的位置發(fā)生了下移。 寫在前面的話 開始學(xué)習(xí)前端以來，在CSS相關(guān)知識(shí)當(dāng)中困擾我最多的就是Vertical-Align這個(gè)屬性。在stackoverflow上查找相關(guān)問...
摘要：垂直居中相關(guān)知識(shí)總結(jié)前言工作中用到了很多關(guān)于垂直居中相關(guān)的知識(shí)之前，在上提問了個(gè)問題關(guān)于垂直居中，大家有沒有什么比較好的建議。 垂直居中相關(guān)知識(shí)總結(jié) 前言 工作中用到了很多關(guān)于垂直居中相關(guān)的知識(shí)之前，在SF上提問了個(gè)問題CSS關(guān)于垂直居中，大家有沒有什么比較好的建議。非常感謝各位前輩對(duì)我的幫助，前輩們給的答案都非常多也各式各樣，我覺得有必要把大家的回答總結(jié)一下。 方法總結(jié) 一、絕對(duì)定...
摘要：垂直居中相關(guān)知識(shí)總結(jié)前言工作中用到了很多關(guān)于垂直居中相關(guān)的知識(shí)之前，在上提問了個(gè)問題關(guān)于垂直居中，大家有沒有什么比較好的建議。 垂直居中相關(guān)知識(shí)總結(jié) 前言 工作中用到了很多關(guān)于垂直居中相關(guān)的知識(shí)之前，在SF上提問了個(gè)問題CSS關(guān)于垂直居中，大家有沒有什么比較好的建議。非常感謝各位前輩對(duì)我的幫助，前輩們給的答案都非常多也各式各樣，我覺得有必要把大家的回答總結(jié)一下。 方法總結(jié) 一、絕對(duì)定...
摘要：上一篇世界筆記二盒模型四大家族下一篇世界筆記四流的保護(hù)與破壞寫在前面在頁面布局中，內(nèi)聯(lián)元素的垂直對(duì)齊是比較常見和基礎(chǔ)的布局需求，但是我們往往會(huì)因?yàn)榇怪睂?duì)齊中的，而頭疼不已。 上一篇：《CSS世界》筆記二：盒模型四大家族下一篇：《CSS世界》筆記四：流的保護(hù)與破壞 寫在前面 在頁面布局中，內(nèi)聯(lián)元素的垂直對(duì)齊是比較常見和基礎(chǔ)的布局需求，但是我們往往會(huì)因?yàn)榇怪睂?duì)齊中的1px，2px而頭疼不已...
閱讀 3249·2023-04-25 20:35
閱讀 3612·2019-08-30 15:54
閱讀 1991·2019-08-30 15:43
閱讀 2181·2019-08-29 15:14
閱讀 1888·2019-08-29 11:17
閱讀 3377·2019-08-26 13:36
閱讀 693·2019-08-26 10:15
閱讀 2832·2019-08-23 15:41
