Modèle de boîte CSS et marges

Introduction

Dans le monde numérique animé de "Pet's House", un site web dédié à la prestation de services de soins premium pour les animaux de compagnie, notre protagoniste, Jordan, un talentueux développeur web, est chargé d'améliorer la mise en page et la conception du site.
La scène est située dans un bureau confortable donnant sur l'horizon urbain, où Jordan est déterminé à optimiser l'expérience utilisateur en appliquant soigneusement les principes du Modèle de Boîte CSS et des Marge.

Dans ce laboratoire, nous utiliserons des propriétés telles que le Modèle de Boîte CSS et les Marge pour affiner la mise en page.

Skills Graph

Comprendre le Modèle de Boîte

Pensez à la manière dont nous pouvons faire apparaître les éléments à l'endroit où nous les avons conçus pour apparaître.

Dans cette étape, vous allez approfondir le Modèle de Boîte CSS, un concept fondamental qui gouverne la mise en page des pages web. Chaque élément sur une page est considéré comme une boîte, composée de marges, de bordures, de remplissage et du contenu réel. Ce modèle permet aux développeurs de contrôler précisément l'espacement et la dimension des éléments.

En appuyant sur F12 pour ouvrir les outils de développement, comme montré dans la figure ci-dessous lors de la sélection d'un élément <li>, nous pouvons voir le modèle de boîte de l'élément dans la section Calculé.

Ensuite, introduisons trois propriétés importantes du modèle de boîte :

• border
• padding
• margin

Bordure

La propriété raccourcie CSS border définit la bordure d'un élément. Elle définit les valeurs de border-width, border-style et border-color.

Le format d'utilisation est le suivant :

border: width style color;

Par exemple, pour ajouter une bordure à un élément <p>, vous pouvez utiliser le CSS suivant :

Dans la page d'accueil des animaux, si les boutons dans le formulaire ont une bordure, vous pouvez ajouter le contenu suivant au fichier style.css pour les styliser :

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

De plus, nous pouvons obtenir un effet de coins arrondis sur les boutons en utilisant la propriété border-radius. Voici comment l'ajouter :

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;
}

Dans la section "À propos de nous", pour afficher un effet d'image circulaire, vous pouvez effectivement utiliser la propriété border-radius. Voici comment l'appliquer :

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

Remplissage

La propriété raccourcie CSS padding définit l'aire de remplissage des quatre côtés d'un élément d'un coup.

Le format d'utilisation est le suivant :

padding: haut droit bas gauche;

padding-top: valeur de remplissage supérieure;
padding-left: valeur de remplissage gauche;
padding-right: valeur de remplissage droite;
padding-bottom: valeur de remplissage inférieure;

Par exemple, pour ajouter un remplissage à un élément <p>, vous pouvez utiliser le CSS suivant :

Ajoutez le contenu suivant au fichier style.css :

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;
}

Marge

La propriété raccourcie CSS margin définit l'aire de marge des quatre côtés d'un élément.

Le format d'utilisation est le suivant :

margin: haut droit bas gauche;

margin-top: valeur de marge supérieure;
margin-left: valeur de marge gauche;
margin-right: valeur de marge droite;
margin-bottom: valeur de marge inférieure;

Par exemple, pour ajouter une marge à un élément <p>, vous pouvez utiliser le CSS suivant :

Ajoutez le contenu suivant au fichier style.css :

* {
  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;
}

Ombre de boîte

Dans la page d'accueil des animaux, pour ajouter un effet d'ombre au bouton de soumission dans le formulaire, vous pouvez utiliser la propriété box-shadow.

La propriété box-shadow est utilisée pour ajouter une ou plusieurs ombres de boîte, créant un effet visuel comme si la boîte avait une ombre.

Le format de sa syntaxe est le suivant :

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

Le sens de chaque valeur est décrit ci-dessous :

Ajoutez le contenu suivant au fichier style.css :

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;
}

Note : Bien que nous ayons abordé de nombreuses propriétés CSS, il est normal que la mise en page de la page semble encore désorganisée. Ne vous inquiétez pas, nous présenterons plus tard plusieurs techniques de mise en page de page. Ces techniques vous aideront à organiser et structurer la page de manière plus efficace, y compris Flexbox, Grid et autres modèles de mise en page CSS. Ces modèles fournissent des outils puissants pour concevoir des mises en page réactives, flexibles et bien organisées.

Sommaire

Dans ce laboratoire, vous avez parcouru les complexités du Modèle de boîte CSS et des Marges avec Jordan, améliorant la mise en page et la conception du site web "Pet's House". En commençant par comprendre les composants du modèle de boîte - les marges, les bordures, le remplissage et le contenu - vous avez appliqué ces principes pour améliorer la structure et l'interface utilisateur du site. En manipulant les marges, vous avez appris à contrôler efficacement l'espacement entre les éléments. Des ajustements de remplissage ont été effectués pour vous assurer que le contenu à l'intérieur des éléments est présenté clairement et de manière attrayante. Ce laboratoire n'a pas seulement affiné vos compétences en CSS, mais a également souligné l'importance d'une conception de mise en page méticuleuse dans la création d'expériences web attrayantes et conviviales pour l'utilisateur.