Maison interface Web tutoriel CSS quel est le modèle de boîte CSS

quel est le modèle de boîte CSS

May 14, 2019 pm 04:05 PM
盒子模型

Le modèle de boîte CSS est également appelé modèle de boîte. La partie la plus intérieure de la boîte est le contenu réel de l'élément, c'est-à-dire que le contenu de l'élément se trouve à côté de l'extérieur de la boîte de l'élément, suivi de la marge intérieure. la bordure, puis la couche la plus externe est la marge extérieure. Ces plusieurs parties forment ensemble le modèle de boîte

Le modèle de boîte est la connaissance de base de html+css. Ce n'est qu'en comprenant ce concept important que nous pourrons mieux taper. et disposez la page. Ce qui suit est un résumé des connaissances sur le modèle de boîte CSS. J'espère qu'il sera utile à tout le monde.

quel est le modèle de boîte CSS

1. Concept de modèle de boîte CSS

Le modèle de boîte CSS CSS est également appelé modèle de boîte (Box Model), qui contient un élément contenu (contenu), remplissage, bordure et marge. Comme le montre l'image :

quel est le modèle de boîte CSS


La boîte la plus intérieure de l'image est le contenu réel de l'élément, c'est-à-dire la boîte de l'élément , qui se trouve immédiatement à l'extérieur de la boîte de l'élément. Le premier est le remplissage, suivi de la bordure, puis la couche la plus externe est la marge extérieure, qui constitue le modèle de boîte. Habituellement, la zone d'affichage d'arrière-plan que nous définissons correspond à la plage de contenu, de remplissage et de bordures. La marge extérieure est transparente et ne bloquera pas les autres éléments environnants.

Ensuite, la largeur totale de la boîte de l'élément = la largeur de l'élément + la valeur des marges gauche et droite du padding + les valeurs des marges gauche et droite de la marge + la gauche et largeur droite de la bordure ;

La hauteur totale de la boîte de l'élément = la hauteur de l'élément + la valeur des marges supérieure et inférieure du padding + la valeur des marges supérieure et inférieure + le haut et la largeur inférieure de la bordure.

2. Fusion de marges CSS (superposition)

Lorsque deux boîtes d'éléments verticalement adjacentes se rencontrent verticalement, les marges seront fusionnées et les marges fusionnées La hauteur est égale à la plus élevée des deux marges fusionnées, comme le montre la figure :

quel est le modèle de boîte CSS

quel est le modèle de boîte CSS


est relativement facile pour comprendre, vous devez donc parfois prendre en compte ce facteur lorsque vous rencontrez des situations réelles sur la page. Bien sûr, la fusion des marges a aussi une signification, comme indiqué ci-dessous :

quel est le modèle de boîte CSS


Il convient de noter que : seulement bloquer les cases dans un document ordinaire La fusion des marges de flux se produit uniquement avec les marges verticales. Les marges entre les cases en ligne, les cases flottantes ou les cases en position absolue ne sont pas fusionnées.

la réinitialisation CSS est également souvent utilisée

* {
  margin : 0;
  padding : 0;
}
Copier après la connexion

3 Introduction à l'attribut box-sizing

l'attribut box-sizing se trouve dans l'attribut de l'interface utilisateur One. , la raison pour laquelle je l'introduis est parce que cet attribut est lié au modèle de boîte et qu'il peut être utilisé dans la réinitialisation CSS.

box-sizing : content-box|border-box|inherit;
Copier après la connexion

(1) content-box , la valeur par défaut, permet d'appliquer les valeurs de largeur et de hauteur définies à la zone de contenu de l'élément. La largeur de la boîte contient uniquement le contenu.

C'est-à-dire largeur totale = margin+border+padding+width

(2) border-box , la valeur de largeur définie est en fait la largeur totale de border+padding+element sauf la marge. La largeur de la boîte inclut border+padding+content

, c'est-à-dire largeur totale = margin+width

De nombreux frameworks CSS simplifieront la méthode de calcul du modèle de boîte.

(3) Ensure , stipule que la valeur de l'attribut box-sizing doit être héritée de l'élément parent

À propos de l'utilisation de border-box :

1. La largeur de la boîte est de 100 % et vous souhaitez un espacement intérieur des deux côtés, il est donc préférable de l'utiliser à ce moment-là

2. Le réglage global de la bordure de la boîte est très bon. Avant tout, il est intuitif et, deuxièmement, il peut vous faire gagner encore et encore. De plus, il a également un rôle clé : permettre aux boîtes avec des bordures d'utiliser normalement les largeurs en pourcentage.

4. Applications et problèmes mineurs liés au modèle de cadre rencontrés dans le développement réel.

1. Marge hors limites (la marge supérieure du premier élément enfant et la marge inférieure du dernier élément enfant sont hors limites)

Avec la première marge supérieure d'un élément enfant, par exemple :

Lorsque l'élément parent n'a pas de bordure, lors de la définition de la valeur de marge supérieure du premier élément enfant, la valeur de marge supérieure sera ajouté à l'élément parent. Il existe quatre solutions à ce phénomène :

(1) Ajouter une bordure à l'élément parent (effet secondaire)

(2) Définir une valeur de remplissage pour le parent. element (effet secondaire)

(3) L'élément parent ajoute un débordement : caché (effet secondaire)

(4) L'élément parent ajoute du contenu préfixé à générer. (Recommandé)

Prenons comme exemple la quatrième méthode :

.parent {     
width : 500px;     
height : 500px;     
background-color : red;       
}.parent : before {     
content : " ";     
display : table;}.child {     
width : 200px;    
 height : 200px;     
 background-color : green;     
 margin-top : 50px;}
<div class="parent">    
<div class="child"></div> </div>
Copier après la connexion

2. Modèle de boîte entre les navigateurs.

(1) La balise ul a une valeur de remplissage par défaut dans Mozilla, mais dans IE, seule la marge a une valeur.

(2) La différence entre le modèle de boîte standard et le modèle IE :

Le modèle de boîte standard est celui introduit ci-dessus, tandis que le modèle IE s'apparente davantage à un dimensionnement de boîte : bordure- box ; Sa largeur de contenu comprend également la bordure et le remplissage. La solution est la suivante : ajoutez une instruction doctype au modèle HTML.

3. Utilisez le modèle de boîte pour dessiner des triangles

<!DOCTYPE html><html>
  <head>
    <style>
        .triangle {
            width : 0;
            height: 0;
            border : 100px solid transparent;
            border-top : 100px solid blue; /*这里可以设置border的top、bottom、left、right
            四个方向的三角*/
        }
    </style>
  </head>
  <body>
    <div class="triangle"></div>
  </body></html>
Copier après la connexion

页面显示结果为:


quel est le modèle de boîte CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Travailler avec GraphQL Caching Travailler avec GraphQL Caching Mar 19, 2025 am 09:36 AM

Si vous avez récemment commencé à travailler avec GraphQL ou examiné ses avantages et ses inconvénients, vous avez sans aucun doute entendu des choses comme "GraphQL ne prend pas en charge la mise en cache" ou

Faire votre première transition Svelte personnalisée Faire votre première transition Svelte personnalisée Mar 15, 2025 am 11:08 AM

L'API de transition Svelte fournit un moyen d'animer les composants lorsqu'ils entrent ou quittent le document, y compris les transitions Svelte personnalisées.

Show, ne dit pas Show, ne dit pas Mar 16, 2025 am 11:49 AM

Combien de temps passez-vous à concevoir la présentation de contenu pour vos sites Web? Lorsque vous écrivez un nouveau blog ou créez une nouvelle page, pensez-vous à

Construire une application Ethereum à l'aide de Redwood.js et de la faune Construire une application Ethereum à l'aide de Redwood.js et de la faune Mar 28, 2025 am 09:18 AM

Avec la récente montée du prix du bitcoin sur 20k $ USD, et pour lui, récemment en train de briser 30k, je pensais que cela valait la peine de reprendre une profonde plongeon dans la création d'Ethereum

Que diable sont les commandes NPM? Que diable sont les commandes NPM? Mar 15, 2025 am 11:36 AM

Les commandes NPM exécutent diverses tâches pour vous, soit en tant que processus unique ou en cours d'exécution pour des choses comme le démarrage d'un serveur ou la compilation de code.

Comment utilisez-vous CSS pour créer des effets de texte, tels que des ombres de texte et des gradients? Comment utilisez-vous CSS pour créer des effets de texte, tels que des ombres de texte et des gradients? Mar 14, 2025 am 11:10 AM

L'article discute de l'utilisation de CSS pour les effets de texte comme les ombres et les gradients, les optimiser pour les performances et l'amélioration de l'expérience utilisateur. Il répertorie également les ressources pour les débutants (159 caractères)

Créer votre propre bragdoc avec Eleventy Créer votre propre bragdoc avec Eleventy Mar 18, 2025 am 11:23 AM

Quelle que soit le stade dans lequel vous vous trouvez en tant que développeur, les tâches que nous effectuons - qu'elles soient grandes ou petites - ont un impact énorme dans notre croissance personnelle et professionnelle.

Utilisons (x, x, x, x) pour parler de spécificité Utilisons (x, x, x, x) pour parler de spécificité Mar 24, 2025 am 10:37 AM

Je discutais avec Eric Meyer l'autre jour et je me suis souvenu d'une histoire d'Eric Meyer de mes années de formation. J'ai écrit un article de blog sur la spécificité CSS, et

See all articles