css - css 内枠、壊れたレイアウト

Question

画面を多数に分割したdivので、それらは互いにくっつきます (たとえば、チェス盤のようなものですが、可変サイズのフィールドがあります)。パーセントを設定heigthしwidthて使用します（親コンテナに対して）。

今、divに追加border: 1pxすると、すべてのレイアウトが壊れます...境界線が各辺に1px追加されると想像します。解決策は、内部境界線を追加することです。どういうわけかそのような内部境界線を追加できますか?

Answer 1

を使用box-sizing: border-boxして、境界線の幅をwidth要素の一部にすることができます。

.example {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

ブラウザのサポート。

Answer 2

アウトラインプロパティを使用します。境界プロパティとは異なり、要素の高さや幅に「追加」することはありません。ただし、境界プロパティとは異なり、左、右、下、または左の個々のプロパティを持つことはできません。アウトラインスタイル、アウトライン幅、アウトラインカラーのプロパティを持つことができますが。

アウトライン参照

Answer 3

0.5あなたはそれらを編集することによってパーセンテージを減らすことができます49.5%：最初は機能しません、ありがとう@thirty

Answer 4

親 div と多くの子 div があるとします。高さと幅をパーセンテージで設定すると、それらがくっつきます。その後、それらの幅を追加border:1pxすると、以前よりも長くなります。another div after the parent divこれを解決するには、幅のサイズ変更を防ぐ必要があると思います。