En el modelo de cajas todos los elementos HTML se pueden considerar como cuadros. En CSS, el término «modelo de caja» se usa cuando se habla de diseño y maquetación.

Con la opción de Inspeccionar elementos podemos ver la diagramación de nuestro sitio web en detalle y seleccionar html y css

Antes de entrar al estilo de cajas debo revisar mi layout.

Layout: Término inglés con el que se conoce en entorno de diseño, los bocetos o maquetas. Es la ordenación y colocación de todos los elementos que componen una página web dentro de la ventana de un navegador.

Partes de una caja

Al hacer una caja de tipo bloque en CSS tenemos los elementos siguientes:

• El contenido de la caja (o content box): El área donde se muestra el contenido, cuyo tamaño puede cambiarse utilizando propiedades como width y height.
• El relleno de la caja (o padding box): El relleno es espacio en blanco alrededor del contenido; es posible controlar su tamaño usando la propiedad padding y otras propiedades relacionadas.
• El borde de la caja (o border box): El borde de la caja envuelve el contenido y el de relleno. Es posible controlar su tamaño y estilo utilizando la propiedad border y otras propiedades relacionadas.
• El margen de la caja (o margin box): El margen es la capa más externa. Envuelve el contenido, el relleno y el borde como espacio en blanco entre la caja y otros elementos. Es posible controlar su tamaño usando la propiedad margin y otras propiedades relacionadas.

El diagrama siguiente muestra estas capas:

El modelo de cajas CSS estándar

En el modelo de cajas estándar, cuando estableces los atributos width y height para una caja, defines el ancho y el alto del contenido de la caja. Cualquier área de relleno y borde se añade a ese ancho y alto para obtener el tamaño total que ocupa la caja. Esto se muestra en la imagen que encontrarás a continuación.

Si suponemos que la caja tiene el CSS siguiente, que establece los valores para las propiedades width, height, margin, border, y padding:

.box {

width: 350px;

height: 150px;

margin: 10px;

padding: 25px 3px 3px 0px; en el sentido del reloj agrega el borde

border: 5px solid black;

  box-sizing: border-box; suma los px anteriores

}

https://devcode.la/tutoriales/modelo-caja-css/

El modelo de caja puede llegar a ser un poco confuso, ya que inicialmente definimos un alto y ancho específico para nuestra caja, pero gracias al padding, border y margin este tamaño varía. Esto ocurre porque el modelo de caja por defecto es aditivo; por lo tanto, para determinar el tamaño real, deberemos calcularlo, pero para ahorrar ese trabajo BOX-SIZING suma el total de lo que he escrito originalmente el en alto y ancho.

Reset css:

Es un grupo de propiedades para resetear el viewport, van en el siguiente orden, primero esta el reset y luego mi estilo.css

   <link rel=’stylesheet’ type=’text/css’ media=’screen’ href=’reset.css’>

    <link rel=’stylesheet’ type=’text/css’ media=’screen’ href=’estilo.css’>

1.32 mm

https://meyerweb.com/eric/tools/css/reset/

La propiedad de visualización

Display es la propiedad CSS más importante para controlar el diseño. Especifica cómo se muestra un elemento.

Cada elemento HTML tiene un valor de visualización predeterminado según el tipo de elemento que sea. El valor de visualización predeterminado para la mayoría de los elementos es block o  inline.

https://www.w3schools.com/css/css_display_visibility.asp

Elementos a nivel de bloque

Un elemento a nivel de bloque siempre comienza en una nueva línea y ocupa todo el ancho disponible (se extiende hacia la izquierda y hacia la derecha tanto como sea posible).

Ejemplos de elementos a nivel de bloque:

• <div>
• <h1> – <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>

Elementos en línea

Un elemento en línea no comienza en una nueva línea y solo ocupa el ancho necesario.

• <span>
• <a>
• <img>

Para finalizar se continua trabajando en nuestra plantilla