CSS レイアウトをより直感的にする: box-sizing_html/css_WEB-ITnose

CSS レイアウトをより直感的に: box-sizing

CSS を書いたことがある、または CSS に触れたことがあるなら、ボックス モデルについてよく知っているはずだと思います。 CSS のさらにわかりにくい点の 1 つは、ボックス モデルの高さと幅の計算です。初心者はもちろん、CSS を長年書いてきた人でも同じように感じるでしょう。 CSS の高さと幅は常に直感的ではないため、一見しただけでは違いがわかりにくく混乱してしまいます。幅を 100 ピクセルにしたい場合もありますが、常にそうであるとは限りません。ただし、ボックスのサイズ変更プロパティを正しく設定すると、ボックスの高さと幅は設定した 100 ピクセルと正確に一致します。ちょっと目まいがしませんか？それでは、以下で詳しくご紹介します。

1.ボックスモデル

CSSに関する重要な概念はCSSボックスモデルです。ページ上のこれらの要素の高さと幅を制御します。ボックス モデルは、特に高さと幅の計算に関してやや混乱する可能性があります。実際のボックスの幅 (ページに表示される幅) と高さは、次のような他の属性で追加する必要があります。

padding + border + width = ボックスの幅
padding + border + height = height box

こちらを見てください あまり直感的ではないので、画像を見てみましょう:

これは、幅を 200px に設定すると、実際にレンダリングされるボックスの幅は 200px より大きくなる可能性があることを意味します (何も残っていないかぎり)右側の境界線と左右のパディング)。奇妙に思えるかもしれませんが、CSS によって設定される幅はコンテンツ領域の幅のみであり、ボックスの幅ではありません。繰り返しますが、非常によく似ています。

これの直接的な結果は、ページ上に表示されるボックスの幅を 200px にしたい場合、その左右の境界線と左右のパディングを差し引いて、対応する CSS 幅に設定する必要があるということです。たとえば、上の図で、目的のボックスの幅を 200 ピクセルに設定する場合、まず左右のパディングから 20 ピクセル、左右の境界線から 1 ピクセルを差し引いてから、対応する CSS 幅を 158 ピクセルに設定する必要があります。このため、特に初心者にとっては、コードが少しわかりにくく見えます (私はこの問題について長い間混乱していました)。明確に幅を158pxに設定しましたが、200pxと表示されました。これは直感的ではなく、明白ではありません。

幸いなことに、私たちは望むことを達成するためのより良い方法を持っています。

2. box-sizing

上記とは異なり、box-sizing:border-boxを設定すると目的を達成できます。たとえば、上では幅 200 ピクセルのボックスが必要なので、幅を直接 200 ピクセルに設定します。より鮮明に見えませんか？左右の境界線と左右のパディングを設定すると、コンテンツ領域が自動的に調整されます。これはより直接的でわかりやすいかもしれません。 CSS コードは次のとおりです:

div {  box-sizing: border-box;  width: 200px;  padding: 20px;  border: 1px solid #DDD;}

以下に示すように:

実際、これはデザイナーや開発者からより高く評価されています。

3. box-sizing のその他の値

このように、CSS の幅を設定する際に、そのコンテンツ領域の幅のみを設定することができます。ブラウザのデフォルト。 1 で示した例を考えてみましょう。

Box-sizing は継承するように設定することもできます。これは、このプロパティを親要素から継承することを意味します。

4. ブラウザの互換性

IE8 以降のバージョンはこの属性をサポートしており、Firefox はブラウザ製造元の接頭辞 -moz- を追加する必要があり、IOS および Android ブラウザのそれより低いバージョンも -webkit- を追加する必要があります。実際、多くのreset.cssやnormal.cssには次のCSSステートメントが含まれており、これもより好ましい使用法です:

*, *:before, *:after {  -moz-box-sizing: border-box;  -webkit-box-sizing: border-box;  box-sizing: border-box;}

結論

これを見れば、box-sizingの意味が理解できるはずだと思います。したがって、私が皆さんにお伝えしたいのは、これは多くのフロントエンド面接の質問における共通知識ポイントの 1 つであるということです。面接官は通常、CSS *{box-sizing:border-box;} に次のステートメントを設定した後、その機能は何ですか?と質問します。今この質問に明確に答えていただけると思います。