，而是使用div+css。 使用这种方法的最大好处就在于在维护页面时，可以只维护css而不去改动html。
可是这种方式对于初学者来说可能不好理解，所以简单描述一下使用div+css排版基础。
下图是一个使用div+css排版的示例：
html和css：
class="back">
class="top">TOP
class="middle">
class="middle_a">MIDDLE-A
class="middle_b">MIDDLE-B
class="middle_c">MIDDLE-C
class="bottom">BOTTOM
次に、上部のオレンジ色のブロックです。黄色のブロックにはさらに 3 つあります。 異なる色の中央のブロックです。
一番下は紫のブロックです。
タイプセットの重要な要素は、主に div のネストと CSS の使用にあります。
div のネストには多くの機能はありません。
TOP、MIDDLE、BOTTOM はすべて背景に配置されているため、背景 div にはそれらがすべて含まれます。
3 つの並列 div TOP、MIDDLE、BOTTOM を順番に書き込むだけです。
div はブロックレベルの要素であるため、自動的に独自の行を占有します。
middle_a、middle_b、middle_c は、CSS で float を使用してフローティング要素にするため、独自の行を持ちません。 配置できない場合は、自動的に親要素に配置されます。次の行へ。
エラー 1: ブロック div と float div の混合使用
同時に、並列 div では、ブロック div と float div の混合使用は避けるべきです。そうしないと、表示の混乱を引き起こしやすくなります。 下の図は、緑色のブロックの float:left 効果をキャンセルした後の効果を示しています。
エラー 2: 幅の合計が 100% になると、配置が間違っています
ここでは背景色を使用してブロックを区別していますが、境界線を使用してブロックを区別すると、この問題が発生する可能性があります。 middle_a、middle_b、middle_c の幅の値がすべてパーセンテージを使用し、その合計がちょうど 100% の場合、中央のブロックは配置できず、3 番目のブロックは自動的に次の行に移動されます。
主な理由は、境界線にも幅があるため、 の中間幅は境界線の幅を超えているため、超えていると考えられます。
声明：この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
