ホームページ > 記事 > ウェブフロントエンド > CSS Web ページの位置がずれている場合の対処方法
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 サイトの他の関連記事を参照してください。