css_html/css_WEB-ITnose における auto の役割について

CSS には値を auto に設定できる属性がたくさんあります。Auto は自動を意味しますが、この自動値とは正確には何ですか?たとえば、margin:auto はどのようにしてセンタリングを実現するのでしょうか?ここでの自動の値は正確には何ですか?

ディスカッションへの返信 (解決策)

こんにちは:
センタリングを実装するコードは次のとおりです: #main{margin: 0 auto;}

原則はボックス モデルの順序です。完全に記述すると、 #main{margin : 0 auto 0 auto;}
これは、ボックスの上下のマージンが 0、左右のマージンが auto であることを意味します。このようにして、ボックスは簡単に中央に配置されます。

ブラウザのレンダリングに基づいて値を自動的に割り当てます。ブラウザの組み込み値が代入されるか、継承された値が代入されることを意味します

auto は「ここ」では意味がありません

実際の使用環境でのみ議論できます

とにかく、そこここで auto を使用すると、各テスト後にその意味がわかります

とにかく、大胆に試してみてください

CSS レンダリングの計算。

こんにちは:
センタリングを実装するコードは次のとおりです: #main{margin: 0 auto;}

原則はボックスモデルの順序です。完全に記述すると、 #main{margin: 0 auto 0 auto になります。 ;}
意味 はい: ボックスの上下の余白は 0 で、左右の余白は自動的に設定されます。このようにして、ボックスは簡単に中央に配置されます。


左右に曲がるとオートが自動的に中央に来るのはなぜですか?ブラウザは自動をどのように処理しますか?

margin:0 10px 0 auto;

margin:0 auto 0 10px;

ブラウザウィンドウのサイズを変更するときに、次の 3 つの表示を試してみるとわかります。上、右、下、左

ここでの各位置には対応する値があります: 1px 1px 1px 1px これは、上、右、下、左の周囲の値がすべて 1 ピクセルであることを意味します。 。

は margin:1px 1px と省略することもできます。この書き方は、最初の 1px が上下を表し、2 番目の 1px が左右を表すことを意味します。これは、周囲の値を表すことができます。

ここで質問に戻ります。これは明らかに代表的なもので、上部と下部のパディング値は 0 です。右側は自動、左側も自動なので、このオブジェクトはちょうど真ん中にあります。


あなた あなた