資訊專欄INFORMATION COLUMN
摘要：參考鏈接是一種圍繞文字看不見的的大小與的大小相關。不會讓內容成塊顯示，而是排成一行。若自身沒有設置，則父元素的，也與自身的無關。區別在于不論繼承與否，，因此有靈活性。相對于字符的高度。通常為字體高度的一半。
參考鏈接： https://www.zhangxinxu.com/wo...
line box
content area是一種圍繞文字看不見的box.content area的大小與font-size的大小相關。
inline boxinline box不會讓內容成塊顯示，而是排成一行。
如果是個光禿禿的文字，則屬于匿名inline box。
在containing box里，一個一個的inline box組成了line box。
注：line box高度取決于inline box最高元素的高度line height
注： 若line-height < content area ，則line box要取line-height的值，這也是為什么會重疊的原因。line-height屬性取值：
1.%
若自身沒有設置line-height，則line-height = 父元素的font-size * %;
即為直接繼承父元素計算后的line-height，與自身的font-size無關。
2.length
若自身沒有設置line-height，則line-height = 父元素的line-height， 也與自身的font-size無關。
3.number
若自身沒有設置line-height，則line-height = 父元素的line-height。
區別在于：不論繼承與否，line-height = font-size line-height，因此有靈活性。*
4.normal
與number一樣，只是瀏覽器不同，會有差異，約為1.2。
5.inherit
繼承父元素的line-height
vartical align適用于：inline / inline-block / table-cell
理解vertical-align最重要的是先要定line box基線（默認值）：
一般情況下，基線與X底對齊
line box有inline box, 則為最后一個inline box元素的baseline
line box沒有inline box, 則為底margin邊界，即為盒模型的邊界
line box有inline box, 但overflow != visible, 也為line box有inline box
特殊情況，若把inline box最高元素的vertical-align設為middle, 則baseline則為最高元素的中間線
vertical-align取值：
1.top / bottom
使元素的top / bottom與line box的top / bottom對齊
2.middle
使元素的中點與line box的X-height對齊 （題外話：ex相對長度單位。相對于字符“x”的高度。通常為字體高度的一半。)
3.text-top / text-bottom
使元素盒模型的top / bottom與line box文本元素的top line / bottom line對齊
4.sub / super
使元素盒模型的top / bottom與line box 的 sub / sup元素的baseline對齊
5.length
使元素上移 、下移length
6.%
若為0，則為baseline
vertical-align = line-height * %; (可為負）
注：若多行文本，兩個inline-box則對齊最后一行的baseline
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112556.html
摘要：水平居中水平居中沒有什么好說的啦，對于行內元素使用對于塊級元素使用前提是已經為元素設置了適當的寬度垂直居中單行文本多行文本偽元素行內元素偽元素未知寬高絕對居中絕對定位已知寬高負要考慮兼容性浮動元素垂直居中父元素 水平居中 水平居中沒有什么好說的啦，對于行內元素使用text-align;對于塊級元素使用margin: auto（前提是已經為元素設置了適當的 width 寬度）; 垂直居中...
摘要：但實質上，只要是內聯元素，這兩個元素都會同時在起作用。而解決方案可以有以下幾種元素不使用基線對齊，可以改為對齊元素塊狀化設置為設置為總結講解了的各類屬性值及其效果起作用的前提是內聯元素與都是同時作用在內聯元素上的 前言 vertical-align用來指定行內元素（inline）或表格單元格（table-cell）元素的垂直對齊方式。也就是說，對于塊級元素，vertical-align...
摘要：上例中，左邊盒子的基線為其底邊緣，右邊盒子的基線為的基線將右邊盒子的行高設置為，即這個的高度為，位置處于中間。 vertical-align的值 線類：baseline（默認）, top, bottom, middle 文字類：text-top, text-bottom 上標下標類：sub, super 數值：1px, 1em - 在baseline對齊的基礎上上下偏移一定數值 百分...
摘要：輔助標簽代碼代碼效果廢話要讓元素和輔助元素在一行，否則會出現水平不完全居中，當使用時，換行會被解析成空格。 首先我們需要知道元素都有哪些種類？ 內嵌元素（display:inline;）如a，span，b，i 【一個不可定制的盒子】 [默認同行可以繼續跟同類型標簽] [內容撐開寬度] [不支持寬高] [不支持上下的margin和padding] [代碼換行會被解析成空] 塊...
摘要：某日閱讀世界，筆者的一段話鞭撻了我的靈魂。原文是這樣的說到這里，我就忍不住多說兩句。很多其實工作很多年的前端開發人員，也可能不知道的屬性值支持數值，更不知道支持負值，這著實讓我很意外。只顯示文本的時候行高是。上集完敬請期待中下集 showImg(https://segmentfault.com/img/bVbmTbb?w=277&h=336); 某日閱讀《CSS世界》，筆者的一段話鞭撻...
閱讀 1455·2021-09-10 11:27
閱讀 2410·2019-08-30 15:53
閱讀 1322·2019-08-30 13:10
閱讀 2974·2019-08-30 11:09
閱讀 1084·2019-08-29 17:23
閱讀 668·2019-08-29 17:05
閱讀 2948·2019-08-29 15:10
閱讀 2346·2019-08-29 13:22
