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

資訊專欄INFORMATION COLUMN

你不知道的width:auto

DandJ / 3288人閱讀

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

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

、

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

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

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

 

    

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

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

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

4.超出容器限制。除非明確的width相關(guān)設(shè)置，否則上面的三種情況尺寸都不會主動超過父級容器寬度，但是存在一些特殊情況。例如，內(nèi)容很長的連續(xù)的英文和數(shù)字，或者內(nèi)聯(lián)元素被設(shè)置了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元素的收縮特性，又同時讓內(nèi)容的寬度最大，直接無視父級容器的寬度限制，稱為max-content

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

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

相關(guān)文章

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

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

    KunMinX 評論0 收藏0

  • 挑逗Bootstrap4源代碼 - Grid篇（下）

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

    fobnn 評論0 收藏0

  • 解剖CSS布局原理

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

    李文鵬 評論0 收藏0

  • 你不知道的層疊樣式表

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

    Bryan 評論0 收藏0

  • VS Code 可以在瀏覽器運(yùn)行了？微軟正式發(fā)布！

    摘要： .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 評論0 收藏0

發(fā)表評論

0條評論

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