CSS3 ボックスモデルとボックスサイズ設定プロパティを理解する-CSSチュートリアル-php.cn

CSS3 ボックスモデルとボックスサイズ設定プロパティを理解する

高洛峰

リリース： 2017-03-02 15:16:24

オリジナル

1837 人が閲覧しました

ドキュメント内のすべての要素は長方形のボックスとして表示されます。レンダリングエンジンの目的は、これらのボックスのサイズ、プロパティ (色、背景、境界線など)、および位置を決定することです。 CSS では、これらの長方形のボックスは標準のボックスモデルを使用して記述されます。このモデル は、要素が占める空間 を記述します。各ボックスには、マージン、ボーダー、パディング、コンテンツの 4 つのボーダーがあります。

css3 盒模型以及box-sizing属性了解

W3C モデルの場合: 合計幅 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

IE モデルの場合: 合計幅 = margin-left + width + margin-right

は、CSS3 に box-sizing 属性を導入しました。これにより、デフォルトの CSS ボックスモデルが要素の幅と高さを計算する方法を変更できるようになります。

には、合計 2 つのオプションが含まれています:

content。 -box: 標準のボックスモデル。CSS で定義される幅と高さには、コンテンツの幅と高さのみが含まれます。 (デフォルト)

border-box: IE ボックスモデル。CSS で定義された幅と高さには、コンテンツ、パディング、ボーダーが含まれます

例:

(con1 は box-sizing: border-box に設定され、con はデフォルトのコンテンツ -box)

<head lang="en">     
    <meta charset="UTF-8">     
    <title></title>     
    <style>     
        .con{width: 100px; height: 100px;background-color:royalblue;     
             border:1px solid red; padding: 10px;}     
        .con1{box-sizing: border-box;}     
    </style>     
</head>     
<body>     
    <p class="con"></p>     
    <p class="con con1"></p>     
</body>

ログイン後にコピー

コンソールで 2 つのボックスの違いがはっきりとわかります

最初の p のボックスモデルは次のとおりです: content-box

css3 盒模型以及box-sizing属性了解