「width: 100%」の CSS 入力が親の境界を超えて拡張されるのはなぜですか?

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

なぜこれが起こるのですか?

CSS では、幅と高さのプロパティにより、 コンテンツボックスのサイズ。ただし、パディングはコンテンツ ボックスの外側に追加され、要素全体のサイズが大きくなります。

パディングのある要素を width: 100% に設定すると、そのパディングにより、その要素を含む要素の 100% よりも幅が広くなります。

解決策

パディングが要素の幅や高さに影響を与えないようにするには、box-sizing プロパティを次のように設定して使用します。 border-box:

これにより、幅と高さのプロパティにパディングとボーダーが含まれ、合計幅が 100% になります。

ブラウザの互換性

ボックス-sizing はブラウザーとの互換性が良好です (IE8 )。プレフィックスは必要ありません。

代替アプローチ: 「継承」ボックス サイズ設定

一部の専門家は、次の「継承」アプローチを使用することを推奨しています。

これはボックス サイズ設定を設定します。ドキュメント全体のボーダーボックスを作成し、すべての要素がそれを継承できるようにします。 settings.

デモ

入力要素にボーダーボックスを適用したデモを次に示します:

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