suchen

Heim  >  Artikel  >  Web-Frontend  >  Wie lege ich Standardwerte fest, um Inhalte in CSS auszurichten?

Wie lege ich Standardwerte fest, um Inhalte in CSS auszurichten?

WBOY
WBOYnach vorne
2023-08-30 09:09:06788Durchsuche

如何设置默认值来对齐 CSS 中的内容？

CSS ist eine Websprache, die hauptsächlich zum Entwerfen und Rendern von Webseiten verwendet wird. Es stellt uns viele Eigenschaften zur Verfügung, die den Anpassungsprozess unterstützen. Eine dieser Eigenschaften ist die „aligned content property“.

Die Inhaltseigenschaft „Align“ wird verwendet, um Platz zwischen oder um Elemente zuzuweisen, die zu einer Flexbox oder einem Raster gehören. Der Anfangswert dieser Eigenschaft ist „normal“. Es verfügt über eine diskrete Animation und der berechnete Wert ist immer gleich dem angegebenen Wert.

Es ist zu beachten, dass es sich nicht um eine vererbbare Immobilie handelt. Dies ist eine Eigenschaft, die von den meisten Browsern weitgehend unterstützt wird.

Die verschiedenen Werte, die für diese Immobilie angegeben werden können, werden unten beschrieben -

  • Start – Wird verwendet, wenn Sie möchten, dass Inhalte oder Artikel vom Anfang des Containerelements an gepackt werden.

  • Ende – Wird verwendet, wenn Sie möchten, dass Inhalte oder Elemente am Ende des Containerelements umbrochen werden.

  • Center – Wird verwendet, um untergeordnete Elemente in der Mitte eines ausgerichteten Containers zu packen.

  • Normal – Dies ist der Standardwert für die Eigenschaft „Ausgerichteter Inhalt“.

  • Flex-Start – für Flexbox-Behälter und beginnt mit der Ausrichtung von Gegenständen entlang der Startkante. Wenn wir sie jedoch auf einem Container verwenden, der nicht Flexbox ist, wird dies als Anfang betrachtet.

  • Flex-Ende – Genau wie Flex-Start wird dies auch in Flexbox-Behältern verwendet und beginnt mit der Ausrichtung von Gegenständen entlang der Endkante. Wenn wir sie jedoch auf einem Container verwenden, der nicht Flexbox ist, wird dies als Ende betrachtet.

  • Space- Between – Mit dieser Eigenschaft angegebene Elemente werden entlang der horizontalen Achse des Containers ausgerichtet, mit gleichem Abstand entlang benachbarter Elemente.

  • Space-around – Es funktioniert ähnlich wie der Abstand zwischen, aber der Abstand links vom ersten Element und rechts vom letzten Element entspricht der Hälfte des Abstands zwischen den beiden benachbarten Elementen.

  • Space-evenly – Dies bedeutet einfach, dass zwischen allen Elementen der gleiche Abstand vorhanden ist, im Gegensatz zu geradem Abstand, bei dem vom Anfang des ersten Elements bis zum Ende des letzten Elements nur der halbe Abstand vorhanden ist.

  • Stretch – Es ändert automatisch die Größe von Elementen in einem Container, die mit der automatischen Größenanpassung verknüpft sind.

Darüber hinaus haben wir sicher und unsicher als Werte für diese Eigenschaft. Sie werden mit dem Schlüsselwort „alignment“ verwendet und hängen von den Eigenschaften des Containers ab, beispielsweise ob ein Überlauf zu Datenverlust führt. Basierend auf diesen Bedingungen entscheiden wir, ob die Ausrichtung beibehalten werden soll.

Beispiel

Ein Beispiel für ein ausgerichtetes Inhaltsattribut finden Sie unten. 

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         background-color: #92a4b5;
      }
      #mainDiv {
         background-color: black;
         width: 100%;
         height: 300px;
         display: flex;
         flex-wrap: wrap;
         align-content: stretch;
      }
      #mainDiv div {
         width: 100%;
         height: 40px;
      }
   </style>
</head>
<body>
   <h1>The example of align-content Property</h1>
   <div id="mainDiv">
      <div style="background-color: coral"></div>
      <div style="background-color: lightblue"></div>
      <div style="background-color: pink"></div>
   </div>
</body>
</html>

Legen Sie Standardeinstellungen fest, um Inhalte auszurichten

Der Begriff „Standardwert“ kann sich tatsächlich auf den „Anfangswert“ einer Immobilie beziehen. Der Standardwert zum Ausrichten von Elementen ist „Stretch“.

Wir können also sagen, dass „normal“ ein bisschen wie ein spezielles Schlüsselwort mit einer bestimmten Bedeutung ist, die sich jedoch je nach Kontext ändert, in dem es verwendet wird. Denn ohne spezifischen Kontext können wir nicht definieren, was „normal“ tun würde.

Wir können Normal als Standardwert verwenden, ohne uns Sorgen machen zu müssen, da er entweder als ungültig behandelt wird und einen Fallback-Wert verwendet, oder als gültig behandelt und auf den korrekten Wert zurückgesetzt wird.

Beispiel

Unten finden Sie den Beispielcode, um den Standardwert des ausgerichteten Inhalts auf „Normal“ zu setzen –

<!DOCTYPE html>
<html>
<head>
   <style>
      .FlexBox {
         width: 40vw;
         height: 54vh;
         border: 5px solid blue;
         display: flex;
         flex-wrap: wrap;
         background-color: rgb(170, 210, 170);
         align-content: normal;
      }
      #BoxItem1,
      #BoxItem2,
      #BoxItem3,
      #BoxItem4 {
         box-sizing: border-box;
         min-height: 20%;
         width: 22%;
         border: 1.5px dashed red;
         margin: 0.5vw;
         display: flex;
         align-items: center;
         justify-content: center;
      }
      #BoxItem1 {
         background-color: rgb(214, 198, 192);
      }
      #BoxItem2 {
         background-color: rgb(198, 198, 49);
      }
      #BoxItem3 {
         background-color: rgb(233, 115, 135);
      }
      #BoxItem4 {
         background-color: rgb(143, 196, 196);
      }
   </style>
</head>
<body>
   <div class="FlexBox">
      <div id="BoxItem1">1</div>
      <div id="BoxItem2">2</div>
      <div id="BoxItem3">3</div>
      <div id="BoxItem4">4</div>
   </div>
</body>

Wir können sehen, dass alle Elemente im Container standardmäßig „normal“ ausgerichtet sind, was gemäß den Spezifikationen des Flexbox-Containers gedehnt wird.

Fazit

Alles in allem ist die Verwendung von CSS zum Festlegen von Standardeinstellungen für die Positionierung von Inhalten eine einfache und effektive Möglichkeit, ein einheitliches Design auf Ihrer gesamten Website sicherzustellen. Indem Sie einen einzelnen Wert als Standard festlegen, können Sie die Position aller Elemente auf jeder Seite schnell anpassen, ohne jedes Element einzeln ändern zu müssen. Dies macht es Entwicklern und Designern gleichermaßen leicht, ein einheitliches Erscheinungsbild zu erstellen, das zu jedem Thema oder Thema passt. Sie können es später bei Bedarf problemlos anpassen.

Das obige ist der detaillierte Inhalt vonWie lege ich Standardwerte fest, um Inhalte in CSS auszurichten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css 继承 flex
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：CSS-@page-RegelnNächster Artikel：CSS-@page-Regeln

In Verbindung stehende Artikel

Mehr sehen