CSSのauto属性の使い方を詳しく解説

—auto とは何ですか?

+auto は、多くのサイズ値のデフォルト値であり、ブラウザによって自動的に計算されます。

+ ブロックレベル要素 のマージン、ボーダー、パディング、コンテンツ幅の合計が、親要素の 幅を構成します。

auto 属性を使用した後、親要素の幅が変更されると、それに応じて要素の幅も変更されます。

下の図では、autoの値はマージン、ボーダー、パディング、コンテンツの幅の合計です

+

しかし、要素がfloatに設定されている場合、要素の幅は幅になりますコンテンツ の、いわゆる カプセル化 であるコンテンツによってサポートされています。

overflow |position:absolute | float:left/right は折り返しを生成でき、置換要素にも折り返しがあります。

*|position:relavtive|相対位置指定は元の位置を占有し、モード変換を達成できません。つまり、ラッピング プロパティがありません。

したがって、要素の幅をブラウザの幅に適応させるために、ラップされた要素に width: auto; を使用することはできません。下の図に示すように

— margin:0 auto の設定が機能しないことがありますか?

+maigin: 0 auto; は、要素の上下のマージンが 0 で、左右のマージンが親要素 (ボディ) の幅に応じて適応される、つまり、左右が水平になることを意味します。中心にあります。この設定が機能しない場合は、基本的に 2 つの理由が考えられます。

+ (1) p に幅が設定されていない場合、p に幅がある場合、親要素の幅を参照して独自の auto を実行することはできません。

+ (2) p はラップされています。つまり、標準フローから外れています。親オブジェクトが配置されている標準フローを地球の表面に見立てたように、ラップ要素はすでに地球の表面まで上がっています。空。自動を実行するための参照用の親要素の幅はありません。

以上がCSSのauto属性の使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。