css_html/css_WEB-ITnose の width:auto と width:100% の違いは何ですか

1. width: auto

1. ブロックレベル要素のデフォルトの幅値は、ブラウザが適切な幅値を選択することを意味します。

2. コンテンツの幅 = 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right '

margin-left' + 'border-left-width' + 'padding-left' + 'padding-right' + 'border-right-width' + 'margin-right' が比較的大きい場合は、幅を減らします。値が比較的小さい場合は、上式を満たすように width の値を大きくします。

2. 幅: 100%

幅を 100% に設定すると、その幅は親の幅になり、親の幅が自動的に変更されると、親のパディングとマージンも変更されます。その後、子要素の幅は変更されません。これが auto に設定する場合との違いです。

3. width:auto と width:100% の違いには、 margin-left と margin-right の属性値は含まれません。その親コンテナに、margin-left/margin-right の値が含まれます。マージンが設定されている場合、新しい幅の値はコンテナの幅にマージンの値を加えたものになります。余白を追加すると、対応する側の余白が増えることがわかります。また、幅が画面の範囲を超えているため、余分な水平スクロール バーが表示されます (これは親コンテナに対する相対的な本体です)。

2. width:auto には、margin-left/margin-right の属性値が含まれます。 width:auto は常に行全体を占め、マージン値はすでに含まれています。マージン値を設定する場合は、行全体を使用してからマージン値を減算して現在の幅を取得します。減算した値が該当面のブランクとなります。注目すべき特徴は、水平スクロールバーが表示されない、つまり幅が増加しないことです。

3. 一般に、width: auto は柔軟性が高いためよく使用されますが、width: 100% は、パディングやマージンを追加するときに親ボックスを突破してレイアウトを壊しやすいため、あまり使用されません。

参考: CSSのwidth:autoとwidth:100%の違い http://www.studyofnet.com/news/965.html