「width: 100%」を使用すると入力要素が親をオーバーフローするのはなぜですか?

CSS 入力境界の問題を理解する

Web 開発では、width: 100% が適用されると HTML 入力要素が親の境界を超える状況がよく発生します。 。この問題は、要素のサイズとレイアウトの方法を説明する CSS ボックス モデルが原因で発生します。

ボックス モデル

CSS ボックス モデルは、要素の寸法を 4 つの部分に分けて考慮します。

• コンテンツ ボックス: テキストやテキストなどの要素のコンテンツを含む最も内側の領域。画像。
• パディング: コンテンツ ボックスと要素の境界線の間のスペース。
• 境界線: 要素を囲む線。
• マージン: の外側のスペースborder.

寸法に対するパディングの影響

デフォルトでは、要素の幅と高さのプロパティがコンテンツ ボックスに適用されます。ただし、パディングが存在する場合、コンテンツ ボックスを超えて拡張され、要素全体のサイズが増加します。

パディングのある要素に width: 100% を設定すると、パディングによって要素の幅が 100 を超えます。親の幅の % を超えると、境界を超えてしまいます。

で動作を調整します。 box-sizing

パディングが要素の幅に影響を与えないようにするには、box-sizing プロパティを border-box に設定します。これにより、要素の幅と高さの計算にパディングを含めるようブラウザに指示します。

box-sizing を使用した CSS コードは次のとおりです。

input[type=text],
input[type=password] {
  width: 100%;
  box-sizing: border-box;
}

ベスト プラクティス

一貫したサイズ設定のためのベスト プラクティスは次のとおりです:

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

これにより、ボーダー ボックスが確実に表示されます。サイズ設定はすべての要素に継承され、潜在的な不一致を回避します。

以上が「width: 100%」を使用すると入力要素が親をオーバーフローするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。