CSS Box-Modell und Außenabstände

Einführung

In der hektischen digitalen Landschaft von "Pet's House", einer Website, die sich auf die Bereitstellung von erstklassigen Tierpflegeleistungen spezialisiert hat, hat unser Protagonist, Jordan, ein talentierter Webdesigner, die Aufgabe, die Website-Layout und -Design zu verbessern. Die Szene spielt sich in einem gemütlichen Büro ab, das auf die Stadtkulisse blickt, wo Jordan entschlossen ist, die Benutzererfahrung durch sorgfältige Anwendung der CSS-Boxmodell- und -Randprinzipien zu optimieren.

In diesem Lab verwenden wir Eigenschaften wie das CSS-Boxmodell und -Ränder, um das Layout zu verfeinern.

Das Box-Modell verstehen

Denken Sie darüber nach, wie wir die Elemente an der Stelle erscheinen lassen, wo wir sie erscheinen lassen möchten.

In diesem Schritt werden Sie in das CSS-Boxmodell eintauchen, ein grundlegendes Konzept, das die Gestaltung von Webseiten regelt. Jedes Element auf einer Seite wird als Box betrachtet, die aus Rändern, Grenzen, Innenabstand und dem tatsächlichen Inhalt besteht. Dieses Modell ermöglicht es Entwicklern, die Abstände und Größen von Elementen genau zu steuern.

Indem Sie F12 drücken, um die Entwicklertools zu öffnen, wie in der folgenden Abbildung dargestellt, wenn Sie ein <li>-Element auswählen, können wir das Boxmodell des Elements im Abschnitt Computed sehen.

Als nächstes stellen wir drei wichtige Eigenschaften des Boxmodells vor:

• border
• padding
• margin

Kante

Die Kurzschreibweise der CSS-Eigenschaft border setzt die Grenze eines Elements. Sie setzt die Werte von border-width, border-style und border-color.

Das Verwendungformat ist wie folgt:

border: width style color;

Zum Beispiel können Sie der folgenden CSS verwenden, um einer <p>-Element eine Grenze hinzuzufügen:

Auf der Tierseite können Sie, wenn die Buttons innerhalb des Formulars eine Grenze haben, den folgenden Inhalt zur style.css-Datei hinzufügen, um sie zu gestalten:

form.btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
  font-weight: 700;
  letter-spacing: 2px;
  border: 2px solid #eaeaea;
}

Zusätzlich können wir mit der border-radius-Eigenschaft einen abgerundeten Eckeneffekt auf den Buttons erzielen. Hier ist, wie Sie es hinzufügen können:

form.txt-box {
  width: 100%;
  border-radius: 2px;
  border: 2px transparent;
  color: #3d3939;
}
form.btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
  font-weight: 700;
  letter-spacing: 2px;
  border: 2px solid #eaeaea;
  border-radius: 4px;
}

Im Abschnitt "Über uns" können Sie, um einen kreisförmigen Bildeffekt zu erzielen, tatsächlich die border-radius-Eigenschaft verwenden. Hier ist, wie Sie es anwenden können:

.circle {
  width: 950px;
  height: 650px;
}
.circle img {
  border-radius: 100%;
  width: 70%;
  height: 100%;
}

Innenabstand

Die Kurzschreibweise der CSS-Eigenschaft padding setzt den Innenabstand auf allen vier Seiten eines Elements gleichzeitig.

Das Verwendungformat ist wie folgt:

padding: top right bottom left;

padding-top: top padding value;
padding-left: left padding value;
padding-right: right padding value;
padding-bottom: bottom padding value;

Zum Beispiel können Sie der folgenden CSS verwenden, um einem <p>-Element einen Innenabstand hinzuzufügen:

Fügen Sie Folgendes zur style.css-Datei hinzu:

h1 {
  padding-bottom: 30px;
  padding-left: 0.5em;
  text-align: center;
  font-size: 4em;
}
h2 {
  font-size: 2.8vw;
  padding-bottom: 15px;
  text-transform: uppercase;
}
header {
  background-color: rgb(233, 174, 87);
  width: 100%;
  max-height: max-content;
  min-height: 1em;
  padding-top: 1%;
  padding-bottom: 1%;
  text-transform: uppercase;
}
.navigation li a {
  text-decoration: none;
  color: black;
  padding: 10px;
}
.container {
  padding: 0px;
  padding-top: 1em;
  width: 100%;
}
section {
  width: 100%;
  padding: 10% 0;
}
.cover-sect {
  padding: 5% 0;
}
.title-text {
  width: 40%;
  text-align: center;
  color: black;
  padding: 0 20px;
}
.service figcaption {
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
}
.contact-section p {
  padding-right: 2em;
  padding-left: 3em;
}

.form-box {
  padding-top: 1em;
}

form.form-content {
  padding: 0.8em 0;
}

form.txt-box {
  width: 100%;
  padding: 0.7em 0;
  border-radius: 2px;
  border: 2px transparent;
  color: #3d3939;
}
form.btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
  font-weight: 700;
  letter-spacing: inherit;
  border: 2px solid #eaeaea;
  border-radius: 4px;
  padding: 0.7em;
}

Außenabstand

Die Kurzschreibweise der CSS-Eigenschaft margin setzt den Außenabstand auf allen vier Seiten eines Elements.

Das Verwendungformat ist wie folgt:

margin: top right bottom left;

margin-top: top margin value;
margin-left: left margin value;
margin-right: right margin value;
margin-bottom: bottom margin value;

Zum Beispiel können Sie der folgenden CSS verwenden, um einem <p>-Element einen Außenabstand hinzuzufügen:

Fügen Sie Folgendes zur style.css-Datei hinzu:

* {
  margin: auto;
}
.logo-section {
  width: 10%;
  margin-left: initial;
}
.logo {
  margin-left: 0.8em;
  max-width: 60%;
}
section div {
  width: 50%;
  margin: 0 auto;
}
.cover-sect {
  margin-top: 0px;
  padding: 5% 0;
}
.title-text {
  width: 40%;
  text-align: center;
  color: black;
  margin: auto;
  padding: 0 20px;
}
.circle img {
  border-radius: 100%;
  width: 70%;
  height: 100%;
  margin-left: 15%;
}
.services {
  width: 90%;
  margin: 20px auto;
}
form.txt-box {
  margin-top: 0.3em;
  width: 100%;
  padding: 0.7em 0;
  border-radius: 2px;
  border: 2px transparent;
  color: #3d3939;
}
footer div {
  margin-right: 2em;
}

footer span {
  text-align: center;
  margin-left: 2em;
}

footer.company-info {
  margin-left: 20em;
}

footer.contact-us {
  margin-left: 25em;
}

Box-Schatten

Auf der Tierseite können Sie die box-shadow-Eigenschaft verwenden, um einem Abschaltknopf im Formular einen Schatteneffekt hinzuzufügen.

Die box-shadow-Eigenschaft wird verwendet, um einen oder mehrere Box-Schatten hinzuzufügen und so einen visuellen Effekt zu erzeugen, als hätte die Box einen Schatten.

Ihr Syntax-Format ist wie folgt:

box-shadow: h-shadow v-shadow blur spread color inset;

Die Bedeutung jedes Wertes wird unten beschrieben:

Fügen Sie Folgendes zur style.css-Datei hinzu:

form.btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
  font-weight: 700;
  letter-spacing: inherit;
  border: 2px solid #eaeaea;
  box-shadow: 0px 0px 10px 1px #29393e;
  border-radius: 4px;
  padding: 0.7em;
}

Hinweis: Obwohl wir viele CSS-Eigenschaften behandelt haben, ist es nachvollziehbar, dass die Seitenlayoutung immer noch ungeordnet aussehen kann. Machen Sie sich keine Sorgen, wir werden später mehrere Seitenlayout-Techniken vorstellen. Diese Techniken helfen, die Seite effektiver zu organisieren und zu strukturieren, einschließlich von Flexbox, Grid und anderen CSS-Layoutmodellen. Diese Modelle bieten leistungsstarke Werkzeuge für das Design von responsiven, flexiblen und gut organisierten Layouts.

Zusammenfassung

In diesem Lab haben Sie mit Jordan die Komplexitäten des CSS-Box-Modells und der Außenabstände durchlebt und die Layout- und Designqualität der Website "Pet's House" verbessert. Beginnend mit dem Verständnis der Komponenten des Box-Modells - Außenabstände, Grenzen, Innenabstände und Inhalt - haben Sie diese Prinzipien angewendet, um die Struktur und die Benutzeroberfläche der Website zu verbessern. Indem Sie die Außenabstände manipuliert haben, haben Sie gelernt, den Abstand zwischen den Elementen effektiv zu steuern. Innenabstandsveränderungen wurden vorgenommen, um sicherzustellen, dass der Inhalt innerhalb der Elemente deutlich und attraktiv dargestellt wird. Dieses Lab hat nicht nur Ihre CSS-Fähigkeiten geschärft, sondern auch die Wichtigkeit einer sorgfältigen Layout-Designs bei der Schaffung von ansprechenden und benutzerfreundlichen Webanwendungen betont.