1. Introducción
Todos los elementos HTML se pueden ver como cajas. En CSS, el término "modelo de caja" se usa para el diseño y el diseño.
El modelo de cuadro CSS es esencialmente un cuadro que encapsula los elementos HTML circundantes, incluye: márgenes, bordes, relleno y contenido real.
El modelo de caja nos permite colocar elementos en el espacio entre otros elementos y los bordes de los elementos circundantes.
La siguiente imagen ilustra el modelo de caja:
Explicación de las diferentes secciones:
- Margen : borra el área fuera del borde, el margen es transparente.
- Borde : un borde alrededor del relleno y fuera del contenido.
- Relleno : borra el área alrededor del contenido, el relleno es transparente.
- Contenido : el contenido del cuadro, que muestra texto e imágenes.
2. El ancho y alto del elemento
Importante: cuando especifica las propiedades de ancho y alto de un elemento CSS, solo está configurando el ancho y el alto del área de contenido. Tenga en cuenta que para los elementos de tamaño completo, también debe agregar relleno, bordes y márgenes.
Los elementos del siguiente ejemplo tienen un ancho total de 450 px:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS基础学习</title>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
</style>
</head>
<body>
<h2>盒子模型演示</h2>
<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>
<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div>
</body>
</html>Representaciones:
Hagamos los cálculos:
300 px (ancho)
+ 50 px (relleno izquierdo + derecho)
+ 50 px (borde izquierdo + derecho)
+ 50 px (margen izquierdo + derecho)
= 450 px
La fórmula para calcular el ancho total del elemento final es la siguiente :
Ancho total del elemento = ancho + relleno izquierdo + relleno derecho + borde izquierdo + borde derecho + margen izquierdo + margen derecho
La fórmula de cálculo final de la altura total del elemento es la siguiente:
La altura del elemento total = altura + relleno superior + relleno inferior + borde superior + borde inferior + margen superior + margen inferior