国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

神奇的inline-block

bang590 / 2163人閱讀

摘要：代表元素是典型的元素，我們知道，使用一個的時候不定義寬度，按鈕文字越多，按鈕就越寬。見圖這證明了元素第一點，由內部元素決定。但是超過一行就不一樣了，因為已經被第一行撐開了，所以的就對里面的文字起效果了。

inline-block

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

inline-block 代表元素 button

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

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

"shrink-to-fit" 的一個應用

需求:
頁面某個文字的內容是動態的，可能是幾個字，也可能是一句話。然后希望文字少的時候居中顯示，超過一行的時候居左顯示，如何實現？
核心html, css代碼如下:

    

        
文字內容

    

    

        
文字內容-文字內容-文字內容-文字內容-文字內容-文字內容-文字內容

    

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

看下效果:

可以看到文字較少的時候居中顯示，換行的時候居左顯示。 那這是為什么呢？仔細看下頁面結構就會發現，在 box 上的 center 作用的是 content這個元素，他讓content 這個元素居中顯示，而當文字總寬度沒有超過 box寬度的時候content的寬由文字的寬決定，也就是文字總是充滿 content 元素的，那么作用在 content 元素的 不管是left 還是 center 或是 right 都是同樣的效果。 就像軟袋子裝水一樣，是水決定這個袋子的大小，水此時充滿袋子，自然無所謂 居中居左居右了。

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

非 inline-block 什么效果？

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

確實如此哦

參考

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114241.html

相關文章

  • BFC 神奇背后的原理（轉）

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

    April 評論0 收藏0

  • BFC 神奇背后的原理（轉）

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

    wawor4827 評論0 收藏0

  • C3的坑之inline-block

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

    luck 評論0 收藏0

  • C3的坑之inline-block

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

    zengdongbao 評論0 收藏0

  • 神奇的BFC

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

    GraphQuery 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<