資訊專欄INFORMATION COLUMN
摘要：不同的塊級元素的行系統各自獨立，就算它們有父子關系。再次注意控制的是內聯元素在其所在行的行內居中，它只對帶有特性的元素起作用，包括內聯塊元素。其實這個值對于行中的內聯塊元素同樣有效。
哪里說起呢？就從一道老生常談的前端面試題開始吧。
塊級元素與行內元素問：塊級元素和行內元素有什么區別？
估計各位同學都在各種前端面試中被問到過，當然也在各種網站上搜尋過答案。要真正羅列兩者的區別可以找到很多，然而從本質上講，就是這樣的區別：
塊級（block）元素可以控制它的大小
行內（inline）元素將其排到父級的行系統中
我更愿意把這兩者稱作為元素的兩個特性。因為行內元素具有 inline 特性，所以多個行內元素會排在一行；但它們不具有 block 特性，所以無法使用 width、height 指定它們的寬高。因為塊級元素具有 block 特性，所以可以直接指定元素的寬高；因為塊級元素不具有 inline 特性，所以它們會獨占一行。
這兩個特性還可以疊加：同時具有 inline 和 block 特性的就是行內塊（inline-block）元素，既可以設定寬高，也會排到行系統中。如果兩個特性都不具備，那么就是 display: none。
注意這里所說的 block 和 inline 都是相對于同級元素而言的，對于元素的子級又有不同的布局方式。如果指定不同子節點的布局方式與 block、inline 特性疊加，又有了 table（具有 block 特性、子元素使用 table 方式布局）、inline-table（具有 inline、block 特性，子元素使用 table 方式布局），flex、inline-flex，grid、inline-grid 等等。
有了這樣的概念，就可以解釋一些特殊的現象。比如 text-align 對塊級元素不起作用：因為塊級元素所在的行獨立于父級行系統之外，一個設置行內位置排布的 CSS 屬性當然不會起作用。再比如 margin: 0 auto 只對塊級元素起作用：因為只有塊級元素獨占一行，它才有充足的空間自由的在行中排布。
請再次注意：text-align 排的是元素的子節點，而 margin 排的是元素本身。
HTML 頁面默認采用流式布局，水平方向和豎直方向是不對等的。在默認情況下，HTML 頁面中的文字總是會按書寫順序（writing-mode）橫著從左往右排，一行占滿之后會在這行的下面另起一行。text-align 不是不能對豎直方向其作用，只需要當前的行系統是豎排的（writing-mode: vertical-lr）。margin: auto 0 默認情況下不會將一個塊級元素豎直居中，因為缺少 inline 特性只是讓元素獨占一行，而不會讓他獨占一列。
想讓水平方向和豎直方向對等也很簡單：position: absolute，如果再使用 top: 0; bottom 0; 將元素豎直占滿一列，就可以使用 margin: auto 0 將元素豎直居中。
行系統那塊級元素和表格元素有什么區別？區別是：塊級（block）元素使用行系統布局子節點。
所謂行系統就是基于行的子節點排布方式，默認情況下從左往右依次排列，超出一行時就折行。每個塊級元素都有自己的行系統，block 元素如此，inline-block 元素也如此。不同的塊級元素的行系統各自獨立，就算它們有父子關系。你完全可以把某個塊元素左對齊，然后把其子級的行內塊元素右對齊，沒有任何問題。
既然有了行的概念，那么每行占多高呢？這就有了行高的概念，由 CSS 屬性 line-height 控制，默認值為 normal，不同的瀏覽器對 normal 的處理不一致，你也可以手工指定其值。可以是一個數字，表示當前元素的 font-size 的倍數，也可以是一個絕對值，多少像素等。
元素的行高可以很大，也可以很小，也許放下行中的元素后上下還有空余，也許剛剛好，也許根本放不下。控制行中節點位置的 CSS 屬性是 vertical-align，默認是 baseline。
行中最常存放的節點是文本。由于各個字符的高度各不相同，為了顯示的整齊，不能通過簡單的對齊上下兩邊或中心排列行中的字符。每個字符都需要有一個基準去做對齊，這樣就有了基線（baseline）的概念。
可以看到圖片中的后幾個字母 hinx 下邊都有一兩個短橫，它們叫做襯線，帶有襯線的字體叫做襯線字體。它們在同一條直線上，這條直線所在的位置就是基線。文本默認按照基線對齊，基線的位置跟當前字體有關，不同的字體位置不同。當行高超出最大字符高度時，基線會往行中間移動，這就是為什么把 line-height 的值設置為父元素高度時可以將文本豎直居中的原因。
vertical-align 還有幾個可選值，其中最常用的應該是 middle 了。各位同學應該遇到過這樣的問題：給一個內聯塊元素設置了 vertical-align: middle，但這個元素并非在正中，總會偏離一點點。vertical-align: middle 其實并不是把元素絕對的居于父元素中間（不要看 w3school 等上面的初學者向文檔），MDN) 上給的官方說明為：
元素中垂線與父元素的基線加上小寫x一半的高度值對齊。
vertical-align: middle 的對齊方式與父元素的基線和字號有關，然而這個值未必就是父元素的中線。那么解決的方法也很簡單，設置父元素 font-size: 0，字號為 0 時基線必然在元素正中，這個 小寫x一半的高度值 也必然是 0。
額對了，font-size: 0 還有一個用處是干掉多余的空格，這在使用 display: inline-block 做橫向布局時非常有用。
再次注意 vertical-align 控制的是內聯元素在其所在行的行內居中，它只對帶有 inline 特性的元素起作用，包括內聯塊元素。另外如果你用 vertical-align: middle 使某元素豎直居中于父元素中間，記得同時設置 white-space: nowrap，防止多個元素折行。
前面提到了 text-align，除了常用的 left、center、right 取值以外，還有一個很有用的取值：justify——兩端對齊。在只有一行時，兩端對齊就相當于左對齊；但是有多行時，兩端對齊會將除最后一行外的前面所有行按單詞（空白字符）拆分均勻分散對齊。其實這個值對于行中的內聯塊元素同樣有效。
為了使 text-align: justify 生效，你必須保證有多行（只對最后一行之前的行生效），必須保證相鄰內聯塊元素中間有空白字符（并且字號不能為 0）。前者可以通過一個 display:inline-block; width: 100% 的偽元素實現（偽元素作最后一行）；后者如果是手寫的 HTML 基本一般通常都會有，如果是用 ng-repeat、v-for 生成的元素就要非一些力氣手工制造出來。
text-align: justify 這個相對 hack 的用法有很高的瀏覽器兼容性，需要兼容 IE8 的同學或多或少應該都有使用過，可能也遇到過各種各樣的問題。后來的伸縮盒（flex）布局中有更加好用的 justify-content: space-between 是此屬性的絕佳替代品，這是后話。
還有一些 CSS 屬性控制行系統的布局方式。除了前面的提到的 text-align 和 white-space，還有 word-wrap（控制折行時是否允許拆分單詞）、text-overflow（控制超出一行時的處理方式）等等。除此之外，常用的 margin、padding 對于行內元素的效果也有不同之處，留給各位同學自己發現。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51144.html
摘要：行高行距半行距從上到下四條線分別是頂線，中線，基線，底線。行高指文本行基線間的垂直距離。上圖任意兩條相同顏色的垂直距離也是行高。父元素不同的行高單位影響子元素的繼承。 行高、行距、半行距 showImg(https://segmentfault.com/img/bVAdEh); 從上到下四條線分別是 頂線，中線，基線，底線。 行高 指文本行基線間的垂直距離。上圖任意兩條相同顏色的垂直距...
摘要：前言多行文本超出高度限制出現省略號移動端多為內核的有擴展屬性但并不是規范中的屬性端往往要借助去實現這一效果，但麻煩且不是很靠譜，今天就用純來實現一個完全兼容的多行省略。 前言 多行文本超出高度限制出現省略號 , 移動端多為webkit內核的 , 有擴展屬性-webkit-line-clamp , 但并不是CSS規范中的屬性 , PC端往往要借助js去實現這一效果，但麻煩且不是很靠譜，今...
摘要：設計思想兼容已有內容避免不必要的復雜性解決現實問題優雅降級尊重事實標準變化新增語義化標簽去除純表示性的標簽拖拽離線語法標簽不區分大小寫推薦小寫空標簽可以不閉合屬性不必引號。遇到這種情況時，會生成匿名塊級盒來包含行級盒。 瀏覽器 瀏覽器 渲染引擎 JavaScript引擎 IE Trident JScript Edge EdgeHTML Chakra Safari We...
閱讀 2474·2021-11-16 11:45
閱讀 2444·2021-10-11 10:59
閱讀 2251·2021-10-08 10:05
閱讀 3816·2021-09-23 11:30
閱讀 2370·2021-09-07 09:58
閱讀 790·2019-08-30 15:55
閱讀 773·2019-08-30 15:53
閱讀 1923·2019-08-29 17:00
