CSS でのマージンの使用方法についての深い理解-CSSチュートリアル-php.cn

1.cssmarginはコンテナのサイズを変更できます
要素サイズ
可視サイズ -- 標準のボックスモデルにおけるボックスの幅にはマージン値は含まれません、 clientWidth
占有サイズ --マージンの幅を含む outWidth は標準にはない、jqueryに対応するメソッドがある

マージンとビジュアルサイズ
1.1 width/height
を設定せずに通常のブロック水平要素を使用する 2.2 水平サイズのみに適用
background-color:#1a2b3c">

int /< >

マージン値を変更するとボックスの幅も変わります。

アプリケーション:片側固定幅のアダプティブレイアウトの実装

">
Pictureleftfloating

マージンと占有サイズ 1.ブロック/インラインブロックの水平要素が適用可能です2.幅/高さの値が設定されていないこととは関係ありません 3. 水平方向、垂直方向にも適用可能ですコンテナ内のMe Me 占有サイズが小さくなりました。

内箱は外箱を開いて表示しますもちろん、Chrome 以外のブラウザでは空白効果はありません (上部には空白はありませんが、下部には空白はありません)。
正しいアプローチは
＆lt; p style = "height：100px;"＆gt;通常の要素のマージンの割合は、コンテナの幅を基準にして計算されます。つまり、margin: 10%;---->
top
:60px、left:60px; はすべてコンテナの幅を基準にして計算されます。

絶対配置要素のマージンの割合
img{margin:10%;position:absolute;}
絶対要素のマージンの割合は、最初に配置された要素の祖先要素を基準にしています(相対/絶対/固定)幅は計算されます。通常の要素は、親要素を基準にして計算されます。 % ;position:absolute;" />

ive;
overflow
:hidden; }
.box > p{margin:50%}
.box&g t;p{マージン:50 ％}
私の中で私のin in in on in in in in in in nign overlapping。余白の重なりを防ぐためにオーバーフローを設定します

第3章余白の重なりの共通特性1. 水平要素をブロックする(float要素と絶対要素を除く)2.
writing-mode
を考慮しない(テキストの書き込み方向は上から下へ) Bottom )、垂直方向にのみ発生します (

margin-top

/
margin-bottom
)margin が重なる状況は 3 つあります1. 隣接する兄弟要素p{line-height: 2em; margin: 1em 0;background:#f0f3f9;}

最初/最後の子要素

.father{background:#f0f3f9}

son< /p>

最初または最後の子要素にマージンを設定することは、親要素に同じマージン値を設定することと同じです。要素は同じマージンを持ち、子要素は親要素と同じマージン値を持ちます
3. 空のブロック要素
.father{background:#f0f3f9}

高さは2emではなく、たった1emです
1.要素には境界線の設定がありません

マージントップオーバーラップ
1.1 親要素の非ブロック書式設定コンテキスト要素
1.2 親要素border-top設定なし
1.3
padding-top
value
なしの親要素 1.4 親要素と最初の子要素の間にインライン要素がない分離

margin-bottomの重なり
1.1 親要素のノンブロック整形コンテキスト要素
1.2 border-bottom設定のない親要素
1.3padding-bottomvalue
のない親要素 1.4 親要素と最後の子要素間にインライン要素はない分離
1.5親要素には高さ、min-height、max-heightlimit
：#f0f3

son

< /p>
ボーダートップ設定なし
.father:border:4px Solid #ccc;
３．要素にはpadding-top値がありません
4. インラインはありません親要素と最初の子要素の間の要素の分離

& lt;/p & gt; margin - 上と同じ

息子

p class="父親">

p class="a">

:-20px;}

.father{margin-top:-20px;} gin -top:-20px;margin-bottom:50px}

上記結果は全て30px

3.最もマイナスの値
.a{margin-bottom :-50px;}
.b{margin-top:-20px;}

.father{margin-top:-20px;}

.son{margin -top:-50px;}

.a{margin-top:- 20px;margin-bottom:-50px}

上記の結果は全て-50pxです

マージンの重なりの意味は何でしょうか？

1. 連続した段落やリストなど、余白の重なりがない場合、他の兄弟タグとの最初と最後の項目の間隔が1:2になり、レイアウトが不自然になります
2. ネスティングや直接配置ウェブ上のどこにある裸の p は、元のレイアウトには影響しません
3. 欠けている空の man は p 要素であり、元の読み取りレイアウトには影響しません

練習：
余白の重なりを上手に活用しよう
.list{margin-top:15px;}
.list{
margin-top:15px;
margin-bottom:15px;
}
より堅牢な、除去または最後の要素の位置を入れ替えても、元のレイアウトは破壊されません。
第4話：CSSでmargin:autoを理解する
margin:autoの仕組み
widthやheightが設定されていない場合でも、要素が自動的に埋められてしまう場合があります
p{background:#f0f3f9}

widthやheightが設定されている場合は、自動入力機能はオーバーライドされます

p{width:500px;background:#f0f3f9;}

埋めるべき元のサイズを幅/高さで強制的に変更し、その変更後のサイズを埋めるようにmargin:autoを設定します

p{width:500px;marign-

right
:100px;margin-left:auto; }ｄｅｄｅｎｄｕｍ』 | 自動は、横の残りのスペースのサイズで、幅がなくてもコンテナ全体を占有することはありません。

set img{

display

:block;width:200px;marign:0 auto;}

このとき画像はブロック横なので横幅が無くてもコンテナ全体を占領してしまい一つには表示できませんライン。

高さ固定の要素のmargin:auto 0を越えると、縦方向に中央揃えできません
|.father{height:200px;background:#f0f3f9;}

|.son{height:100px; width:500px; ;margin:auto; }

水平方向は中央揃え、垂直方向は中央揃えにしません。

説明: .son が height:100px を設定しない場合、高さは自動的に 200px になりますか? ——NO そのため、余白は自動で埋められません。幅と高さは強制的に設定されるため、自動的に埋められません。

注: 子が親より横方向に大きい場合、負の値であっても計算結果は中央に配置されません。垂直方向のマージンを実装します

を垂直方向に変更し、Margin: Auto

Writing-Mode と垂直方向の中央 (CSS3)

.father {Height: 200px; VERTICAL -lr;}
.son{height:100px;width:500px;margin:auto;}

Absoluteとmarginが中央揃えになります

.father{height:200px;position:relative;}
.son{position:absolute; top:0px right:0pxbottom :0px;left:0px}
.son には幅/高さがなく、絶対要素が自動的にコンテナを埋めます。

.father{height:200px;position:relative;}
.son{position:absolute; top:0px right:0pxbottom:0px;left:0px;height:100px;}
となった。今すぐ伸びて満たされてください。拡張スペースはマージンを設定します: 平均分布は水平垂直になります
.son {positive: AbSolute; Right: 0px;left:0px;width: 500ピクセル;高さ:100ピクセル;マージン:自動;}

IE8+以降をサポート!
第5章: 負の値での CSS マージンの配置
1. 負のマージンで両端を揃える (マージンによって要素サイズが変わります)
例
.box{
.width:1200px; margin:auto;background:orange;
. ul{ overflow:hidden;}
.li{
width:380px;height:300px;
margin-right:20px;
background:green;
float:left;
}
}
隙間があります。実装されたリストの終わり。
そして、負のマージン値を使用してコンテナのサイズを変更し、コンテナの幅を広げます。この問題は完璧に解決できます
.box{
width:1200px; margin:auto;background:orange;
.ul{overflow:hidden;margin-right:-20px;}
.li{
width:386.66px;height: 300px;
margin-right:20px;
background:green;
float:left;
}
}
2. 負のマージン値を持つ等高線レイアウト、マージンは要素が占めるスペースを変更します
マージンと上下のマージン
< p style ="height:200px;">

.child-orange,
.child-green{margin-bottom:-600px ;padding-bottom:600px;}
.child-orange{float:left;background:orange;}
.child-green{float:left; background:green;}

margin-bottomに大きな負の値を設定することで欠けているスペースを埋めるための大きなパディングボトムにより、同じ高さのレイアウトが実現されます。原則:

が設定されていない限り、コンテンツブロック要素はパディングで表示できます。 margin

画像が右にフロート

< img width="150px;" style="float:left;margin-left:-150px;"/> .img 要素ではない非置換要素 2. 通常の書き込みモード

例

marign:0px
spanにmargin233pxを設定します;
有効な水平方向、垂直方向方向は無効です。重 2.マージンの重なり
3.表示:表-セル

表示:表-セル/表示:タブイートなどの宣言は無効です！元優れた置換要素 IMG, Button

4. Position と Margin
Margin 値の非位置決め方向の絶対位置決め要素「無効」
絶対位置決めされた Margin 値は、通常の要素としてだけでなく、常に有効です。
5. 到達範囲外マージンは失敗します
bfc コンテンツブロックの前に浮動要素がある場合、次の要素のマージンは外側の p を基準にして計算されます。
6. インライン展開によるマージンエラー
が失敗した場合。
説明: インライン要素はベースラインに揃える必要があります。画像の後に x を追加すると、マージン上部がどれだけ離れていてもコンテナの外側から出ないことがわかります。

第7章 margin-startとmargin-end
margin-start
img{
margin-left：100px;
-webkit-margin-start:100px;
-moz-margin-start:100px;
margin-sart :100px;
}
1. 通常のフロー方向では、margin-sart は margin-left と等しく、この 2 つは重なっていて合計されません;
2. 水平方向のフローが右から左の場合、margin-start は次のようになります。に等しい margin-right;direction:ltr(rtl)
3. 垂直フロー (writing-mode:vertical-lr) では、margin-sart は margin-top と同等
webkit の下のその他の margin 関連属性
img{ -webkit- margin-before:100px;} デフォルトのフロー方向の場合、 margin-topmargin-afterimg{-webkit-marign-after:100px;} デフォルトのフロー方向の場合、 margin-bottom;と同等です
margin-collapse 外側の境界線の重なり
-webkit-margin-collapse:collapse|discard| Separate
制御マージンオーバーラップ
デフォルトの重なりを折り畳む
うが