1. Modelo de caja
estándar El modelo de caja estándar
también se llama modelo de caja W3C. Ahora la mayoría de los navegadores utilizan el modelo de caja estándar.
En el modo estándar, el ancho total de un elemento = ancho (contenido) + relleno (izquierda y derecha) + margen ( izquierda y derecha), la altura del elemento es la misma.
como muestra la imagen:
2. Modelo de caja de IE El modelo de caja
estándar también se llama modelo de caja extraño. Los navegadores anteriores a IE6 adoptan el modelo de caja extraño de forma predeterminada.
En el modo extraño, el ancho total ocupado por un elemento = ancho + margen (izquierda y derecha) , (es decir, el ancho contiene El alto del borde + relleno + contenido) elemento es el mismo.
como muestra la imagen:
Modelo de caja estándar y modelo de caja IE, los ejemplos de código son los siguientes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#ieBox{
width: 200px;
height: 200px;
padding: 20px;
margin: 10px;
border:5px solid rgb(0, 255, 234);
box-sizing: border-box;
/* 加上 box-sizing: border-box; 后可以将div盒模型设置为IE盒模型*/
background: greenyellow;
}
#Box{
width: 200px;
height: 200px;
padding: 20px;
margin: 10px;
border:5px solid rgb(0, 255, 234);
box-sizing:content-box;
/* 加上 box-sizing: border-box; 后可以将div盒模型设置为标准盒模型*/
background: red;
}
</style>
</head>
<body>
<div id="ieBox">
IE盒模型
</div>
<div id="Box">
标准盒模型
</div>
</body>
</html>