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

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

<<:  three.js を使って立体的な矢印線を描く詳細な手順

>>:  docker run -v はデータボリュームを異常にマウントし、コンテナのステータスは常に再起動になります。

推薦する

WindowsにJDK8をインストールする方法

1. ダウンロード: http://www.oracle.com/technetwork/java/...

ウェブページでコンテンツを引用するためによく使われるHTMLタグをマスターする

長い引用には blockquote を、短い引用には q を、参考文献には cite を使用します。...

Antdesign-vueとsortablejsを組み合わせて、2つのテーブルをドラッグして並べ替える機能を実現

目次成果を達成するsortablejs の紹介具体的な実装成果を達成する最初は、antdesign ...

Docker stopはすべてのコンテナを停止/削除します

この記事では主に、すべてのコンテナを削除する Docker stop/remove を紹介し、皆さん...

MySQL パーティションテーブルの正しい使用方法

MySQL パーティションテーブルの概要数億、あるいは数十億ものレコードを格納するテーブルに遭遇する...

単一/複数行テキストを含む div を垂直方向に中央揃えする N 通りの方法 (高さ不明/高さ固定)

この問題について話すとき、垂直方向の中央揃えを設定するための vertical-align 属性が ...

ウェブフォームデザインのための5つの実用的なヒント

1. フォームテキスト入力のモバイル選択: テキスト入力フィールドにプロンプ​​トが追加されている場...

Docker Compose のインストールと使用手順

目次1. Docker Compose とは何ですか? 2. Docker Composeのインスト...

CSSはカラフルでスマートな影の効果を実現します

背景前景要素から特定の色を継承する影の効果を作成する方法を知りたいと思ったことはありませんか?方法に...

MySQL のデッドロック チェックとデッドロック除去の例の詳細な説明

1. クエリプロセスプロセスリストを表示2. 対応するプロセスを照会し、IDを強制終了します。検証(...

Kubernetes コントローラーとラベルの簡単な分析

目次01 k8sの一般的なコントローラーRCコントローラーデプロイメント コントローラーステートフル...

Centos7 FFmpeg オーディオ/ビデオ ツールのインストールに関する簡単なドキュメント

ffmpeg は非常に強力なオーディオおよびビデオ処理ツールです。公式 Web サイトは http:...

LeetCode の SQL 実装 (184. 部門内で最も高い給与)

[LeetCode] 184. 部門最高給与従業員テーブルにはすべての従業員が保存されます。すべて...

ハイパーリンクを開くターゲットのテスト

リンクのターゲット属性は、リンクが開く場所を決定します。その値は通常、_blank、_self、_p...