「width: 100%」の CSS 入力が親の境界を越えるのはなぜですか?

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

CSS ボックス モデルとパーセンテージの不一致の狂気

CSS の領域では、 div とその 2 つの入力の子は、割り当てられた範囲から解放されているように見えます。これは何の魔法ですか?

この謎を解き明かしましょう!

原因 – パディングの逸脱した性質

CSS ボックス モデルの原則によれば、要素の幅と高さは内部で適切に機能します。コンテンツボックス。ただし、パディングはこのボックスの外に出ることを好み、要素全体を効果的に拡大します。

パディングのある要素に width: 100% を適用すると、要素に過度の余裕が与えられ、100% の親より幅が広くなります。この場合、入力はそのコンテナよりも幅が広くなります。

レスキューへのボックス サイズ設定

パディングのいたずらな動作を制御するために、ボックス サイズ設定プロパティを導入します。これを border-box に設定すると、パディングが要素の定義された寸法内に確実に制限されるようになります。

高度な継承テクニック

Web デザイン ウィザードの Paul Irish と Chris Coyier は、継承 を提唱しています。以下によって伝播されるアプローチスニペット:

html {
  box-sizing: border-box;
}

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

デモ

実際の修正を確認するために、調整されたコードを次に示します:

input[type=text],
input[type=password] {
  width: 100%;
  height: 30px;
  padding: 5px 10px;
  background-color: rgb(215, 215, 215);
  line-height: 20px;
  font-size: 12px;
  color: rgb(136, 136, 136);
  border-radius: 2px 2px 2px 2px;
  border: 1px solid rgb(114, 114, 114);
  box-shadow: 0 1px 0 rgba(24, 24, 24, 0.1);
  box-sizing: border-box;
}

そして出来上がりです。現在、入力フィールドはその境界を越えることはできません。ボックスモデルの正気は回復しました。

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