CSSボックスモデルの意味と原則を深く理解する

yulia
リリース: 2018-09-12 16:56:32
オリジナル
5979 人が閲覧しました

多くのフロントエンド開発者は、CSS は単純すぎるため、学習にそれほど長い時間を費やす必要はないと考えています。実際には、フロントエンド開発者が CSS を使いこなせば、効率とユーザー エクスペリエンスが向上します。最近は、CSS を徹底的に学習して、問題が発生したときに何をすべきかを理解し、適切な解決策をすぐに処方できるようにするつもりです。次にCSSボックスモデルを中心に紹介します。

ボックスモデルとは

ボックスモデルと言えば、フロントエンド開発者であれば誰もが理解していると思います。 mdn 公式ウェブサイトの説明がここに適用されます:

ドキュメントでは、各要素は長方形のボックスとして表されます。これらのボックスの寸法、プロパティ (色、背景、境界線など)、および位置を決定することが、レンダリング エンジンの目標です。

CSS では、これらの長方形のボックスはそれぞれ、標準のボックス モデルを使用して記述されます。このモデルは、要素が占める空間の内容を記述します。各ボックスには、マージン、ボーダー、パディング、コンテンツの 4 つの辺があります。

公用語は常に非常に曖昧なので、Chrome コンソールのスクリーンショットを撮って説明しましょう:

CSSボックスモデルの意味と原則を深く理解する

一番外側のオレンジ色は余白領域、内側の黄色は境界領域 (境界領域) です。さらに内側の緑はパディング領域、最も内側の緑はコンテンツ領域です。

ボックスモデルの役割

さて、ボックスモデルのコンセプトについては上の写真だけで言うことはないようです。レイアウトに対するボックス モデルの影響を見てみましょう。たとえば、要素のサイズを 200px に設定したい場合、次のコードを記述するとします。

<style>
  .box {
    width: 200px;
    height: 100px;
    padding: 20px;
  }
</style>
<div class="box">
  盒子模型
</div>
ログイン後にコピー

その結果、要素を検査すると、要素のサイズが 240px ではなく 240px になっていることがわかります。 200ピクセル。

CSSボックスモデルの意味と原則を深く理解する

これはなぜですか?デフォルトでは、幅、高さなどの設定はコンテンツ領域に対するものであるため、設定された幅 200px は、コンテンツ領域の幅に左右のパディングのサイズを加えたもののみとなり、全体のサイズが決まります。大きくなる要素。これは、現実世界の中央のボックスについての私たちの理解とは異なります。たとえば、家の面積について話すとき、それは利用可能な面積を指すだけでなく、壁の厚さ、バルコニー、エレベーター、その他のスペースも含まれます。

ボックスモデルとボックスサイジング

CSSを現実世界と一致させるために、この時点でボックスサイジングが機能します。ボックス サイズ設定は、エフェクト オブジェクトの幅と高さを設定するために使用されます。 content-box、pading-box、border-box という 3 つの値があります。デフォルト値は content-box です。なぜマージンボックスがないのかと疑問に思う人もいるかもしれません。具体的な理由はわかりません。著書「CSS World」の中で Zhang Xinxu 先生が述べた 2 つの理由を参照してください:

margin-box 自体にはあまり価値がない

、そして margin の仕様が競合します。マージンの仕様に「マージンの背景は常に透明」とあるので、マージンボックスがある場合、背景はどうなるでしょうか?

なぜ余白ボックスがないのかについては、簡単に説明しますので、興味のある方はご自身で確認してください。

ベストプラクティス

一部の専門家は、レイアウトの便宜のために、すべての要素をボックスサイズに設定することを提案しています: border-box

低バージョンのブラウザを考慮しない場合は、次のコードを使用できます:

*,
*:before,
*:after { 
  box-sizing: border-box;
}
ログイン後にコピー

その後、一部の専門家が次のような継承方法を提案しました。

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}
ログイン後にコピー

この方法はベストプラクティスと呼ばれています。専門家によって推奨されているため、将来は 2 番目の方法を使用できます。メソッドのコード スニペットは、reset.css に配置されます。

以上がCSSボックスモデルの意味と原則を深く理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!