Heim > Web-Frontend > CSS-Tutorial > Hauptteil

CSS-Attributmarge

高洛峰
Freigeben: 2017-02-13 14:57:11
Original
2065 Leute haben es durchsucht

0. Auswirkung auf die eigene visuelle Breite

 CSS属性之margin

1> Ändern Sie die visuelle Breite des Blockelements im Standarddokumentfluss, ohne dass ein Breitenwert festgelegt ist

Im Standarddokumentfluss beträgt die eigene Breite für ein Blockelement, für das keine Breite festgelegt ist oder dessen Höhe nicht festgelegt ist, 100 % der Breite des übergeordneten Elements. Legen Sie zu diesem Zeitpunkt fest Horizontaler Randwert für das Blockelement. Ändert die visuelle Breite des Elements. Die Höhe kann jedoch nicht geändert werden, da die Höhe des Blockelements fest oder gleich der Höhe seines Inhalts ist und nicht gedehnt wird.

Diese Funktion ist im Bootstrap-Layout nützlich.

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

* {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;  
}
Nach dem Login kopieren

 CSS属性之margin

2> Breite, sondern die sichtbare Breite und Höhe eines absolut positionierten Elements mit Positionierung (Positionierung paarweise festgelegt, z. B. oben/unten, links/rechts)

Wenn für das absolut positionierte Element keine Breite festgelegt ist, sondern oben Ist der Wert /unten, links/rechts eingestellt, wird das Element gestreckt. Wenn Sie beispielsweise left:0; right:0; festlegen, beträgt die Breite des Elements 100 % der Breite des ersten relativ positionierten übergeordneten Elements. Zu diesem Zeitpunkt können Sie auch die visuelle Breite des Elements ändern Marge. Ebenso können wir für absolut positionierte Elemente auch deren visuelle Höhe ändern.

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

* {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;  
}
Nach dem Login kopieren

 CSS属性之margin

1. Rand mit Prozentwert

ist dasselbe wie Auffüllen. Bei Elementen, die sich normalerweise im Standarddokumentfluss befinden, ist der tatsächliche Wert des Elements gleich der Breite des übergeordneten Elements * Prozentsatz;

Wenn ein Element auf absolute Positionierung eingestellt ist, entspricht sein tatsächlicher Wert der Breite * Prozentsatz des ersten übergeordneten Elements, das relativ dazu positioniert ist

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

* {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;  
}
Nach dem Login kopieren

 CSS属性之margin

2.Randüberlappung

Randüberlappung tritt normalerweise auf zwischen Geschwisterelementen und zwischen übergeordneten und untergeordneten Elementen. Wenn Sie nicht darauf achten, kann es zu geringfügigen Problemen kommen. Hier finden Sie eine Zusammenfassung der Situationen, in denen Randüberlappungen auftreten.

1>Zwischen Geschwisterelementen

Wenn zwei Elemente eine Randüberlappung haben, sind ihre tatsächlichen Werte:

  1. Wenn zwei Randwerte Wenn beide positiv sind, sind die tatsächlicher Wert = der größere der beiden

  2. Wenn die beiden Randwerte einer positiv und einer negativ sind, ist der tatsächliche Wert = die Summe der beiden Werte

  3. Wenn beide Randwerte negativ sind, ist der tatsächliche Wert = der größere Absolutwert der beiden

Wann kommt es zu einer Randüberlappung?

Solange es sich bei zwei benachbarten Geschwisterelementen um Blockelemente im Standarddokumentfluss handelt, kommt es in vertikaler Richtung zu einer Randüberlappung.

2>Zwischen dem übergeordneten Element und dem ersten/letzten untergeordneten Element

  1. Rand oben/unten festlegen

  2. Set padding-top/bottom

  3. Attribute wie overflow:hidden/auto festlegen, um den automatischen Wert von BFC zu implementieren

3.margin

Rand festlegen: 0 auto; für ein Blockelement mit fester Breite, um das Element horizontal zu zentrieren. Dies sollte häufig von vielen Menschen verwendet werden, aber nur wenige Menschen kennen möglicherweise die spezifische Rolle des automatischen Werts.

Einfach ausgedrückt: Wenn Elemente, die keinen festen Breiten- oder Höhenwert haben, automatisch gestreckt werden, kann Auto verwendet werden, um den verbleibenden Platz zuzuweisen, nachdem ein fester Wert festgelegt wurde.

Es fühlt sich etwas schwierig an, es auszusprechen. Es gibt beispielsweise ein Blockelement mit einer festen Breite. Wir möchten, dass es auf der rechten Seite angezeigt wird. aber es kann auch mit margin-left: auto; erreicht werden:

<p class="wrap">
  <p class="red">margin-left: auto;</p></p>
Nach dem Login kopieren

* {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;
}
Nach dem Login kopieren

 CSS属性之margin

Randwert auf automatisch setzen. Zu den gültigen Szenarien gehören:

  1. Gewöhnliche Blockelemente mit fester Breite, gültig, wenn sie in horizontaler Richtung eingestellt werden; >

  2. Absolut positionierte Elemente, wenn links gepaart festgelegt ist. Wenn /rechts, oben/unten oder beide festgelegt sind, ist eine feste Breite oder feste Höhe gültig.
  3. Wenn die Das übergeordnete Element ist display: flex;, der Randwert des untergeordneten Elements ist auto und gültig
  4. Weitere Artikel zum Thema CSS-Attributmarge finden Sie auf der chinesischen PHP-Website!
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!