0. 独自の視覚的な幅への影響

CSS属性之margin

1>幅の値が設定されていない標準ドキュメントフローのブロック要素の視覚的な幅を変更します

幅が設定されていないブロック要素の標準ドキュメントフロー, コンテンツがある場合、または高さを設定している場合、自身の幅は親要素の幅の 100% になります。このとき、ブロック要素に水平マージンの値を設定すると、要素の視覚的な幅が変更されます。ただし、ブロック要素の高さは固定またはそのコンテンツの高さと同じであり、伸縮しないため、高さは変更できません。

この機能はブートストラップレイアウトで役立ちます。

<p class="wrap">
  父元素padding: 0 10px;  <p class="yellow">此block元素没有设置margin值</p>
  <p class="red">此block元素设置margin-left:-10px;margin-right:-10px; 拉伸了元素宽度</p></p>

ログイン後にコピー

* {margin:0; padding:0;}.wrap {
  width: 400px;
  height: 400px;
  margin: 50px auto;
  padding: 0 10px;
  border: 1px solid #ccc;
}.red {
  height: 100px;
  background-color: red;
  margin: 0 -10px;
}.yellow {
  height: 100px;
  background-color: yellow;  
}

ログイン後にコピー

CSS属性之margin

2> 幅は設定されていないが、位置が設定されている絶対配置要素の表示/非表示を変更します (位置は上下、左/右などのペアで設定されます)。幅と高さ

絶対的に配置された要素が幅を設定せず、上/下、左/右の値を設定すると、要素は引き伸ばされます。たとえば、 left:0; right:0; と設定すると、要素の幅は、相対的に配置された最初の親要素の幅の 100% になります。このとき、要素の視覚的な幅も変更できます。マージン。同様に、絶対的に配置された要素の場合、視覚的な高さを変更することもできます。

<p class="wrap">
  父元素position: relative;  <p class="yellow">绝对定位,并且设置top:0; bottom:0; 垂直拉伸元素，通过设置margin来改变可视高度</p></p>

ログイン後にコピー

* {margin:0; padding:0;}.wrap {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 50px auto;
  border: 1px solid #ccc;
}.yellow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  margin: 50px 0;
  background-color: yellow;  
}

ログイン後にコピー

CSS属性之margin

1 要素のマージン値が通常のドキュメントフローにある要素の場合、パーセンテージ値のマージンはパディングと同じです。パーセンテージ値。その実際の値は、親要素の幅 * パーセンテージに等しくなります

要素が絶対配置に設定されている場合、その実際の値は、その要素に対して相対的に配置された最初の親要素の幅 * パーセンテージに等しくなります

<p class="wrap">
  父元素宽度400px;  <p class="yellow">margin-top:10%; 实际的margin-top=400px*10%=40px</p></p>

ログイン後にコピー

* {margin:0; padding:0;}.wrap {
  width: 400px;
  height: 400px;
  margin: 50px auto;
  border: 1px solid #ccc;
}.yellow {
  width: 200px;
  height: 200px;
  margin-top: 10%;
  background-color: yellow;  
}

ログイン後にコピー

CSS属性之margin 2. マージンの重なり

マージンの重なりは通常、兄弟要素間や親要素と子要素間で発生します。いくつかの小さなトラブルが発生しました。マージンが重なっています。状況を要約しましょう。

1>兄弟要素間

2つの要素間でマージンの重なりが発生する場合、実際の値は次のようになります:

隣接する2つの兄弟要素は、標準ドキュメントフローのブロック要素である限り、縦方向に余白の重なりが発生します。

2>親要素と最初/最後の子要素の間

要素を水平方向に中央揃えにするために margin: 0 auto を設定します。これは auto の特定の役割にのみ使用されます。価値を知っている人はほとんどいないかもしれません。

簡単に言うと、固定の幅や高さの値が設定されていない要素については、自動的に伸縮できる場合は、固定値を設定した後、auto を使用して残りのスペースを割り当てることができます。

例えば、固定幅のブロック要素を右側に表示したい場合は、float 属性を使用する方法が一般的ですが、これも実現できます。 with margin-left: auto;:

<p class="wrap">
  <p class="red">margin-left: auto;</p></p>

ログイン後にコピー

* {margin:0; padding:0;}.wrap {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 50px auto;
  border: 1px solid #ccc;
}.red {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-left: auto;
}

ログイン後にコピー

CSS属性之margin マージン値を自動に設定するための有効なシナリオには以下が含まれます: