成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

神奇的inline-block

bang590 / 2169人閱讀

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

inline-block

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

inline-block 代表元素 button

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

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

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

需求:
頁面某個(gè)文字的內(nèi)容是動(dòng)態(tài)的，可能是幾個(gè)字，也可能是一句話。然后希望文字少的時(shí)候居中顯示，超過一行的時(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ì)看下頁面結(jié)構(gòu)就會(huì)發(fā)現(xiàn)，在 box 上的 center 作用的是 content這個(gè)元素，他讓content 這個(gè)元素居中顯示，而當(dāng)文字總寬度沒有超過 box寬度的時(shí)候content的寬由文字的寬決定，也就是文字總是充滿 content 元素的，那么作用在 content 元素的 不管是left 還是 center 或是 right 都是同樣的效果。 就像軟袋子裝水一樣，是水決定這個(gè)袋子的大小，水此時(shí)充滿袋子，自然無所謂 居中居左居右了。

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

非 inline-block 什么效果？

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

確實(shí)如此哦

參考

demo 來自 張鑫旭 新書 《css 世界》。

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114241.html

相關(guān)文章

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

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

    April 評論0 收藏0

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

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

    wawor4827 評論0 收藏0

  • C3的坑之inline-block

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

    luck 評論0 收藏0

  • C3的坑之inline-block

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

    zengdongbao 評論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)直譯為塊級格式化上下文。它是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且...

    GraphQuery 評論0 收藏0

發(fā)表評論

0條評論

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