ホームページ  >  記事  >  ウェブフロントエンド  >  CSS Web ページの位置がずれている場合の対処方法

CSS Web ページの位置がずれている場合の対処方法

php中世界最好的语言
php中世界最好的语言オリジナル
2017-11-25 11:30:262980ブラウズ

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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。