ボックスモデルとは何ですか?

ボックスモデルとは何ですか?

Web ページ内のすべてのタグはボックス モデルに相当し、すべてのボックス モデルには幅、高さ、パディング、ボーダー、マージンの 5 つの必須属性があります。

それでは、Web ページ内のボックス モデルを計算する方法とは何ですか。実際の幅は？ ? ? ?上記の div の幅は次のようにする必要があります: width+2*padding+2border=300+2*20+2*1=342px;

padding:padding: コンテンツと境界線の間の距離。

パディングの 4 つのプロパティ:padding-top、padding-bottom、padding-left、padding-right。

width: width.

height: height.

border: border.

一般的な境界線の書き込み: border : 1px の実線 #ccc; はそれぞれ境界線の幅、線種、色を表します。

一般的な線の種類には、実線 (実線)、破線 (破線)、点線 (点線) があります。

ボーダーの 3 つの基本属性: border-width (ボーダーの幅)、border-style (ボーダーの線種)、border-color (ボーダーの色)。マージンの基本属性: margin-top、margin-bottom、margin-left、margin-right

margin 使用時の注意点:

1. Collapse: ブロックレベルの要素間にマージンの折りたたみが存在します。要素がインライン要素またはインラインブロック要素になった場合、要素は折りたたまれません。要素が標準のドキュメント フローから外れても、要素は折りたたまれません。

2. マージンを使用してボックスを中央に配置します: margin:0 auto;

margin:0 auto を使用してボックスを中央に配置する場合、ボックスには明確な幅が必要であることに注意してください。ボックスは標準のドキュメント フロー内にある必要があります。 margin:0 は、ボックス内のコンテンツではなく、ボックスを自動的に中央に配置します。

ボックス内のテキストを中央に配置するには、次のコマンドを使用できます: text-align:center; (left to right: text-align:left/right;)

ヒント: 子要素の位置を移動したい場合は、必要な場合を除き、これをお勧めします。 子要素のマージンの代わりに親要素のパディングを使用します。 マージンを使用する必要がある場合は、親要素に境界線を付ける必要があります。 CSS を使用する場合は、できるだけ省略してください。

padding:10px 20px; は、上下のパディングが 10 ピクセル、左右のパディングが 20 ピクセルであることを意味します。

padding: 10px 20px 30px; は上部のパディングが 10、下部のパディングが 30px、左右のパディングが 20px であることを意味します。それぞれ。

以上がボックスモデルとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。