CSS3 のボックス サイズ属性の分析 (コード付き)

この記事の内容は、CSS3のbox-sizing属性の解析（コード付き）ですので、ある程度参考になる内容ですので、困っている方は参考にしていただければ幸いです。

誰もが、コンテンツの内側から外側、パディング、ボーダー、マージンに至るまで、ボックス モデルの構成を知っておく必要があります。

ボックス モデルには 2 つの標準があり、1 つは標準モデルです。もう1つはIEモデルです。

上の 2 つの図から、標準モデルではボックス モデルの幅と高さがわずかであることが簡単にわかります。コンテンツの幅と高さ

IE モデルでは、ボックス モデルの幅と高さは、コンテンツ、パディング、境界線の幅と高さの合計です。

css で 2 つのモデルを設定する方法

ここでは CSS3 属性の box-sizing (デフォルト値: content-box) が使用されます

/* 标准模型 */ 
box-sizing:content-box;
/*IE模型*/
box-sizing:border-box;

content-box: CSS2.1で規定されている幅と高さの動作です。要素の幅と高さ (最小/最大プロパティ) を指定すると、ボックスの幅と高さに適用されます。要素のパディングと境界線のレイアウトと描画では、

border-box を除く幅と高さを指定します。幅と高さ (最小/最大プロパティ) を指定して、要素の境界ボックスを決定します。つまり、要素の幅と高さの指定には、パディングとボーダーの指定が含まれます。コンテンツの幅と高さは、それぞれの側から減算されます。境界線とパディングの幅は、指定された「幅」プロパティと「高さ」プロパティから計算されます。

テスト参照ケース

理想的なエフェクトとコードは次のとおりです。

----

アプリケーション bootstrap.minブートストラップ フレームワークを使用するプロジェクトで見つかりました。.css スタイルのデフォルトの box-sizing: border-box; は、検索ボックスの幅と高さに干渉します。

* {
    -webkit-box-sizing: border-box;    
    -moz-box-sizing: border-box;    
    box-sizing: border-box;
    }

この属性により、ページは次のようになります:

.input {
    width: 146px;
    height: 36px;
    line-height: 36px;
    background: transparent;
    border: 2px solid #0D349A;
    color: #bdbdbd;
    padding-left: 10px;
    padding-right: 30px;
    font-size: 14px;
    box-sizing:border-box;
}

現時点では

.input {
    width: 190px;
    height: 40px;
    line-height: 40px;
    background: transparent;
    border: 2px solid #0D349A;
    color: #bdbdbd;
    padding-left: 10px;
    padding-right: 30px;
    font-size: 14px;
    box-sizing:border-box;
}

PS ヒント: コンテナーの幅が width として定義されている場合: 100%;、パディングまたはボーダーを追加すると、親コンテナーからオーバーフローして外側に拡張されます。

このスタイルを使用し、box-sizing: border-box; として指定すると、パディングとボーダーはこの効果は非常に実用的です

[関連する推奨事項: CSS3 ビデオ チュートリアル]

以上がCSS3 のボックス サイズ属性の分析 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。