CSS3のmax/min-contentやfit-content_html/css_WEB-ITnoseなどの幅の値を理解する

この記事は 2016 年 5 月 20 日金曜日 02:06 に公開され、css 関連に分類されます。 今日は 30 回、28 回読みました

byzhangxinxu http://www.zhangxinxu.com から

この記事のアドレス: http://www.zhangxinxu.com/wordpress/?p=5392

1. なぜジャンプするのかこういった新しいものが出てきますか？

CSS3 の世界では、width 属性にはさらにいくつかのキーワード メンバー、fill-available、max-content、min-content、fit-content があります。

見たことない友達も多いと思います。皆さんも私と同じ気持ちなのではないでしょうか。トイレに行って長い間しゃがんで、オフィスに戻ったら、これまで見たことのない新しいフロントエンド機能に遭遇しました。

私のように HTML と CSS しか学ばない人は少し圧倒されますが、CSS3、HTML5、ES6/ES7、React、Angular、bootstrap、postcss、node を知っている友達は 1 日 3 ～ 4 回しか寝るべきではないと思います。何時間も、本当に素晴らしいです！

存在するものにはすべて理由があります。では、なぜ仕様の共通幅属性にいくつかのキーワードを追加するのでしょうか?

最初に各属性値の意味について話したほうがよいでしょうか、それともこれらの新しい属性値が必要な理由について最初に話したほうがよいでしょうか?

慎重に検討した結果、私は決定しました... まず互換性について話しましょう...

基本的にモバイル版は快適に使用できます。

私のテストによると、プライベート プレフィックスは依然として不可欠です。たとえば、次のとおりです。

.min-content {    width: -webkit-min-content;    width: -moz-min-content;    width: min-content;    }

さて、詳しい話を始めましょう。

名詞 fill-available、max-content、min-content、fit-content はすべて新しいものですが、実際、CSS2.1 には同様のサイズの概念がありました...

II 、CSS2。 1 サイズ システム

CSS2.1 の世界では、一般的なサイズは次のカテゴリに分類されます:

1. 利用可能なスペースを最大限に活用する

たとえば、一部の div 要素のデフォルトの幅は親の 100% です。使用可能なスペースを最大限に活用するこの動作は、「fill-available」と呼ばれます。

2. 縮小とラッピング

代表的なものはフローティング、絶対配置、インラインブロックです。英語では「shrink-to-fit」と呼ばれ、直訳すると「縮小してフィット」となります。はい、この種の行動は、言葉でしか理解できないものもありますが、私はそれを「包み込む」ものだと常に理解していました。 CSS3 には、fit-content という独自のキー名があります。 3. 最小値に縮小します

これは、経験豊富な友人なら見たことがあるはずです。一本の柱が天を支える盛大な出来事！

十分なスペースがないときは、できれば単語を分割できますが、英語の単語は分割できません。その結果、最初の列のすべての文字が無慈悲に切り取られ、空を支える柱が形成されました。この動作は、「推奨最小幅」または「最小コンテンツ幅」と呼ばれます。

この記事の重要な役割の 1 つである min-content は、より標準化された適切な名前に変更されました。実際、min-content のサイズ特性が実際に display:table-cell に存在することは誰もが見たことがありますが、明確な用語や概念がないため、誰もがそれを知らず、混乱しているだけです。全て。

4. コンテナの制限を超える

上記 1 ～ 3 のケースでは、明確な幅関連の設定がない限り、サイズが積極的にコンテナの幅を超えることはありません。ただし、連続した英語など、いくつかの特殊なケースがあります。数字、大丈夫です。非常に長くなります。または、インライン要素がwhite-space:nowrapに設定されている場合、東に流れる湧き水の川のように見えます。

例:

.box {    display: inline-block;    width: 100px; height: 20px;     padding: 10px;    background-color: #f0f3f9;    white-space: nowrap;}

そのサイズは、ちょうど東に流れる湧き水の川のように、コンテナの幅を積極的に超えています。

max-content は、プロパティと最大コンテンツ幅を縮小することで、多少似たように動作します。

// ——— 控えめな分割線が必要です————-

さて、この時点で、 fill-available 、 max-content 、 min-content 、および fit- が見つかるでしょう。コンテンツは確かに CSS2 にありますが、同様の概念がありました。

次の疑問は、CSS2.1 にはこれらの機能があるのに、なぜ追加の新しい値を取得する必要があるのか​​ということです。無駄に学習コストが増えてしまうのではないか？

3 つの利点があると思います:

特定のレイアウトの実装が容易になります

最も重要な機能:
1. 元の表示レベルは変更されずに、要素の他の表示値の特性を持ちます。
2. CSS ワールド全体のサイズ システムをより直感的かつ完全なものにします
上で述べた利点を確認しながら、各幅の値の役割とパフォーマンスについて学びましょう。
3. width:fill-available を理解する

たとえば、ページ上に他のスタイルを持たない dc6dce4a544fdca2df29d5ac0ea9906b 要素をスローすると、 ;div> 要素の幅は、fill-available と同様に動作し、残りのスペースを自動的に埋めます。これは、通常、ボックス モデルのマージン、ボーダー、およびパディングの寸法と呼ばれるものです。

出现 fill-available 关键字值的价值在于，我们可以让元素的100%自动填充特性不仅仅在 block 水平元素上，其他元素，例如，我们一直认为的包裹收缩的 inline-block 元素上：

div { display:inline-block; width:fill-available; }

此时，元素兼具了块状元素的自动填充特性以及内联元素的定位对齐等特性。于是，（例如）我们就可以直接使用 line-height 让一个块状表现的元素垂直居中。

您可以狠狠地点击这里： CSS3 width:fill-available下的垂直居中demo

完整关键CSS代码如下：

.box {    height: 200px;     /* 行高控制垂直居中 */    line-height: 200px;}.fill-available {    /* 元素内联，响应行高和vertical-align控制 */    display: inline-block;    vertical-align: middle;        /* 宽度如块状元素般表现 */    width: -webkit-fill-available;    width: -moz-fill-available;    width: -moz-available;    /* FireFox目前这个生效 */    width: fill-available;}

正如上面注释所提到的，FireFox浏览器下，目前(2016-05-20)不是标准的 -moz-fill-available ，而是 -moz-available ，估计过个几个版本可能会调整过来。

四、理解width:max-content

max-content 的行为表现可以这么理解，假设我们的容器有足够的宽度，足够的空间，此时，所占据的宽度是就是 max-content 所表示的尺寸。

不懂没关系，我们看一个对比示例，保证立马就知道！

您可以狠狠地点击这里： CSS3 width:max-content对比测试demo

这是一个 display:inline-block 和 width:max-content 的对比demo，如果妹子下面的文字描述短，大家是看不出区别的。但是，如果文字内容像demo所展示的这么长，嘻嘻嘻嘻~~

会发现， width:max-content 表现得好像设置了white-space:nowrap一样，文字一马平川下去，元素的宽度也变成了这些文字一行显示的宽度！为什么会这么表现呢？定义就是这样的，对吧，我们对照下，首先，假设我们的容器有足够的空间，你想呀，容器足够空间，那下面的描述文字肯定一行显示了，此时，上面的图片和下面的文字那个内容宽度大，自然是文字啦，所谓 max-content 就是值采用宽度大的那个内容的宽度。

五、理解width:min-content

min-content 宽度表示的并不是内部那个宽度小就是那个宽度，而是，采用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度。

首先，我们要明白这里的“最小宽度值”是什么意思。替换元素，例如图片的最小宽度值就是图片呈现的宽度，对于文本元素，如果全部是中文，则最小宽度值就是一个中文的宽度值；如果包含英文，因为默认英文单词不换行，所以，最小宽度可能就是里面最长的英文单词的宽度。So，大家明白的说。

还没完全弄懂没关系，我们看一个对比例子，您可以狠狠地点击这里： CSS3 width:min-content对比demo

同样的是和 display:inline-block 做比较， display:inline-block 虽然也具有收缩特性，但宽度随最大长度长的那一个（同时不超过可用宽度）。而 width:min-content 的最终宽度是图片和文字最小宽度值里面大的那一个。

在本例子中，图片的宽度最小值是256像素，不能再缩了；而文字的最小宽度值是字符 display:inline- 所占据的宽度，因为 inline-block 后面的 block 可以换行，中文不用谈，天生被换行的命，显然 display:inline- 所占据的宽度要远远小于256像素，因此，最终我们元素的宽度就是256像素，肉眼看到的就是自适应图片宽度的一个效果。在CSS2.1的世界里，这种效果实际上是不好实现的，要借助单元格特性。

下图为对比效果截图：

六、理解width:fit-content

width:fit-content 也是应该比较好理解的，“shrink-to-fit”表现，换句话说，和CSS2.1中的 float , absolute , inline-block 的尺寸收缩表现是一样的。

OK，然后，有小伙伴会疑问，既然跟很多CSS声明有一样的表现，那为什么还要再弄个新东西呢？

就拿水平居中效果举例，首先浮动肯定不行，因为只有左浮动和右浮动；绝对定位压根不占据空间，普通流中根本无法应用，而 inline-block 需要父级使用 text-align:center ，而本身可能还需要 text-align:left 略烦。

而 width:fit-content 可以没有这些烦恼，因为， width:fit-content 可以实现元素收缩效果的同时，保持原本的block水平状态，于是，就可以直接使用 margin:auto 实现元素向内自适应同时的居中效果了。

您可以狠狠地点击这里： CSS3 width:fit-content使用与margin auto下水平居中demo

结果，简简单单就居中了，也不要担心其他元素会跟在后面一行显示了：

7. 結論

CSS の要素のサイズは 2 つのカテゴリに分類されます。1 つは「内部サイズ」と呼ばれ、英語では「Intrinsic Sizing」と呼ばれます。もう 1 つは内部要素によって決定されます。 "、英語では "Extrinsic" Sizing" と書き、幅は外側の要素によって決まります。

全員をテストしてください:

fill-available 、 max-content 、 min-content 、 fit-content これら 4 つのキーワード、どれが「内部サイズ」でどれが「外部サイズ」ですか?

この記事を読む前の難易度は 90 でしたが、この記事を読んだ後は難易度 10 でした。それでも難しいと感じる場合は、もう一度読んで繰り返し続けることをお勧めします。

わかりました、これ以上ナンセンスはやめてください。読んでいただきありがとうございます。コミュニケーションを歓迎します!

この記事はオリジナルの記事であり、知識ポイントは頻繁に更新され、いくつかの間違いが修正されます。そのため、再版する場合は、トレーサビリティを容易にし、古い知識や間違った知識による誤解を避けるために、元のソースを保持してください。より良い読書体験を。

この記事のアドレス: http://www.zhangxinxu.com/wordpress/?p=5392

(この記事は終わり)