CSS Webページのレイアウトズレ幅の計算手順を詳しく解説

幅を計算する理由
Web ページのピクセル幅を計算するのは、CSSWeb ページのレイアウトをきちんとし、互換性を持たせるためです。左右の構造化 Web ページをレイアウトするとき、または幅が大きすぎるかどうかに関係なく、幅を計算しない場合は、ページ全体の幅を計算するのが一般的です。大きすぎても小さすぎても、位置ずれの問題が発生します。 CSS幅の計算方法例1: 左右の構造のレイアウトスタイルを計算します。 合計の幅が 400 ピクセルの場合、左右の合計は 400 ピクセル未満である必要があり、左側が 300 ピクセル、右側が 100 ピクセルになる可能性があります。

正しいコード:

<
head

>

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

左 300 ピクセル

右 100 ピクセル

上記は正しい左右の構造です幅はちょうど 400px です

エラー:
合計の幅を変更しない場合、左側は 300px、右側は120px の場合、合計幅が 20px を超えると、どのような問題が発生するか見てみましょう。p+CSS コードは次のとおりです。

左に 300 ピクセル

右側に 100px

左右の構造の幅は両方とも 1px なので、 , この時、左右2ピクセルの境界線の幅を引く必要があるので、左端は298px、右側は98pxの幅になります

境界線を引かないと、次のような影響が生じます。

p+CSS

幅のパーセンテージの計算を設定します

幅の計算にパーセンテージを使用する必要がある場合もあります。通常は、合計のパーセンテージ幅も必要になり、100%を超えることはできません

CSS の幅を計算するときは概要に注意してください:
左右構造、複数列レイアウト、または単一の p-width レイアウト設定のいずれであっても、特に次の場合、幅の把握と計算に注意を払う必要があります。パディング、マージン、ボーダーなどを使用します。 CSS 属性 現時点では、設定した占有幅を計算し、同じ行の幅の合計が以下であることをしっかりと把握する必要があります。合計幅よりも大きい場合、位置ずれの互換性の問題が発生します。したがって、一般的な位置ずれがある場合は、まず幅を計算することができます。もちろん、これも位置ずれの互換性の問題を解決する方法の 1 つです。

以上がCSS Webページのレイアウトズレ幅の計算手順を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。