書籍「DIV+CSS ビジネスケースと Web レイアウト開発」を読む_ボックスモデル、ロゴとバナーの作成_ランダムメモ_html/css_WEB-ITnose

1. ボックスモデル

ボックスは 4 つの部分で構成されます: content (コンテンツ)、padding (fill)、border (border)、および margin (Outえー、境界線）

ボックスモデルには2種類あります:

(1) 標準 W3C ボックスモデル

(2) IE ボックスモデル (コンテンツにパディングとボーダーが含まれます)

規格を統一して Web ページを許可するためすべてのブラウザと互換性があり、標準の W3C ボックス モデルを使用する必要があります

使用方法?回答: Web ページの先頭に DOCTYPE ステートメントを追加します

2. ボックスモデル構造の詳細な説明

1.

ボーダーには 3 つの属性があります:

border-width (幅)、border-style (スタイル)、border-color (カラー)

(1) width:

(1) 単位値 (1px) またはキーワード (thin、medium、 Thick) )

(2) 設定されていない場合、デフォルトは中です。通常、ブラウザでは 2px

として解析されます

(3) 絶対的な定義には単位値を使用することをお勧めします

(2) スタイル:

なし、実線、非表示、点線、破線、二重、溝、尾根、インセット、アウトセットなど

3つの書き方:

(1) 枠線: 幅のスタイルの色 (4 辺同じ) )

例: border: 1px Solid #000000

(2) border-left: width style color (4辺が異なります)

例: border-left: 1px Solid #000000

(3) border-left-width: 【(2)の書き方の別バージョン】

border-left-style:

border-left-color:

例:

border-left-width: 1px;

border-left-style: Solid;

border-left-color: #000000;

注:

ページ アプリケーションでは、設定された境界線もページ領域を占有します。したがって、レイアウトを正確に計算する場合は、

境界線が 1px の場合でも、幅と高さに対する境界線の影響を考慮する必要があります。

2. CSS パディング属性

属性:

padding (padding-top、padding-right、padding-bottom、padding-left)

属性値:

単位値またはパーセンテージ

2 つの書き方:

(1) パディング: 右上下左 (右上下左?? 時計回り)

例: パディング: 10px 20px 30px 40px;

(2)padding-top:

padding-right:

padding-bottom:

padding-left:

例:

padding-top:

padding-right: 20px;下部: 30px;

padding-left: 40px;

3. CSS の外枠 (マージン) 属性

属性: margin(margin-top , margin- right, margin-bottom, margin-left)

属性値:

単位値またはパーセンテージ

2通りの書き方:

(1) margin: 右上、下左(右上、下、左??)

例: margin: 10px 20px 30px 40px;

(2) margin-top:

margin-right:

margin-bottom:

margin-left:

例:

マージン-上: 10ピクセル;

マージン-下: 30ピクセル;

マージンはAです非常に便利な CSS プロパティです。実際のアプリケーションでは、ページ レイアウト要件を満たすために、その値を負の数に設定することもできます。