Plusieurs types de modèles de boîtes html-tutoriel HTML-php.cn

Plusieurs types de modèles de boîtes html

WBOY

Libérer： 2024-02-19 21:02:06

original

514 Les gens l'ont consulté

Plusieurs types de modèles de boîtes html

Il existe deux types de modèles de boîtes HTML, à savoir le modèle de boîte standard (Content Box Model) et le modèle de boîte IE (Border Box Model).

Le modèle de boîte standard est stipulé par la norme W3C. Dans le modèle de boîte standard, la largeur et la hauteur de l'élément incluent uniquement la zone de contenu (content), à l'exclusion de la bordure (border) et du remplissage (padding). La largeur ou la hauteur totale d'un élément est égale à la largeur ou la hauteur de la zone de contenu + la largeur ou la hauteur de la bordure + la largeur ou la hauteur du remplissage.

Le modèle de boîte IE est un modèle de boîte proposé par le premier navigateur Internet Explorer. Différent du modèle de boîte standard, dans le modèle de boîte IE, la largeur et la hauteur de l'élément incluent la zone de contenu, la bordure et le remplissage. La largeur ou la hauteur totale d'un élément est égale à la largeur ou à la hauteur de la zone de contenu (y compris les bordures et le remplissage).

Ci-dessous, je donnerai des exemples de code spécifiques pour le modèle de boîte standard et le modèle de boîte IE respectivement.

Le premier est l'exemple de code du modèle de boîte standard :

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  padding: 10px;
  margin: 20px;
}
</style>
</head>
<body>

<div class="box">
  <p>This is the content of the box.</p>
</div>

</body>
</html>

Copier après la connexion

Dans l'exemple ci-dessus, nous utilisons un élément <div> pour créer une boîte. En définissant les styles CSS, nous spécifions la largeur, la hauteur, les bordures, le remplissage et les marges de la boîte. Dans le modèle de boîte standard, la largeur totale de l'élément = la largeur de la zone de contenu + la largeur de la bordure + la largeur du remplissage = 200px + 2px + 20px = 222px la hauteur totale = la hauteur de la zone de contenu ; + la hauteur de la bordure + la hauteur du remplissage = 100px + 2px + 20px = 122px. <div>元素来创建一个盒子。通过设置CSS样式，我们给盒子指定了宽度、高度、边框、填充和外边距。在标准盒模型中，元素的总宽度=内容区域的宽度 + 边框的宽度 + 填充的宽度 = 200px + 2px + 20px = 222px；总高度=内容区域的高度 + 边框的高度 + 填充的高度 = 100px + 2px + 20px = 122px。

接下来是IE盒模型的代码示例：

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  box-sizing: border-box;
  width: 200px;
  height: 100px;
  border: 1px solid black;
  padding: 10px;
  margin: 20px;
}
</style>
</head>
<body>

<div class="box">
  <p>This is the content of the box.</p>
</div>

</body>
</html>

Copier après la connexion

在IE盒模型中，我们可以通过设置box-sizing: border-box;

Ce qui suit est un exemple de code du modèle de boîte IE :

rrreee

Dans le modèle de boîte IE, nous pouvons utiliser le modèle de boîte IE en définissant box-sizing: border-box;. Dans le modèle de boîte IE, la largeur totale de l'élément = la largeur de la zone de contenu = 200 px ; la hauteur totale = la hauteur de la zone de contenu = 100 px ; 🎜🎜Grâce à l'exemple de code ci-dessus, nous pouvons clairement voir la différence entre le modèle de boîte standard et le modèle de boîte IE. Dans le développement réel, nous devons choisir le modèle de boîte à utiliser en fonction des différents besoins et de la compatibilité du navigateur. 🎜

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!