CSS Web ページのレイアウトのずれ: CSS 幅の計算-CSSチュートリアル-php.cn

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

高洛峰

リリース： 2016-10-13 14:13:40

オリジナル

1483 人が閲覧しました

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

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

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左右结构宽度计算www.webjx.com</title>
<style type="text/css">
.webjxcom{width:400px;}
.zuo{ float:left; width:300px; background:#CCC;}
.you{ float:right; width:100px; background:#999}
</style>
</head>
<body>
<div class="webjxcom">
<div class="zuo">左边300px</div>
<div class="you">右边100px</div>
</div>
</body>
</html>

ログイン後にコピー

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

エラー:
If 合計の幅が変わらない場合、左側は 300px、右側は 120px であるため、合計の幅が 20px を超えていることを見てみましょう。 DIV+CSS コードは次のとおりです:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左右结构宽度计算www.webjx.com</title>
<style type="text/css">
.webjxcom{width:400px;}
.zuo{ float:left; width:300px; background:#CCC;}
.you{ float:right; width:120px; background:#999}
</style>
</head>
<body>
<div class="webjxcom">
<div class="zuo">左边300px</div>
<div class="you">右边100px</div>
</div>
</body>
</html>

ログイン後にコピー

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

例 2: 左右の構造に 1px の境界線がある例です
通常、左右の構造に 1px の境界線があり、左右の構造を設定するときにいくつかの境界線が追加されます。境界線の幅と左右の構造の幅を一緒に計算する必要があります。
正しい例:
CSS と HTML コードは次のとおりです:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左右结构宽度计算www.webjx.com</title>
<style type="text/css">
.webjxcom{width:400px;}
.zuo{ float:left; width:298px; border:1px solid #F00; background:#CCC;}
.you{ float:right; width:98px; background:#999; border:1px solid #F00;}
</style>
</head>
<body>
<div class="webjxcom">
<div class="zuo">左边300px</div>
<div class="you">右边100px</div>
</div>
</body>
</html>

ログイン後にコピー

左右の構造の幅が 1px であるため、この時点では、それぞれ左右の境界線の幅 2 ピクセルを減算する必要があるため、左側は最終的に幅は 298 ピクセルになり、右側の幅は 98 ピクセルになります

そうでない場合、境界線を減算すると次のような影響が生じます:

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

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