「width: 100%」の CSS 入力が親の境界を超えないようにするにはどうすればよいですか?

幅 100% の CSS 入力が親の境界を超えます

CSS では、要素の幅と高さが、パディングを含むコンテンツ領域に適用されます。ただし、パディングのある要素を幅 100% に設定すると、親のサイズを超える可能性があります。

CSS 基本ボックス モデルについて

CSS 基本ボックス モデルは、要素のサイズとレイアウトを定義します。計算されます。コンテンツ、パディング、ボーダー、マージンで構成されます。

幅: 100% が適用されると、コンテンツ領域の幅に影響します。ただし、要素にパディングがある場合は、コンテンツ領域を超えて拡張され、全体のサイズが実質的に増加します。

パディング バリアの解除

パディングが要素の幅と高さに影響を与えないようにするには、ボックスを設定します。 -sizing CSS プロパティを border-box:

box-sizing: border-box;

これは、ブラウザーに、

ブラウザの互換性

ボックスのサイズ設定はすべての主要なブラウザでサポートされていますが、古いバージョンの Internet Explorer (以前のバージョン) ではプレフィックスを使用することを検討してください。バージョン 8 に)。

コンテキストでボックス サイズを使用する

解決するには提供された JSFiddle の問題に、box-sizing: border-box; を追加します。次のルールに従う:

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

推奨される「継承」使用法

Paul Irish と Chris Coyier は、ページ全体の一貫性を確保するために HTML 要素からボックス サイズを継承することを推奨しています:

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

以上が「width: 100%」の CSS 入力が親の境界を超えないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。