ホームページ > 記事 > ウェブフロントエンド > CSS Web ページの位置がずれている場合の対処方法
CSS Web ページの位置がずれている場合の対処方法
- php中世界最好的语言オリジナル
- 2017-11-25 11:30:263005ブラウズ
Web ページを作成するとき、Web ページを美しく滑らかにするには、いくつかの点に注意する必要があります。CSS Web ページがずれている場合はどうすればよいでしょうか。続いては、Webページがずれる時の対処法と予防法をお届けします。
幅を計算する理由
Web ページのピクセル幅を計算するのは、CSS Web ページ レイアウトの整頓と互換性のためです。左右の構造化 Web ページをレイアウトするとき、または幅が大きすぎるかどうかに関係なく、幅を計算しない場合は、ページ全体の幅を計算するのが一般的です。大きすぎても小さすぎても、位置ずれの問題が発生します。 CSS幅の計算方法例1: 左右の構造のレイアウトスタイルを計算します。
幅の合計が 400 ピクセルの場合、左右の合計は 400 ピクセル未満である必要があり、左側が 300 ピクセル、右側が 100 ピクセルになる可能性があります
正しいコード:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左右结构宽度计算</title>
<style type="text/css">
.yangshi{width:400px;}
.zuo{ float:left; width:300px; background:#CCC;}
.you{ float:right; width:100px; background:#999}
</style>
</head>
<body>
<div class="yangshi">
<div class="zuo">左边300px</div>
<div class="you">右边100px</div>
</div>
</body>
</html>Web ページの位置ずれに対する CSS 幅の計算
上記は左右の合計の正しい構造です。幅は正確に 400px です。
エラー:
合計の幅を変更しない場合、左側は 300px、右側は 120px となり、合計の幅は20pxを超えるとどのような問題が発生するのか見てみましょう。
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左右结构宽度计算</title>
<style type="text/css">
.yangshi{width:400px;}
.zuo{ float:left; width:300px; background:#CCC;}
.you{ float:right; width:120px; background:#999}
</style>
</head>
<body>
<div class="yangshi">
<div class="zuo">左边300px</div>
<div class="you">右边100px</div>
</div>
</body>
</html>DIV CSSレイアウトずれ診断
合計幅が20px程度なので、左右の構造を揃えることができません。落ちる。
このように、実際には、私たちの計算上の不注意により、その差は通常 1px ～ 2px であり、私たちには発見されません。互換性がある場合は、幅の計算から始めることができます。
例 2: 左右の構造に 1px のボーダーの例があります
通常、左右の構造に 1px のボーダーがあり、左右の構造を設定するときにいくつかのボーダーが追加されます。境界線の幅と左右の構造の幅を一緒に計算する必要があります。
正しい例:
CSS と HTML コードは次のとおりです:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左右结构宽度计算</title>
<style type="text/css">
.yangshi{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="yangshi">
<div class="zuo">左边300px</div>
<div class="you">右边100px</div>
</div>
</body>
</html>
左右の構造の幅が 1px であるため、このとき、左右 2 ピクセルの境界線の幅は減算されるため、左側は 298 ピクセル、右側は 98 ピクセルになります。 幅
DIV+CSS 設定による幅のパーセンテージの計算
幅を計算するためにパーセンテージを使用する必要がある場合もあります。通常、これは合計の幅のパーセンテージでもあります。 100%を超えることはできません
CSS幅を計算するときは概要に注意してください:
左右の構造、複数列のレイアウト、または単一のDIV幅のレイアウト設定に関係なく、すべての把握に注意を払う必要があります特にパディング、マージン、ボーダー、その他の CSS プロパティを使用する場合、幅の計算
は、同じ行の幅の合計が または より小さいことをしっかりと把握する必要があります。合計幅と等しいです。合計幅よりも大きい場合、位置ずれの互換性の問題が発生します。したがって、一般的な位置ずれがある場合は、まず幅を計算することができます。もちろん、これも位置ずれの互換性の問題を解決する方法の 1 つです。 非常に多くの処理方法があるため、よりエキサイティングな情報については、php 中国語 Web サイトの他の関連記事にご注意ください。css3 を使用してアイコン効果を作成する方法
CSS3 を使用して照明を作成し、テキストアニメーションを表示する方法
以上がCSS Web ページの位置がずれている場合の対処方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。