Umfassende Liste von CSS-Layout-Eigenschaften: Anzeige, Position und Float

CSS-Layoutattribute: Anzeige, Position und Float

CSS ist eine Auszeichnungssprache, die zur Steuerung des Stils von Webseiten verwendet wird. Layouteigenschaften sind beim Entwerfen des Webseitenlayouts sehr wichtig. CSS bietet eine Vielzahl von Layouteigenschaften, die am häufigsten verwendeten sind Anzeige, Position und Float. In diesem Artikel stellen wir diese drei Layouteigenschaften im Detail vor und stellen spezifische Codebeispiele bereit.

1. Anzeigeattribut
   Das Anzeigeattribut wird verwendet, um den Anzeigetyp des Elements anzugeben. Übliche Anzeigeattributwerte sind wie folgt:

1.1. Das Blockelement belegt eine exklusive Zeile, beginnt immer mit der Anzeige in einer neuen Zeile und füllt die Breite des übergeordneten Elements aus. Beispielsweise ist das dc6dce4a544fdca2df29d5ac0ea9906b-Element ein typisches Blockelement.

div {
  display: block;
}

1.2. Inline-Elemente belegen keine Zeile für sich, sondern nur den Platz, den sie benötigen. Beispielsweise ist das 45a2772a6b6107b401db3c9b82c049c2-Element ein typisches Inline-Element.

span {
  display: inline;
}

1.3. Inline-Block-Elemente belegen keine Zeile, aber die Breite und Höhe können festgelegt werden. Beispielsweise ist das a1f02c36ba31691bcfe87b2722de723b-Element ein typisches Inline-Block-Element.

img {
  display: inline-block;
}

1.4. keine
keine Elemente werden nicht angezeigt und aus dem Dokumentenfluss entfernt. Sie können beispielsweise ein Element ausblenden, indem Sie display: none festlegen.

.hidden {
  display: none;
}

Positionsattribut

Das Positionsattribut wird verwendet, um anzugeben, wie ein Element positioniert wird. Übliche Positionsattributwerte lauten wie folgt:

2. 
   2.1 statisch
statisch ist die Standardpositionierungsmethode und Elemente werden in der Reihenfolge des Dokumentflusses angeordnet.

div {
  position: static;
}

2.2. relative
relative Position relativ zur eigenen Ausgangsposition. Die Position eines Elements kann mithilfe der Eigenschaften oben, unten, links und rechts angepasst werden.

div {
  position: relative;
  top: 10px;
  left: 20px;
}

2.3. absolute
absolute Position relativ zum übergeordneten Element oder Position relativ zum nächsten Vorgängerelement mit Positionierungsattributen (Position ist nicht statisch).

div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2.4. behoben
behoben ist relativ zum Browserfenster positioniert und ändert seine Position nicht, wenn die Bildlaufleiste scrollt.

div {
  position: fixed;
  top: 0;
  right: 0;
}

float-Attribut

float-Attribut wird verwendet, um anzugeben, wie ein Element schwimmt. Wenn ein Element auf „Float“ eingestellt ist, wird es aus dem normalen Dokumentfluss entfernt und so weit wie möglich nach links oder rechts verschoben. Andere Elemente werden um das schwebende Element herum angeordnet.

3. img {
     float: left;
   }

   
   Das Obige ist die Einführung und die Codebeispiele der drei gängigen Layouteigenschaften Anzeige, Position und Float. In der Praxis können wir basierend auf den spezifischen Anforderungen auswählen, welches Layoutattribut verwendet werden soll, um ein Webseiten-Layoutdesign zu erreichen. Ich hoffe, dass dieser Artikel den Lesern beim CSS-Layout helfen kann.

Das obige ist der detaillierte Inhalt vonUmfassende Liste von CSS-Layout-Eigenschaften: Anzeige, Position und Float. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!