亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

神奇的inline-block

bang590 / 2216人閱讀

摘要：代表元素是典型的元素，我們知道，使用一個(gè)的時(shí)候不定義寬度，按鈕文字越多，按鈕就越寬。見(jiàn)圖這證明了元素第一點(diǎn)，由內(nèi)部元素決定。但是超過(guò)一行就不一樣了，因?yàn)橐呀?jīng)被第一行撐開(kāi)了，所以的就對(duì)里面的文字起效果了。

inline-block

我們都知道display: inline-block意味著該元素表現(xiàn)形式是inline，也就是不會(huì)獨(dú)占一行，但是又可以給它定義寬和高。
那么如果一個(gè)元素定義了 display: inline-block但是沒(méi)有定義寬呢？這個(gè)元素的width是多少呢?
答案是 由內(nèi)部元素決定，但不會(huì)超過(guò)‘包含塊’的寬度(前提是沒(méi)有定義類(lèi)似min-width屬性).專(zhuān)業(yè)術(shù)語(yǔ)叫 ‘shrink-to-fit’（收縮到合適）。

inline-block 代表元素 button

button是典型的inline-block元素，我們知道，使用一個(gè)button的時(shí)候不定義寬度，按鈕文字越多，按鈕就越寬。見(jiàn)圖1:

這證明了inline-block元素第一點(diǎn)，width由內(nèi)部元素決定。
再來(lái)看，同樣是按鈕，給按鈕容器一個(gè)寬度，并且按鈕文字超多超過(guò)容器寬度的時(shí)候，如下圖可以看到文字自動(dòng)換行了

"shrink-to-fit" 的一個(gè)應(yīng)用

需求:
頁(yè)面某個(gè)文字的內(nèi)容是動(dòng)態(tài)的，可能是幾個(gè)字，也可能是一句話(huà)。然后希望文字少的時(shí)候居中顯示，超過(guò)一行的時(shí)候居左顯示，如何實(shí)現(xiàn)？
核心html, css代碼如下:

    

        
文字內(nèi)容

    

    

        
文字內(nèi)容-文字內(nèi)容-文字內(nèi)容-文字內(nèi)容-文字內(nèi)容-文字內(nèi)容-文字內(nèi)容

    

    
    .box {
        text-align: center;;
    }
    .content { 
        display: inline-block;
        text-align: left; 
    }

看下效果:

可以看到文字較少的時(shí)候居中顯示，換行的時(shí)候居左顯示。 那這是為什么呢？仔細(xì)看下頁(yè)面結(jié)構(gòu)就會(huì)發(fā)現(xiàn)，在 box 上的 center 作用的是 content這個(gè)元素，他讓content 這個(gè)元素居中顯示，而當(dāng)文字總寬度沒(méi)有超過(guò) box寬度的時(shí)候content的寬由文字的寬決定，也就是文字總是充滿(mǎn) content 元素的，那么作用在 content 元素的 不管是left 還是 center 或是 right 都是同樣的效果。 就像軟袋子裝水一樣，是水決定這個(gè)袋子的大小，水此時(shí)充滿(mǎn)袋子，自然無(wú)所謂 居中居左居右了。

但是超過(guò)一行就不一樣了，因?yàn)?content 已經(jīng)被(第一行)撐開(kāi)了，所以 content的 left 就對(duì)里面的文字起效果了。

非 inline-block 什么效果？

如果 content 不是inline-block的話(huà)，會(huì)是什么樣子呢？ 先來(lái)分析一下，p 元素是 塊級(jí)元素所以會(huì)自動(dòng)占滿(mǎn)一行，不管內(nèi)部文字多少。這樣的話(huà) content的left 就會(huì)生效了，也就是說(shuō) 文字少和文字多的時(shí)候 文字都是居左顯示的，看下效果是不是這樣:

確實(shí)如此哦

參考

demo 來(lái)自 張?chǎng)涡?新書(shū) 《css 世界》。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/114241.html

相關(guān)文章

  • BFC 神奇背后的原理（轉(zhuǎn)）

    摘要：最常見(jiàn)的有簡(jiǎn)稱(chēng)和簡(jiǎn)稱(chēng)。根據(jù)布局規(guī)則第四條的區(qū)域不會(huì)與重疊。根據(jù)布局規(guī)則第二條垂直方向的距離由決定。同樣的，當(dāng)內(nèi)部有浮動(dòng)時(shí)，為了不影響外部元素的布局，計(jì)算高度時(shí)會(huì)包括浮動(dòng)的高度。避免重疊也是這樣的一個(gè)道理。 BFC 已經(jīng)是一個(gè)耳聽(tīng)熟聞的詞語(yǔ)了，網(wǎng)上有許多關(guān)于 BFC 的文章，介紹了如何觸發(fā) BFC 以及 BFC 的一些用處（如清浮動(dòng)，防止 margin 重疊等）。雖然我知道如何利用 BF...

    April 評(píng)論0 收藏0

  • BFC 神奇背后的原理（轉(zhuǎn)）

    摘要：最常見(jiàn)的有簡(jiǎn)稱(chēng)和簡(jiǎn)稱(chēng)。根據(jù)布局規(guī)則第四條的區(qū)域不會(huì)與重疊。根據(jù)布局規(guī)則第二條垂直方向的距離由決定。同樣的，當(dāng)內(nèi)部有浮動(dòng)時(shí)，為了不影響外部元素的布局，計(jì)算高度時(shí)會(huì)包括浮動(dòng)的高度。避免重疊也是這樣的一個(gè)道理。 BFC 已經(jīng)是一個(gè)耳聽(tīng)熟聞的詞語(yǔ)了，網(wǎng)上有許多關(guān)于 BFC 的文章，介紹了如何觸發(fā) BFC 以及 BFC 的一些用處（如清浮動(dòng)，防止 margin 重疊等）。雖然我知道如何利用 BF...

    wawor4827 評(píng)論0 收藏0

  • C3的坑之inline-block

    最近開(kāi)始復(fù)習(xí)css一直在踩坑,今天分享一個(gè)inline-block 關(guān)于inline-block可能很多人都不熟悉,布局這方面很多人用的都是flex或者浮動(dòng),flex很強(qiáng)大毋庸置疑的可是關(guān)于兼容性就不是很讓人滿(mǎn)意,而浮動(dòng)雖然很兼容可是覺(jué)得清除浮動(dòng)就很麻煩,于此我在一些大型網(wǎng)站,例如我們的segmentfault的首頁(yè)導(dǎo)航展示用的布局就是inline-block,覺(jué)得inline-block可以擼一...

    luck 評(píng)論0 收藏0

  • C3的坑之inline-block

    最近開(kāi)始復(fù)習(xí)css一直在踩坑,今天分享一個(gè)inline-block 關(guān)于inline-block可能很多人都不熟悉,布局這方面很多人用的都是flex或者浮動(dòng),flex很強(qiáng)大毋庸置疑的可是關(guān)于兼容性就不是很讓人滿(mǎn)意,而浮動(dòng)雖然很兼容可是覺(jué)得清除浮動(dòng)就很麻煩,于此我在一些大型網(wǎng)站,例如我們的segmentfault的首頁(yè)導(dǎo)航展示用的布局就是inline-block,覺(jué)得inline-block可以擼一...

    zengdongbao 評(píng)論0 收藏0

  • 神奇的BFC

    摘要：垂直方向的距離由決定。根據(jù)布局規(guī)則第四條的區(qū)域不會(huì)與重疊。因此會(huì)根據(jù)包含塊的寬度，和的寬度，自動(dòng)變窄。效果如下清除內(nèi)部浮動(dòng)根據(jù)布局規(guī)則第六條計(jì)算的高度時(shí)，浮動(dòng)元素也參與計(jì)算。 概念 BFC(Block formatting context)直譯為塊級(jí)格式化上下文。它是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且...

    GraphQuery 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<