width:100% と width:auto の違い

今回は、width:100%; と width:auto の違いについて説明します。ここでは、width:100%; と width:auto を使用する際の注意事項について説明します。

<p>
    <p>1111</p>
</p>
p{
　　width:980px;<br>　　background-color: #ccc;<br>　　height：300px;
}
p{
     width:100%;<br>　　/*width:auto;*/
    padding:10px;<br>　　background-color:#000;<br>
}

p の幅が 100% の場合、p の幅は 980px となり、すでに p 領域を埋めており、パディングがあるため p を超えます。

そして width:auto の場合、それは親の幅 (幅、親のマージン、パディング、ボーダーを除く幅) と等しい全体の幅 (幅、

マージン

、パディング、ボーダーを含む) となるため、パディングが占有している場合、左右に 10px のスペースがある場合、width で指定される値は 960px です。 ただし、width:100% であろうと auto であろうと、計算の基準となるのは、合計幅の値ではなく、親コンテンツ領域の幅の値です。

この記事の事例を読んだ後は、この方法を習得したと思います。 php 中国語 Web サイトのその他の関連記事に注意してください。

推奨読書:

ウォーターフォールフローレイアウトと無限ロードピクチャーアルバムエフェクト

3Dボタンエフェクトを実現するCSS

透明を使用して三角形を作成

以上がwidth:100% と width:auto の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。