你不知道的width:auto

DandJ 發布于2019-08-30 14:22 / 3548人閱讀

摘要：比方說，這些元素的寬度默認是與父級容器的。典型代表就是浮動絕對定位元素或者元素，英文稱為，收縮到合適中的指的就是這種寬度表現收縮到最小。

????說到widh:auto這個屬性大家一定不陌生，也都知道width的默認值是auto,正因為auto是默認值，極少有人去關注auto的寬度表現，下面就讓我介紹一下我認識的auto的四種寬度表現
1.充分利用可用空間。比方說，

、

這些元素的寬度默認是100%與父級容器的。這種充分利用可用空間的行為還有個專有名字，叫作fill-available。

2.收縮與包裹。典型代表就是浮動、絕對定位、inline-block元素或者table元素，英文稱為shrink-to-fit，收縮到合適CSS3中的fit-content指的就是這種寬度表現

3.收縮到最小。這個最容易出現在table-layout為auto的表格中

 
    
      就1列就1列就1列就1列就1列
      當父級relative，且寬度很小的時候，例如{position:relative; width:20px;}，absolute元素也會出現一柱擎天的情況；
      當父級relative，且寬度很小的時候，例如{position:relative; width:20px;}，absolute元素也會出現一柱擎天的情況；

table {
  width: 280px;
  margin: 0 auto;
  text-align: left;
  background: #a0b3d6;
  font-size: 12px;
}
td {
  padding: 2px 4px;
  border: 3px solid #fff;
  background: #f9f9f9;
}

當每一列空間都不夠的時候，文字能斷就斷，但中文是隨便斷的，數字和英文單詞不能斷。于是第一列的每個字都被斷掉，稱為min-content。

4.超出容器限制。除非明確的width相關設置，否則上面的三種情況尺寸都不會主動超過父級容器寬度，但是存在一些特殊情況。例如，內容很長的連續的英文和數字，或者內聯元素被設置了white-space:nowrap:


    恰如一江春水向東流，流到斷崖也不回頭

  .father {
    width: 150px;
    padding: 10px;
    background-color: #cd0000;
    white-space: nowrap;
  }
  .child {
    display: inline-block;
    padding: 5px;
    background-color: #f0f3f9;
  }

自元素既保持了inline-block元素的收縮特性，又同時讓內容的寬度最大，直接無視父級容器的寬度限制，稱為max-content

云服務器 GPU云服務器你不知道的你不知道的javascript 你不知道的javascript上卷你不知道

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

轉載請注明本文地址：http://www.hztianpu.com/yun/115973.html

沒有flexbox彈性盒子，但我們還有table

摘要：結構左基線向左移動右基線向右移動一定要使用屬性自己不熟悉的自行主要是為了好設置寬度都是相對于父元素的即將父元素平均分成了等份。由于項目要兼容到IE9，因此將之前flex布局全部給換掉。今天leader讓我看了kitecss這個css框架(里面的一些布局方式能比較好的兼容IE8+，里面有一些比較好的柵格布局，垂直居中等方案)。然后具體的學習了里面的一些css技巧和方法，總結如下： gi...

KunMinX 2019-08-28 18:22 評論0 收藏0
挑逗Bootstrap4源代碼 - Grid篇（下）

摘要：在這里面有一個新定義的類，它這個嵌入式展開后是，從結構可以看出來，它就是加在元素上的，可以取消列的默認間距。在這里我提供一個自定義的，名字也很簡單。寫的時候注意順序，要按照升序排列，小的放在上面，即在上面，寫反了將失效。本文所引用的版本為Bootstrap 4 Beta版，閱讀者請先下載好相關源文件。時光荏苒，若后續版本代碼發生變化，將看心情進行更新補充。如果你覺得本文不錯，歡迎...

fobnn 2019-08-29 13:23 評論0 收藏0
解剖CSS布局原理

摘要：前言本文將帶你重新認識布局，帶你解剖布局原理，前提是你要有基礎本文將解除你在布局方面的疑惑。以下將對布局元素和文檔流進行詳細講解。而且還能保持文檔流，這是其他元素做不到的。前言本文將帶你重新認識CSS布局，帶你解剖布局原理，前提是你要有基礎！本文將解除你在布局方面的疑惑。認識每個布局元素，了解他們的特性，你才知道為什么會是這樣的結果。本文內容純屬個人理解，不代表官方。此文主要為理...

李文鵬 2019-08-29 12:28 評論0 收藏0
你不知道的層疊樣式表

摘要：層疊樣式表層疊規則你或許知道是層疊樣式表的縮寫。但你不一定真正的理解了其中層疊的含義。用戶自定義樣式雖然規范中有，但從起，開始不支持用戶自定義樣式表，而是建議使用擴展來實現。網站提供的樣式表，則是我們所提供的的樣式。即不為的元素的計算值為。層疊樣式表層疊規則你或許知道 CSS 是 Cascading Style Sheets（層疊樣式表）的縮寫。但你不一定真正的理解了其中層疊的含...

Bryan 2019-08-29 16:59 評論0 收藏0
VS Code 可以在瀏覽器運行了？微軟正式發布！

摘要： .markdown-body{word-break:break-word;line-height:1.75;font-weight:400;font-size:15px;overflow-x:hidden;color:#333}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.mark...

MudOnTire 2021-10-26 09:51 評論0 收藏0