CSS変ボックスモデルと標準ボックスモデルの使い方-CSSチュートリアル-php.cn

CSS変ボックスモデルと標準ボックスモデルの使い方

php中世界最好的语言

リリース： 2018-03-20 16:18:28

オリジナル

4066 人が閲覧しました

今回はCSSの変なボックスモデルと標準のボックスモデルの使い方を紹介します。 CSSの変なボックスモデルと標準のボックスモデルを使用する際の

注意点は何ですか。見てみましょう。

html ドキュメントでは、ページ上にレンダリングされる各タグはボックスモデル

です。

W3C标准的盒子模型 和 IE标准的盒子模型ボックスモデルは次のように分かれています:

。

現在の主流ブラウザのほとんどは W3C 標準ボックスモデル (標準ボックスモデル) をサポートしているため、奇妙なボックススタイルの分析も保持しています。もちろん、IE は引き続き独自の標準ボックスモデル (奇妙なボックスモデル) を使用します。使用方法 2 つの簡単な例で、これら 2 つのボックスモデルをそれぞれ紹介します:

標準ボックスモデル:

<!--html-->
<p class="box1">
    <p class="box2"></p>
</p>

ログイン後にコピー

<!--css-->
.box1{
         width: 200px;
         height: 200px;
         background-color: aqua;
         padding: 30px;
        }
.box2{
         width: 200px;
         height: 200px;
         background-color: red;
        }

ログイン後にコピー

ここでの外側のボックスの幅と高さは両方とも 30 + 200 + 30 = 260px です。

奇妙なボックスモデル

<!--css中加入box-sizing属性-->
<!--box-sizing属性：border-box(怪异盒子模型)，content-box(标准盒模型)-->
.box1{
         width: 200px;
         height: 200px;
         background-color: aqua;
         padding: 30px;
         box-sizing: border-box;
        }
.box2{
         width: 200px;
         height: 200px;
         background-color: red;
        }

ログイン後にコピー