Examiner de manière approfondie les points de connaissances pertinents du modèle de boîte CSS-tutoriel CSS-php.cn

Examiner de manière approfondie les points de connaissances pertinents du modèle de boîte CSS

青灯夜游

Libérer： 2023-04-12 18:05:21

avant

1490 Les gens l'ont consulté

Le modèle de boîte CSS est un point clé et difficile dans les bases du CSS, il est donc souvent utilisé par les intervieweurs pour examiner la maîtrise des candidats des bases du front-end. Cet article triera de manière exhaustive les points de connaissance du modèle de boîte CSS.

Examiner de manière approfondie les points de connaissances pertinents du modèle de boîte CSS

Regardons d'abord un exemple : quelle est la largeur totale de l'élément div ci-dessous ?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
    <title>CSS 盒模型(https://github.com/webharry/fe-interview)</title>
<style>
div {
    background-color: lightgrey;
    width: 200px;
    border: 10px solid yellow;
    padding: 10px;
    margin: 20px;
}
</style>
</head>
<body>
    <div>这里是盒子内的实际内容。有 10px 内间距，20px 外间距、10px 黄色边框。</div>
</body>
</html>

Copier après la connexion

Pour répondre à cette question, nous devons d'abord comprendre le modèle de boîte CSS.

Qu'est-ce que le modèle de boîte CSS ?

Chaque élément HTML est constitué d'un cadre rectangulaire (boîte), appelé modèle de boîte. Le modèle de boîte CSS définit les dimensions et les marges d'un élément HTML.

Les différentes parties du modèle de boîte

Combiner une boîte en CSS nécessite :

Boîte de contenu : Cette zone est utilisée pour afficher le contenu, et la taille peut être définie par largeur et hauteur. width 和 height。
Padding box: 包围在内容区域外部的空白区域；大小通过 padding 相关属性设置。
Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin

Padding box

: Une zone vide entourée en dehors de la zone de contenu ; la taille est définie via les attributs associés au padding.

CSS 盒模型各个部分 Border box

: La zone de bordure enveloppe le contenu et le remplissage. La taille est définie via les propriétés liées à border.

Boîte de marge

: Il s'agit de la zone la plus extérieure, l'espace vide entre la boîte et les autres éléments. La taille est définie via les propriétés liées à la marge.

Comme le montre l'image :

CSS propose deux modèles de boîte : le modèle de boîte standard et le modèle de boîte IE.

Quelle est la différence entre les deux modèles de box ?
Dans le modèle de boîte standard, la largeur et la hauteur d'un élément incluent uniquement le contenu, donc lors de la définition de la largeur et de la hauteur, vous devez prendre en compte l'impact du remplissage, de la bordure et de la marge sur ceux-ci.

Dans le modèle de boîte IE, la largeur et la hauteur de l'élément incluent le remplissage et les bordures, donc lors de la définition de la largeur et de la hauteur, il n'est pas nécessaire de prendre en compte l'impact du remplissage et les borde.

Comme le montre l'image :

Important :

Lorsque vous spécifiez les propriétés de largeur et de hauteur d'un élément CSS, vous définissez uniquement la largeur et la hauteur de la zone de contenu.

Comment convertir entre les deux modèles de box ?

Vous pouvez spécifier le modèle de boîte à utiliser en définissant la propriété CSS box-sizing. Par défaut, la valeur de la propriété box-sizing est content-box, qui utilise le modèle de boîte standard. Cela peut être défini sur border-box, qui utilise le modèle de boîte IE. 🎜🎜🎜Écrit à la fin🎜🎜🎜Maintenant, regardons l'exemple au début de l'article. La réponse est évidente. Car par défaut, la valeur de la propriété box-sizing est content-box, qui utilise le modèle de boîte standard. Ainsi, la largeur totale de l'élément div dans l'exemple est de 200+10x2+10x2=240px. 🎜🎜 (Partage de vidéos d'apprentissage : 🎜front-end web🎜)🎜

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!