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