CSS3のボックスサイズプロパティの興味深いボックスモデルについての簡単な説明

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

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

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

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

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

ここでは、CSS3 プロパティ box-sizing (デフォルト値: content-box) が使用されます。

/* 標準モデル */ 
 ボックスのサイズ:コンテンツボックス;
  /*IE モデル*/
 ボックスのサイズ:境界線ボックス;

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

border-box: 要素の境界ボックスを決定するために、幅と高さ (最小/最大プロパティ) を指定します。つまり、要素の幅と高さを指定すると、パディングと境界線を指定することも含まれます。コンテンツの幅と高さは、指定された「幅」プロパティと「高さ」プロパティから、両側の境界線とパディングの幅を減算することによって計算されます。

テスト参照ケース

理想的な効果とコードは次のとおりです。

.input { 幅: 146px; 高さ: 36px; 行の高さ: 36px; 背景: 透明; 境界線: 2px 実線 #0D349A; 色: #bdbdbd; 左パディング: 10px; 右パディング: 30px; フォントサイズ: 14px;
box-sizing:content-box; (デフォルトはオプション)} 

ブートストラップ フレームワークを使用するプロジェクトに適用すると、bootstrap.min.css スタイルのデフォルトの box-sizing: border-box; が検索ボックスの幅と高さに影響することがわかりました。

* { -webkit-box-sizing: border-box; 
-moz-box-sizing: 境界線ボックス;
 ボックスのサイズ: 境界線ボックス;}

このプロパティにより、ページは次のように表示されます。

.input { 幅: 146px; 高さ:
 36ピクセル;
 行の高さ: 36px; 
背景: 透明; 
境界線: 2px 実線 #0D349A;
 色: #bdbdbd; 左パディング: 10px;
 右パディング: 30px; 
フォントサイズ: 14px; ボックスサイズ: ボーダーボックス;} 

この時点で、理想的な効果を実現したい場合は、スタイルを次のように調整する必要があります。

.input { 幅: 190px;
 高さ: 40px; 行の高さ: 
40px; 背景: 透明; 
境界線: 2px 実線 #0D349A;
 色: #bdbdbd; 左パディング: 10px; 
右パディング: 30px;
 フォントサイズ: 14px; 
ボックスのサイズ:境界線ボックス;}

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

このスタイルを使用し、box-sizing: border-box; を指定すると、パディングと境界線はオーバーフローしなくなり、内側に縮小されます。この効果は非常に実用的です。

要約する

上記は、CSS3 box-sizing 属性の興味深いボックス モデルについての編集者による紹介です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。編集者がすぐに返信いたします。