ウェブページ内の 2 つのボックス モデル (W3C ボックス モデル、IE ボックス モデル)

ウェブページ内の 2 つのボックス モデル (W3C ボックス モデル、IE ボックス モデル)
Web ページ ボックス モデルには 2 種類あります。

1: 標準 W3C ボックス モデル。2: IE ボックス モデル (IE ブラウザーのデフォルト モデル)。

2 つの異なるモデルの Web ページでは、同じ CSS プロパティが定義された要素の表示効果が異なります。次の式を使用して、これら 2 つの異なるボックス モデルを区別します。

1: 標準W3Cボックスモデル

幅 = 幅 + (パディング左) + (パディング右) + (マージン左) + (マージン右) + (ボーダー左) + (ボーダー右)
高さ = 高さ + (padding-top) + (padding-bottom) + (margin-top) + (margin-bottom) + (border-top) + (border-bottom)

2: IEボックスモデル

幅 = 幅 + (左境界線) + (右境界線)
高さ = 高さ + (境界線上) + (境界線下)

このモデルはIEブラウザのデフォルトのボックスモデルですが、もちろん変更することもできます。

<<:  HTML/XHTML における img 画像タグの基本的な使用法の詳細な説明

>>:  Typescriptの基本構文13個を共有する

推薦する

MySQLのバックアップとリカバリの詳細な説明

序文:前回の記事では、さまざまな MySQL ステートメント構文の使用法とユーザー権限に関する知識を...

MySQL ルートパスワードをリセットする方法

目次1. ルートパスワードを忘れてしまい、データベースにアクセスできない: DBA にとって、スーパ...

Linuxはlsof/extundeleteツールを使用して、誤って削除されたファイルやディレクトリを復元します。

序文Linux には Windows のような目立つごみ箱がないため、簡単に復元することはできません...

Vue ソースコード学習でレスポンシブ性を実装する方法

目次序文1. レスポンシブシステムの重要な要素1. データの変更を監視する方法2. 依存関係を収集す...

Vue カプセル化コンポーネント アップロード画像コンポーネント

この記事の例では、参考のためにvueアップロード画像コンポーネントの具体的なコードを共有しています。...

アイデアはDockerプラグインを使用してワンクリックの自動デプロイを実現します

目次環境: 1. Dockerはリモート接続アクセスを可能にするidea dockerプラグインをイ...

シンプルで簡単なJavaScript開発のためのSvelte実装原理の詳細な説明

目次デモ1フラグメントの作成スヴェルトコンポーネント状態を変更できるデモSvelte は長い間存在し...

Nginx セッション共有問題の解決策の分析

この記事は主に、Nginx セッション共有の問題に対する解決策を紹介します。記事内のサンプル コード...

dockerでnginxを実行するときにdaemon offが使用される理由についての簡単な説明

とても嬉しいです。この問題に遭遇したとき、私はDockerコンテナのプロセス原理について話さなければ...

入力と画像を揃えるためにvertical-alignを使用します

input と img を同じ行に配置すると、img タグが常に input より 1 つ上になり、...

MySQL スロークエリログの設定と使用方法のチュートリアル

序文MySQL スロー クエリ ログは、日常業務でよく遭遇する機能です。MySQL スロー クエリ ...

Linux C バックグラウンドサービスプログラムの単一プロセス制御の実装

導入通常、バックグラウンド サーバー プログラムには 1 つのプロセスのみが必要ですが、単一のプロセ...

jQueryのコア機能とイベント処理の詳細な説明

目次イベントページの読み込みイベント委任イベントの切り替えイベント要約するイベントページの読み込み1...

写真とテキストによる MySQL 8.0.21 インストール チュートリアル

1. ダウンロードリンクをダウンロードするダウンロードをクリックします。Oracle アカウントにロ...

JavaScriptオブジェクトをマージするさまざまな方法の詳細な説明

目次オブジェクトをマージするさまざまな方法(インターフェースを通じてデータを取得し、それをローカル ...