[Notes-フロントエンド] div+css 組版の基本とエラー records_html/css

现在的网站对于前端的排版已经逐渐不使用

，而是使用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 番目のブロックは自動的に次の行に移動されます。

主な理由は、境界線にも幅があるため、

の中間幅は境界線の幅を超えているため、超えていると考えられます。

[Notes-フロントエンド] div+css 組版の基本とエラー records_html/css_WEB-ITnose