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