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

資訊專欄INFORMATION COLUMN

使用min-content實現容器寬度自適應于內部元素

hearaway / 3411人閱讀

摘要：到目前為止，有幾種方法可以實現。通過設置浮動，可以實現元素折疊。將元素寫死一個寬度，但這使得元素固定并失去響應特性。用來幫忙用來幫忙我們最終就是要找到最優的圖片容器的寬度以最達到最好的適應內部圖片的目的。

前言

設計師可以分為如下兩類：

  • 先做好設計，然后將內容放入靜態框架中
  • 優秀的設計師充分考慮內容的各個方面及其上下文，并創建適合于內容的設計

HTML原生就是響應式的（HTML內容在視口內流式的分布）。隨著CSS的廣泛應用，設計者創建了許多固定布局的“盒子”并把內容強制的放在盒子之中，這有悖于HTML原生響應的特性。

過去幾年出現了一場革命，包括自適應設計，響應式設計，移動優先設計等。所有這些思想最根本部分就是優先考慮內容。CSS3也因此定義和實現一些新的屬性。其中就包括內在和外在的寬度（intrinsic and extrinsic width values）。

引入問題

我們以一個常規的 WEB 頁面設計問題（figure 元素內的圖片）來引出問題并加以說明。


    
    
www.30ke.cn

    
三十客 - 一個專注于前端學習和分享的網站。

因為figure是塊級標記，所以元素一直延伸到至整個容器中。 在以內容優先的設計中，我們通常希望容器 (本例中為 figure元素) 盡可能小。 到目前為止，有幾種方法可以實現。

figure {
    float: left;
}

通過設置浮動，可以實現 figure 元素折疊。但是如果 figure 中的 p （段落）元素寬于圖片寬度，則figure元素會收縮至最寬的子元素，而不是圖片的寬度。
使用display: inline-block 或 table-cell 同樣有上述問題。

figure {
    width: 500px;
}

將 figure 元素寫死一個寬度，但這使得元素固定并失去響應特性。

用 min-width 來幫忙

我們最終就是要找到最優的圖片容器的寬度以最達到最好的適應內部圖片的目的。如果內部的文本換行顯示也沒關系。

我們可以通過 min-content 來達到目的。盡管該值 2006 年就出現了，但還處在實驗階段，因此需要添加不同瀏覽器前綴。

figure {
    border: 2px solid black;
    background: #cae9b8;
    margin: 0;
    width: -moz-min-content;
    width: -webkit-min-content;
    width: min-content;
}

上述代碼，很好的解決了上述問題。而且 margin 和 padding 在圖片容器內部仍然有效。

min-content 是內在和外在的寬高系列值中的一個，其它還包括 max-content ， fit-content等。這些值和 flexbox ，grid 和其它布局系統，使得WEB設計更優秀更靈活。
min-content 的支持性很好，所有現代主流瀏覽器都支持該值，但是 Internet Explorer and Opera Mini 并不支持。

因此我們借助 max-widht 實現了回退的方案。

figure {
    max-width: 500px;
    max-width: min-content;
}

完整的帶回退的顯示方案見如下演示程序：

在線演示程序

本文主要匯編自 Dudley Storey 的一篇博客，并加入了針對Internet Explorer and Opera Mini 的回退方案。但是因為本人水平有限，文中難免存在描述不清，代碼不完善等問題，還請大家多多予以批評指正！

參考文獻

CSS Intrinsic & Extrinsic Sizing Module Level 3
Design From the Inside Out With CSS Min-Content
play.csssecrets.io/

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

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

相關文章

  • 使用min-content實現容器寬度自適應于內部元素

    摘要：到目前為止，有幾種方法可以實現。通過設置浮動，可以實現元素折疊。將元素寫死一個寬度，但這使得元素固定并失去響應特性。用來幫忙我們最終就是要找到最優的圖片容器的寬度以最達到最好的適應內部圖片的目的。 前言 設計師可以分為如下兩類： 先做好設計，然后將內容放入靜態框架中 優秀的設計師充分考慮內容的各個方面及其上下文，并創建適合于內容的設計 HTML原生就是響應式的（HTML內容在視口內...

    lpjustdoit 評論0 收藏0

  • css的結構與布局

    摘要：實際上表示視口寬度的，而不是。同樣，表示視口高度的當視口寬度小于高度時，等于，否則等于。基于的方法這種應該算是最佳的解決辦法實現方法當使用布局時，使用在水平和垂直方向都會居中。 1.自適應內部元素 在css中，不給元素一個height值時，元素會自適應其內部的元素高度，有時我們想讓元素的寬度也達到此效果，應用場景如下。 如下當前的這種布局，想要改成最外層的div的寬度由當前的圖片撐開的...

    GeekQiaQia 評論0 收藏0

  • 哪些你知道或不知道的css，在這里或許都齊全

    摘要：簡單就意味著更快的開發速度，更小的維護成本，同時往往具有更好的體驗下面我介紹哪些或許你不知道小技巧。默認為，此時陰影與元素同樣大。如果沒有指定，則由瀏覽器決定通常是的值，不過目前取透明。首先，我們要明白這里的最小寬度值是什么意思。 暑假實習的時候帶我的師傅，告訴我要注重基礎，底層實現原理。才能在日新月異的技術行業站住腳跟，以不變應萬變，萬丈高樓平地起，所以我們應該不斷的去學習，去交流。...

    Jackwoo 評論0 收藏0

  • 哪些你知道或不知道的css，在這里或許都齊全

    摘要：簡單就意味著更快的開發速度，更小的維護成本，同時往往具有更好的體驗下面我介紹哪些或許你不知道小技巧。默認為，此時陰影與元素同樣大。如果沒有指定，則由瀏覽器決定通常是的值，不過目前取透明。首先，我們要明白這里的最小寬度值是什么意思。 暑假實習的時候帶我的師傅，告訴我要注重基礎，底層實現原理。才能在日新月異的技術行業站住腳跟，以不變應萬變，萬丈高樓平地起，所以我們應該不斷的去學習，去交流。...

    Bryan 評論0 收藏0

  • 哪些你知道或不知道的css，在這里或許都齊全

    摘要：簡單就意味著更快的開發速度，更小的維護成本，同時往往具有更好的體驗下面我介紹哪些或許你不知道小技巧。默認為，此時陰影與元素同樣大。如果沒有指定，則由瀏覽器決定通常是的值，不過目前取透明。首先，我們要明白這里的最小寬度值是什么意思。 暑假實習的時候帶我的師傅，告訴我要注重基礎，底層實現原理。才能在日新月異的技術行業站住腳跟，以不變應萬變，萬丈高樓平地起，所以我們應該不斷的去學習，去交流。...

    fai1017 評論0 收藏0

發表評論

0條評論

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