CSS Web ページのレイアウトのずれ: CSS 幅の計算

幅を計算する理由
Web ページのピクセル幅を計算するのは、CSSWeb ページのレイアウトをきちんとし、互換性を持たせるためです。左右の構造的なWebページをレイアウトしたり、パディングやマージンレイアウトを使用したりする場合、ページ全体の幅を計算することがよくありますが、幅が大きすぎても小さすぎても、幅がずれてしまいます。問題が発生します。

CSS幅の計算方法
例1: 左右構造のレイアウトスタイルを計算します。
合計幅が 400 ピクセルの場合、左右の合計は 400 ピクセル未満である必要があり、左側が 300 ピクセル、右側が 100 ピクセルになる可能性があります
正しいコード:

左 300 ピクセル

右 100 ピクセル

上記は左右の構造の正しい合計幅であり、正確に 400px に等しくなります

エラー:

合計の幅を変更せず、左側が 300 ピクセル、右側が 120 ピクセルの場合、合計の幅は 20 ピクセルを超えます。DIV+CSS コードは次のとおりです。

左 300 ピクセル

右 100 ピクセル

上の写真から、全体の幅が約20pxであるため、左右の構造を同一平面にすることができず、右側が下がっていることがわかります。
このように、実際には、私たちの計算上の不注意により、その差が通常 1px ～ 2px であることが原因で発生しますが、これは弊社では発見できません。幅の計算から始めることができます。

例 2: 左右の構造に 1px の境界線がある例です
通常、左右の構造に 1px の境界線があり、左右の構造を設定するときにいくつかの境界線が追加されます。境界線の幅と左右の構造の幅を合わせて計算します。

正しい例:

CSS と

html コード
は次のとおりです: