ウェブページ内の 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個を共有する

推薦する

Mysql5.7.14 インストールと設定方法操作グラフィックチュートリアル(パスワード問題解決)

この記事は主に、以前のインストール方法を使用して MySQL 5.7.14 をインストールするときに...

カレンダー効果を実現するための Bootstrap+JQuery

この記事では、カレンダー効果を実現するためのBootstrap+Jqueryの具体的なコードを参考ま...

vue-router からのフロントエンドルーティングの 2 つの実装

目次モードパラメータハッシュ履歴ハッシュ履歴.push()ハッシュ履歴.replace()アドレスバ...

モバイルデバイス上のぼやけた小さなアイコンの問題を解決する方法

序文以前、画像とテキストの垂直方向のずれの問題について説明しました。ここで示した小さな例では、小さな...

HTMLチュートリアル、簡単に学べるHTML言語

1. <body background=画像ファイル名 bgcolor=color text=...

Node.js コンソールで強調表示されたコードを印刷する方法

序文コードを実行してエラーが発生すると、エラーが出力されます。エラーにはスタック情報が含まれており、...

MySQLクエリ結果をCSVにエクスポートする方法

MySQL クエリ結果をcsvにエクスポートするには、通常、php を使用して mysql に接続し...

iframe 適応サイズ実装コード

ページドメインの関係:メインページ a.html はドメイン A: www.jb51.net に属し...

JavaScript イベント キャプチャ バブリングとキャプチャの詳細

目次1. イベントの流れ1. コンセプト2. DOMイベントフロー2. イベントの委任1. イベント...

Dockerコンテナの入退出方法の詳細な説明

1 Dockerサービスを開始するまず、docker サービスを開始する方法を知っておく必要がありま...

Postman に基づく HTTP インターフェース テスト プロセスの分析

偶然、素晴らしい人工知能のチュートリアルを発見したので、みんなと共有せずにはいられませんでした。この...

CSSでプロセスナビゲーション効果を実現する(3つの方法)

CSS によりプロセスナビゲーション効果を実現します。具体的な内容は以下のとおりです。 ::tip...

Nginx タイムアウト設定の詳細な説明

最近、プロジェクトで nginx を使用し、バックエンドで Java を使用しました。バックエンドで...

Docker JVM メモリ使用量の表示

1. Docker コンテナのホスト マシンに入り、指定されたイメージを実行しているコンテナ ID ...

Mac OS 10.11 での MySQL 5.7.12 のインストールと設定のチュートリアル

Mac OS 10.11 に MySQL をインストールして設定する方法を、主に写真を使って手順を簡...