CSS Web ページの位置がずれている場合の対処方法-CSSチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2017-11-25 11:30:26

オリジナル

3045 人が閲覧しました

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