2

単純な質問で簡単に答えられるかもしれません。

今日、子が親とまったく同じ幅になる場合、px または 100% での子の幅の違いは何だろうと思いました。結果は私が知っているものと同じですが、何を使用するのが最適ですか?

例;

div {width: 300px;}
h1 {width: 300px;} /*or..*/
h1 {width: 100%;}

<div>
<h1>Width of child</h1>
</div>

それは問題ですか？そして、あなたはどれを使いますか？

4

4 に答える 4

6

視覚的には、どちらの例も同じに見えます。

ただし、子要素に width: 100% を使用すると、両方の幅を変更したい場合は、親要素の幅のみを変更する必要があります。

また、ah* タグはブロックレベルの要素であるため、デフォルトではすでに 100% の幅に設定されているため、例では h1 の幅を設定することは冗長です。

于 2011-04-04T20:54:36.480 に答える
1

100% を使用すると、親の幅が変化するため、時間の経過とともに変更が 1 つ少なくなります。したがって、100% を使用すると、CSS がより保守しやすくなります。

于 2011-04-04T20:55:23.607 に答える
1

両方に代わるはるかに優れた方法があります。

 {width:auto;}

...子要素で。

あなたの例では、{width:100%} または {width:300px} のいずれかで、パディングまたはボーダーを子 (h1) に適用することにした場合、コンテナーの外にオーバーフローします。ピクセル幅を使用する場合は、子の幅から (パディング左 + パディング右 + ボーダー左 + ボーダー右) の合計を減算して、ぴったりと収まるようにする必要があります。パーセンテージ幅の場合、正確なパーセンテージを計算するには、かなり計算を行う必要があります (おそらく、まだ少しずれています)。

ただし、 {width:auto} はパディングとボーダーを自動的に考慮し、計算された幅はコンテナーよりも適切な量だけ少なくなるため、H1 のボーダーの外縁は div のコンテンツ領域内に留まります。

于 2011-04-04T21:14:37.203 に答える
0

別の例: 固定サイズの背景画像を実際に適用する要素に違いが生じる可能性があります。その場合は px を使用して、レイアウトの変更によって画像が壊れないようにします。Babak がすでに言ったように、それは後の変更にのみ関連します。

于 2011-04-04T20:59:55.047 に答える