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