p 要素はデフォルトでブロック レベルの要素 (display:block) になります。同じレベルの各 p が独自の行を占有します。これは、2 つの内側の p 要素の合計の高さが外側の親を超えているためです。要素 p の高さなので、外側の親の場合はオーバーフローします。要素の高さが自立型の height:auto に設定されている場合、またはオーバーフロー非表示 (overflow:hidden) またはスクロール効果 (overflow-y:auto) を設定している場合、2 つの p が不足しても影響はありません。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
リーリー リーリー
overflow 属性は、コンテンツが要素のボックスからオーバーフローした場合に何が起こるかを指定します。
デフォルトのオーバーフロー操作: 表示されます。 (コンテンツはトリミングされず、要素ボックスの外側にレンダリングされます。)
可能な値とオプション:
visible デフォルト値。コンテンツはトリミングされず、要素ボックスの外側にレンダリングされます。
非表示のコンテンツはトリミングされ、残りのコンテンツは非表示になります。
スクロール コンテンツはトリミングされますが、ブラウザーには残りのコンテンツを表示するためのスクロール バーが表示されます。
auto コンテンツがトリミングされると、ブラウザーには残りのコンテンツを表示するためのスクロール バーが表示されます。
inherit は、オーバーフロー属性の値を親要素から継承することを指定します。
p はブロックレベルの要素であり、デフォルトでは水平に配置されません。この場合、2 つの ps は縦に並んでいます。私の理解では、DOM 内の現在のページ構造は正しく、視覚的な問題は CSS 設定のみが原因であり、DOM 自体とは関係ありません。しかし、投稿者の質問は設計に関する非常に良いバグの問題です。つまり、現在のコードに他の要素が追加されると、説明できないギャップが発生します。したがって、Web サイトをデザインするときは、DOM 構造と CSS を介したレイアウト方法も考慮する必要があります。
これがお役に立てば幸いです。
p 要素はデフォルトでブロック レベルの要素 (display:block) になります。同じレベルの各 p が独自の行を占有します。これは、2 つの内側の p 要素の合計の高さが外側の親を超えているためです。要素 p の高さなので、外側の親の場合はオーバーフローします。要素の高さが自立型の height:auto に設定されている場合、またはオーバーフロー非表示 (overflow:hidden) またはスクロール効果 (overflow-y:auto) を設定している場合、2 つの p が不足しても影響はありません。
これは、オーバーフロー値を設定していないためです。デフォルトでは、親 p コンテンツ内の要素のオーバーフロー値が表示されるため、オーバーフローした部分が親 p の高さを超えて表示されます。これは
で設定できます。または
は、親の幅と高さを超えたり、高さを
に設定したりすることによって、子要素がオーバーフローするのを防ぎます。また。
まず、p はブロックレベルの要素です。つまり、デフォルトの p は 1 行を占めます。幅を設定しても、1 行を埋めることはできません。
親 p の高さは 300、最初の子 p の高さは 200 なので、親 p に収まって左上隅に配置できます。問題ありません。
p は 1 行を占めるため、2 番目の子 p は最初の子 p の下に配置する必要があります。高さはまだ 200 であり、親 p の高さを超えるため、オーバーフローして表示されます。
p はデフォルトで 1 行を占めます。display:inline-block; を inline 要素に設定してはいかがでしょうか