CSS3 のボックス サイズ設定 (コンテンツ ボックスとボーダー ボックス) の詳細な説明

CSS3 のボックス サイズ設定 (コンテンツ ボックスとボーダー ボックス) の詳細な説明

CSS3 のボックス サイズ設定 (content-box と border-box)

CSS3 の box-sizing プロパティを使用すると、ボックス モデルを特定の方法で指定できます。次の 2 つの方法があります。

content-box: 標準ボックスモデル。W3C ボックスモデルとも呼ばれ、最近のブラウザで一般的に使用されています。

border-box: 奇妙なボックス モデル、IE ブラウザーの下位バージョンのボックス モデル

最新のブラウザおよび IE9 以降のデフォルトは content-box です。

構文形式:

box-sizing:content-box | border-box

違い:

content-box: パディングと境界線は定義された幅と高さに含まれません。

ボックスの実際の幅 = 設定された幅 + パディング + 境界線

border-box: パディングと境界線は定義された幅と高さに含まれます。

ボックスの実際の幅 = 設定された幅(パディングと境界線は実際の幅に影響しません)

要約する

以上が、CSS3 のボックス サイズ設定 (content-box と border-box) についてご紹介した内容です。お役に立てれば幸いです。ご質問がございましたら、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<:  Dockerカスタムブリッジdocker0とdockerのコマンド操作の開始、終了、再起動

>>:  js の hasOwnProperty のプロパティとインスタンスの使用法の詳細な説明

推薦する

MySQL 8.0.18 のインストールと設定方法のグラフィックチュートリアル

この記事は、参考のためにMySQL 8.0.18のインストールと設定のグラフィックチュートリアルを記...

フォーム入力ボックスに関するWebデザインのヒント

この記事では、Web デザインにおけるフォーム入力ボックスに関するヒントとコードをいくつか紹介します...

nginxはdockerコンテナ内に設定ファイルを自動的に生成します

企業が Docker 自動デプロイメントを構築する場合、Docker の実行時にコンテナ内の設定ファ...

フォーム送信時に追加のパラメータを渡すためのいくつかの一般的な方法

フォームを送信するときに、送信前に追加のパラメータが追加される状況が発生する場合があります。この問題...

MySQL遅延スレーブを導入するメリットのまとめ

序文MySQL のマスター/スレーブ レプリケーション関係は、厳密には「同期」または「マスター/スレ...

1 つの記事で JSON (JavaScript Object Notation) を理解する

目次JSONが登場JSON構造JSONオブジェクトJson オブジェクトと JavaScript オ...

MySQLで最大接続数を達成する方法

目次データベース接続数が急増した理由は何ですか? 1. はじめに2. 知識ポイント3. 練習するIV...

FirefoxでCookieとお気に入りをインポートおよびエクスポートする方法

Firefox は、多くの拡張機能とプラグインを備えた、よく使用されるブラウザです。IE に比べて多...

ミニプログラムは、カスタムのマルチレベル単一選択と複数選択を実装します

この記事では、参考のために、ミニプログラムでカスタムのマルチレベル単一選択および複数選択機能を実装す...

TomcatはXMLを解析し、リフレクションを通じてオブジェクトを作成します。

次のサンプル コードでは、Tomcat が XML を解析し、リフレクションを通じてオブジェクトを作...

古典的なJavaScriptの再帰ケースの質問の詳細な分析

目次再帰とは何ですか?また、どのように機能しますか? 1. 合計(1)デジタル加算(2)配列の和2....

Linux で特殊文字のファイル名やディレクトリを削除する方法

inode番号でファイルを削除するまずls -iを使用して、削除するファイルのinode番号を見つけ...

Windows で削除された MySQL 8.0.17 のルート アカウントとパスワードを回復する方法

少し前にSQLの独学を終え、MySQL 8.0.17をダウンロードしました。インストールして設定した...

クールな花火効果を実現するjs

この記事では、jsを使用してクールな花火効果を実現するための具体的なコードを参考までに共有します。具...

MySQL トランザクション分離レベルとロックメカニズムの問題に関する深い理解

概要データベースは通常、複数のトランザクションを同時に実行します。複数のトランザクションが、同じデー...