Max/Min width

El overflow es el equivalente al:

En CSS

Esta clase tiene un typo :ccc height debe llevar “vh” sugiero que suban esta clase nuevamente porque esta explicación puede afectar a los estudiantes ❤️

Min-height: se utiliza para definir la altura mínima de un elemento dado. Impide que el valor de la propiedad height llegue a ser más pequeña que la especificada en la altura mínima ( min-height ). Se refiere a la altura del bloque contenedor.

Max-height: se utiliza para definir la altura máxima de un elemento dado. Impide que el valor de la altura pueda llegar a ser más grande que la de max-height . Porcentajes: se refiere a la altura del bloque contenedor.

Min-width: se usa para determinar la anchura mínima de un elemento. Previene que la propiedad width pueda ser inferior que min-width . Aplicable a: elementos de tipo bloque. Porcentajes: se refieren a la anchura del bloque contenedor.

Max-width: define el ancho máximo que un elemento puede tener, max-width cambia el tamaño del elemento si el valor de width es mayor que el de max-width.

Hola. Como sabrá, estamos viendo muchas etiquetas y atributos, por lo que olvidarlas será fácil si no las escribimos en algún lado. Podemos escribir nuestros apuntes de código en Word, Bloc de Notas, etc.

Aunque quiero compartirles Typora, un programa gratis, minimalista y poderoso para almacenar nuestras notas personales y nuestros fragmentos de código.

section ocupara el 50% del ancho y alto con respecto a su padre directo que es main
main ocupara el 80% del ancho y alto con respecto al viewport (área visible del usuario de una página web.)

Este ejemplo queda perfecto para lo que nos mostró Diego sobre Max/Min Width 👇🏼

Les comparto un pequeño proyecto que me propuse y logré:
Objetivo:

Resultado:

Estoy aprovechando al maximo el platzi day!, ayer me quedé hasta las 5 am viendo videos jajaja

¿Qué es la viewport?
Es el área visible del usuario de una página web.
El viewpost varía según el dispositivo y será más pequeña en un teléfono móvil que en una pantalla de computadora.

Antes de las tabletas y los teléfonos móviles, las páginas web estaban diseñadas solo para pantallas de computadora, y era común que las páginas web tuvieran un diseño estático y un tamaño fijo.

Luego, cuando comenzamos a navegar por Internet usando tabletas y teléfonos móviles, las páginas web de tamaño fijo eran demasiado grandes para caber en el viewport. Para solucionar este problema, los navegadores de esos dispositivos redujeron la página web completa para adaptarse a la pantalla.

Una regla importante cuando vayamos a utilizar el min y el max en el width, necesitamos tener un width base y casi siempre este va a ser en porcentaje.
Lorem*8 sirve para agregar texto en párrafo.
Problema de overflow, quiere decir que tenemos mas texto contenido que el mismo espacio del contenedor padre.

TIPS: 1vw o 1vh equivale a 1% por eso al poner el 100vw y 100vh cubre toda la pantalla XD

¿Que es Lorem ipsum?
Lorem ipsum es un texto sin sentido que aplicamos para llenar espacios donde podría ir texto, así como podríamos poner “alkjdljkakjasljakldjaadlakj” para rellenar un espacio, en el desarrollo y diseño es buena practica aplicar el Lorem Ipsum para dar a entender que ahí podrá haber un texto.
.
En VS escribiremos “loremxY” sea Y el número de palabras que queramos generar.

Esto se usa bastante para empezar a adecuar los MediaQuery para responsive.

Ah les dejo un librito por si quieren leer del tema
https://documentcloud.adobe.com/link/track?uri=urn%3Aaaid%3Ascds%3AUS%3A35a26580-e883-4e72-91d0-8a083c3f60f8#pageNum=23

max = hasta
min = desde
Algo curioso que pasa con imagenes es que si usamos
max-width: 100%, le estamos diciendo que no puede crecer mas de su propio ancho original. Si usamos solo width: 100%, la imagen intentara estirarse para abarcar el ancho de su contenedor, esto pixelea la imagen.

He intentado aplicar todos los conocimientos en este layout
![](

Recuerda: El viewport del navegador es el área de la ventana en donde el contenido web está visible.

https://www.notion.so/CSS3-2afe155774e94e848dd82fb2006f4c58

Aqui como van mis apuntes de CSS

section{
    width: 80%;/*debemos tener un width base que normalmente sera en porcentaje*/
    min-width: 320px;/*limitamos el tamaño que se va a encojer*/
    max-width: 500px;/*limitamos el tamaño que va a crecer*/
    min-height: 500px;
    margin: 0 auto;
    background-color: red;
}
/*un error comun es que le asignamos un tamaño a nuestro contenedor pero el contenido es demasiado
que se desborda del contenedor una forma de solucionarlo es asignar un tamaño min que permite
que nuestro contenedor crezca según el contenido que se tiene. */```

muy tranquilo aprendiendo css pero te enseñan lorem*8 y aprendes a invocar al diablo

Viewport height (vh): Esta unidad esta basada en el alto de la ventana. El valor de 1vh = 1% del alto del area de visualización.
.
Viewport width (vw): Esta unidad esta basada en el ancho de la ventana. El valor de 1vh = 1% del ancho del area de visualización.
Max-width: Permite definir la anchura maxima de un elemento.
.
Min-width: Permite definir la anchura minima de un elemento.
.
Max-height: Permite definir la altura maxima de un elemento.
.
Min-height: Permite definir la altura minima de un elemento.

Esta imagen lo resume muy bien. 😊

• Medidas.
  Las medidas vh y vw son medidas relativas de acuerdo al viewport. Vh hace referencia a la centésima parte de la altura del viewport y vw a la centésima parte del ancho del viewport.
  • 1vh = 1% de la altura del viewport
  • 100vh = altura del viewport
  • 1vw = 1% del ancho del viewport
  • 100vw = ancho del viewport

• Max-width

• La propiedad de CSS max-width coloca el máximo ancho a un elemento. Además, impide que el valor de width sea más largo que el valor especificado en max-width.

• Min-width
  • A diferencia de max-width que define el tamaño máximo, min-width define el mínimo tamaño que un elemento puede tener.

• Max-heigth
  • La propiedad max-height funciona de manera similar a la propiedad max-width, pero afecta a la altura en lugar de anchura.

• Min-heigth
  • A diferencia de la altura máxima, la propiedad altura mínima proporciona una altura mínima para un elemento

Para los que tienen dudas sobre la diferencia entre % y vw, veanla así:

• % es una medida ABSOLUTA , dependientes de su contenedor padre.

• VW es una medida RELATIVA al tamaño de pantalla que se muestre nuestra pagina. Pueden verla como una medida responsiva

Alguien me puede ayudar con esta duda

si “height: 100vh” hace que main ocupe todo el espacio del viewport, por qué cuando se aplica el “min-height: 500px;” para evitar el overflow esto hace que quede un espacio en blanco abajo

`main {
width: 100vw;
height: 100vh; /* si esto hace que main ocupe todo el view port */
background-color: purple;
}

section {
width: 80%;
min-width: 320px;
max-width: 500px;
min-height: 500px;
background-color: red;
margin: 0 auto;
}`

Para los que tal vez les haya pasado que si ponen 100vw se hace un overflow horizontal, se resuelve con un max-width:100%;
Esto sucede porque vw es relativo al width total de la ventana del navegador.
Aqui se explica algo respecto a esto

Clase 36 - Max/min width

¿Cómo funcionan las propiedades viewport-width y viewport-height?

• Estas propiedades nos permiten definir el ancho y el alto de un elemento usando el viewport del dispositivo en el que se renderice el elemento.
• Ejemplo:
• HTML

<main>
  <section>
           
  </section>
</main>

CSS:

main
{
    width: 100vw;
    height: 100vh;
    background-color: purple;
}

• Lo que estamos haciendo en este ejemplo es asignarle al elemento <main> un width de 100vw y un height de 100vh. Esto nos permite hacer que este elemento ocupe todo el campo del viewport en donde se vaya a renderizar el elemento, no importa si es una pantalla de un computador de escritorio, laptop o un celular, este elemento siempre ocupará el 100$ de ambas medidas.

¿Cómo podríamos centrar un elemento con CSS?

• Lo podemos hacer asignando la siguiente regla CSS al elemento:

margin: 0 auto;

• Lo qué estamos haciendo con esta regla es diciéndole al navegador que queremos que le asigne 0 a las márgenes superiores e inferiores y que a las márgenes de los lados estas se reparten el espacio disponible. Con solo esta regla somos capaces de centrar elementos que nos sean de texto.

¿Cómo funcionan las propiedades max-width y min-width?

• Estas propiedades nos permiten decirle al navegador que un elemento no puede tener más y menos ancho del que le definimos con estas propiedades, es decir, le estamos poniendo un límite de crecimiento y decrecimiento a un elemento. Para usar estas propiedades debemos de tener en cuenta que se debe de tener la propiedad width declarada previamente en el elemento.
• Ejemplo:

section
{
    width: 80%;
    min-width: 320px;
    max-width: 500px;
    background-color: aqua;
}

• Como vemos en este ejemplo lo que estamos haciendo es que el elemento <section> ocupará el 80% del espacio disponible que este tenga, pero también le estamos diciendo que puede crecer solo hasta un tamaño de 500px de ancho y no se puede hacer más pequeño a 320px de ancho.

¿Qué pasa si el contenido de una etiqueta de contenido es más grande que una etiqueta contenedora?

• Se presenta un problema de overflow.

¿Cómo podemos solucionar el problema de overflow?

• Usando la propiedad min-height.

¿Cómo funciona la propiedad min-height?

• Esta propiedad nos permite definir un valor mínimo en el alto de un elemento y si su contenido es mucho más grande qué el elemento contenedor con esta propiedad el elemento puede crecer lo suficiente para contener el contenido.

“Lorem” sirve para generar texto aleatorio ejemplo: <p>Lorem30</p> genera 30 palabras aleatorias

Hay algo que no se aclara y que me tocó buscar por fuera, o quizá no me di cuenta y es la diferencia entre vw, vh y los porcentajes, y es que el vw y vh aplican un porcentaje de la vista del navegador mientras que los porcentajes son relativos al elemento padre.

Eso estuvo un poco confuso

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

main {
  width: 100vw;
  height: 100vh;
  background-color: blue;
}
section {
  width: 80%; /*Generalmente en porcejate*/
  min-width: 320px;
  max-width: 500px;
  min-height: 500px;  /*Le indico un menor, pero si requiere más creecerá para adaptarse.*/
  margin: 0 auto;
  background-color: brown;
}

les dejo misx notas de la clase:

No entiendo

Notas
min-width sobrescribe los valores de max-width y width.
De la misma forma ocurre con height

Existen varias formas de centrar elementos como:

• justify-content

• vertical-align

• justify-self

• align-items.

• text-align

• etc

VH y VW
https://devcode.la/tutoriales/unidades-vh-vw-css/

Min-height: Lo usamos para definir la altura mínima de un elemento. Impide que el valor de la propiedad height llegue a ser más pequeña que la especificada en la altura mínima(min-height ). Se refiere a la altura del bloque contenedor.

Max-height: Lo usamos para definir la altura máxima de un elemento dado. Impide que el valor de la altura pueda llegar a ser más grande que la de max-height . Porcentajes: se refiere a la altura del bloque contenedor.

Min-width: Lo usamos para determinar la anchura mínima de un elemento. Previene que la propiedad width sea inferior que min-width. Se aplica en: elementos de tipo bloque. Porcentajes: se refieren a la anchura del bloque contenedor.

Max-width: Este define el ancho máximo que un elemento puede tener, max-width cambia el tamaño del elemento si el valor de width es mayor que el de max-width.

Aporte a la clase 😉

esta clase toca verla muchas veces hasta que se lo aprenda uno

Alguno ha traducido el texto de “Lorem ipsum” alguna vez? te deja pensando jajaja

Algo que olvido mencionar el profe. Es que el main estaba desajustado en correspondencia al section. por que con el min-height logro meter el texto al section. pero dejo descuadrado el main (osea el background purpura) si ustedes le asignan el min-height al main tambien se ajustara al tamano de su section.
![](

Me encanto este curso, ya programo en php y ahora también manejo el framework laravel, se de bases de datos relacionales, pero siempre sentia que me faltaba un poco mas de profundidad en CSS, lo uso hace años pero nunca a su 100%, este curso me empuja a leerme toda la documentación. Muy bien desarrollado y explicado por el profesor.

Buenas, vengo del futuro. Si utilizas solo el height no se desbordará. Hay algo raro allí. Si estos cursos están disponibles siempre, deberían ir actualizandolos. Quedé re loco papi, re loco, por que no sabía por donde le entraba el agua al molino.

section {
    width: 80%;
    min-width: 320px;
    max-width: 500px;
    height: 500px;
    margin: 0 auto;
    background-color: red;
}

Así como, el texto se adapta al height del section.

Les dejo el CSS del section comentado n.n

section {
  width: 80%; /* width base */
  min-width: 320px; /* límites */
  max-width: 500px; /* límites */
  min-height: 500px; /* para evitar el overflow */
  margin: 0 auto; /* truco para centrar sin flexbox */
  background-color: red;
}

después de 1 hora de dándole replay por fin entendí xD

Buenas tardes.
Excelente clase, ya vamos viendo bases del “responsive desing”.

Como me gusta pokemon realice de mi pokemon inicial favorito de kanto, xd

![](

Muy claro todo hasta aqui, me esta gustando este curso…

Notas de la clase

• view port, es el tamaño total de la pantalla del navegador, a diferencia del los porcentajes que ven el tamaño del elemento.
• max-width y min-width, definen el tamaño mínimo y máximo del ancho del elemento, antes de adicionar scrolls

A pesar de estar correctamente explicado puede ser algo confuso en especial si son conceptos nuevos para el estudiante. Aquí se manejan tres conceptos, que aunque relacionales, son distintos: vh y vw, Max/Min width y el problema de overflow,

Me puse a ponerle los numeros en rem y me modifico las cosas muy diferente 😂😅

VW/VH
Son medidas relativas de acuerdo al viewport.
1vw = 1% del ancho del viewport.
100vw = ancho del viewport.
1vh = 1% de la altura del viewport.
100vh = altura del viewport.

RECORDEMOS: El viewport es el área de la ventana del navegador en la que se puede visualizar el contenido de la pw. No es el mismo tamaño que tiene la pw ya renderizada.

36.-Max/Min width

Esto lo que hace es que el contenedor de main ocupe el 100% del viewport en el width y en el height sin importar el tamaño de la pantalla. Esto nos ayuda a poder darle ciertas dimensiones a contenedores padre como main o sections.

¿Qué es lo que hace el margin 0 auto?

De arriba a abajo no le agrega ningún margin pero de izquierda a derecha has que se ajuste de manera automática, por eso lo centra.

Cuando vayamos a utilizar el min y el max en el width necesitamos tener un width base (que casi siempre va a ser en porcentaje).

Básicamente es delimitar su crecimiento.

El height funciona de manera similar solo que sin un porcentaje inicial.

Cuando el texto empieza a salir del section se le llama overflow, es decir, tenemos más contenido que el mismo espacio del contenedor padre. Esto se soluciona usando min-height que le dice, la altura mínima que vas a tener es de Npx pero si llegas a tener contenido que exceda los Npx crece con el contenido hasta que este deje de crecer.

CÓMO FUNCIONA EL MINMAX() EN EL CSS GRID?

vh (Viewport Height)
Medición basada en la altura de la pantalla. Por ejemplo si damos una altura a un elemento de height: 100vh;, este elemento tendrá la misma altura que la pantalla.

vw (Viewport Width)
Medición basada en lo ancho de la pantalla. Por ejemplo si damos un ancho a un elemento de width: 100vw;, este elemento tendrá lo mismo ancho que lo ancho que la pantalla.

% (Porcentaje)
Medición basado en porcentaje. La medición en porcentaje será definida en relación a su elemento padre, a menos que éste se acompañe de una posición fija (position:fixed;) o absoluta (position:absolute;), que entonces en este caso su comportamiento ahora también respetará el tamaño de la pantalla.

El min-width y max-width : Equivale a decir lo minimo es 320 pero si el contenido se pasa entonces crece pero hasta 500(ancho)
El min-height y max-height: La altura minima es tanto, pero si el contenido se pasa; crece hasta tanto…

Voy a hacer uso de mi pregunta boluda. Es algo que no se y siempre olvido de investigar. En el minuto 6.50 agrega un <p> lorem <p> y utiliza un atajo para la identación. Alguno podría facilitarme esa información?? Gracias…

me llamó la atención como se utiliza la línea de margin: 0 auto; para centrar el contenido de section. Lo que hace el que el margen superior e inferior son de 0, pero en auto quiere decir que el espacio restante de los márgenes izquierdo y derecho se reparten a la mitad equitativamente. Por eso sirve para centrar sin utilizar tipos de display como flex.

Min/Max Width

min-width y min-height permiten establecer un tamaño minimo en el contenedor respectivo, ej. <section style=“min-width=500px;”>. Asi como, max-width y max-height.

Resumen
Para esta clase se explico las ultimas cuatro medidas relativas que estaban pendientes las cuales son:

1. max-width y max-height
2. min-width y min-height
3. vw (viewport width)
4. vh (viewport height)

Para el ejemplo de esta clase se hizo lo siguiente:

1. Crear etiquetas <main> y dentro de ellas etiquetas <section> para agregarle estilos.

2. En style.css es buena práctica comenzar con:

   * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
   }
   

Selector universal con las siguientes reglas

1. Agregar estilos al main con:

   main {
     width: 100vw;
     height: 100vh;
     background-color: purple;
   }
   

Se esta utilizando el view port width y height con un fondo purple para ver el resultado del ejemplo

1. Agregarle estilos al section con:

section {
  width: 100%;
  min-width: 320px;
  max-width: 500px;
  height: 850px;
  background-color: red;
  margin: 0 auto;
}

Se utilizan en min-width y max-width

Cuando se trabaje con Height max o min es de tener cuidado con la cantidad de contenido ya que si excede el espacio se sale del contenedor lo que es conocido como overflow

Esta clase debería ser mas definida

La propiedad margin en CSS se utiliza para establecer los márgenes alrededor de un elemento. Los márgenes crean espacio adicional fuera del borde de un elemento y ayudan a controlar el espaciado entre elementos en una página web. La propiedad margin puede tener uno, dos, tres o cuatro valores, que representan los márgenes en la parte superior, derecha, inferior e izquierda, respectivamente.

RECONDADO PARA los que quieren saber la diferencia entre width: 100%; y width: 100vw;
https://www.youtube.com/watch?v=_3FpdC_hLHA

vh/vw y min/max width/height

vh y vw

“vw” y “vh” son unidades de medida en CSS que se utilizan para dimensionar elementos de manera proporcional al tamaño de la ventana del navegador. “vw” representa el 1% del ancho total de la ventana del navegador, mientras que “vh” representa el 1% de la altura total de la ventana del navegador.

Estas unidades son útiles para crear diseños responsivos y escalables, ya que permiten dimensionar elementos de manera proporcional al tamaño de la ventana del navegador. Sin embargo, es importante tener en cuenta que estas unidades pueden verse afectadas por las barras de desplazamiento del navegador y se deben asegurar de que los elementos dimensionados con “vw” y “vh” sean responsivos y se adapten correctamente a distintos tamaños de pantalla.

main{
    width: 85vw; /* 85% */
    height: 80vh; /* 80% */
}

min/max height/width

Min-height: se utiliza para definir la altura mínima de un elemento dado. Impide que el valor de la propiedad height llegue a ser más pequeña que la especificada en la altura mínima ( min-height ). Se refiere a la altura del bloque contenedor.

Max-height: se utiliza para definir la altura máxima de un elemento dado. Impide que el valor de la altura pueda llegar a ser más grande que la de max-height . Porcentajes: se refiere a la altura del bloque contenedor.

Min-width: se usa para determinar la anchura mínima de un elemento. Previene que la propiedad width pueda ser inferior que min-width . Aplicable a: elementos de tipo bloque. Porcentajes: se refieren a la anchura del bloque contenedor.

Max-width: define el ancho máximo que un elemento puede tener, max-width cambia el tamaño del elemento si el valor de width es mayor que el de max-width.

section {
    min-width: 300px;
    max-width: 500px;
    min-height: 300px;
    max-height: 500px;
}

Quieres hacer un cuadrado responsive?

Width: 30vw;
Height: 30vw;

Esto hará que al ancho sea un 30 %del ancho y que la altura sea un 30 % del ancho!!!. O sea un cuadrado responsive. 😃

Comparto los apuntes de la clase 😃

Para definir estas propiedades, es necesario primero darle un alto y ancho al elementos a estilizar.

Me costo mas de lo que imaginan, tuve que recurir al aporte de un amigo pero al finan me ayudo a comprender muchisimo varios temas sobre todo que vh y vw no sayudan mucho a la hora del responsive.

Super explicado, muy claro y comprendido… hasta ahora este curso esta buenísimo.

Les dejo este aporte para complementar a lo dicho en clase

RESUMEN CLASE 36:
MAX/MIN WIDTH

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Medidas MinMax</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <main>
        <section>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos libero quasi corporis voluptas quod voluptatibus doloribus. Suscipit magnam expedita nobis deleniti fugit libero, veniam quis maxime! Vel enim debitis ea!
            Esse suscipit deleniti optio itaque nulla omnis laborum architecto similique molestias, culpa odit ducimus veritatis, dolor quo, vitae eveniet dolore accusantium consequatur cumque quasi nisi! Voluptates natus quaerat consequatur libero?
            Saepe architecto consequuntur deserunt quos, quibusdam, consequatur doloremque ad quae mollitia, corrupti optio! Ipsam, recusandae cumque esse delectus facilis quos odio accusantium consequuntur similique sunt, minima, natus sequi alias? Impedit!
            Aliquid veritatis architecto ullam non placeat repudiandae, nulla rem iste quisquam soluta cum quibusdam error, at, illo consequatur delectus blanditiis eveniet? Deserunt veritatis quia itaque repellat possimus eligendi, temporibus sequi.
            Dolores accusamus illum recusandae a ratione, ipsam quidem, sequi, necessitatibus ex eos vitae non qui. Expedita nisi fugit cumque iusto odio, sequi unde quasi numquam necessitatibus soluta deleniti voluptates? Necessitatibus!
            Delectus quasi minima voluptates eum alias quas optio, placeat ad asperiores eaque earum recusandae architecto laborum tempore accusantium vero ipsam. Ad itaque repellendus ipsam hic autem. Fugit eveniet voluptatum laboriosam.
            Aspernatur, quam dicta? Ducimus est autem pariatur eum esse cupiditate, quas neque corrupti et quia blanditiis facilis, maiores, voluptatem minus ex vero deleniti suscipit ipsa rerum? Asperiores dolore voluptatibus excepturi!
            Nobis minus in distinctio praesentium deserunt. Accusamus et, consequuntur, sequi esse quas, eius ad fugiat rerum dolorem hic eos doloremque eaque. Ut cumque quis quos quibusdam ducimus atque rem perferendis.</p>
        </section>
    </main>
</body>
</html>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

main {
    width: 100vw;
    height: 100vh;
    background-color: blueviolet;
}

section {
    width: 80%;
    min-width: 320px;
    max-width: 500px;
    min-height: 500px;
    margin: 0 auto;
    background-color: red;
}

• {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  }

main {
width: 100vw;
height: 100vh;
background-color: purple;
}

section {
width: 80%;
min-width: 320px;
max-width: 500px;
min-height: 500px;
margin: 0 auto;
background-color: red;
}

Información resumida de esta clase
#EstudiantesDePlatzi

• Para centrar el estilo de un contenedor podemos usar margin o auto

• Cuando vayamos a utilizar el min o max para especificar el width, es importante tener un width base que esté en porcentaje

• Cuando utilizamos el min-width especificamos a que tamaño como mínimo debería llegar el contenido y de allí no reducir más

• cuando utilizamos el max-width especificamos a que tamaño como máximo debería llegar el contenido y de allí no aumentar más

• Esta es una manera de hacer contenedores flexibles

• Cuando vamos a manejar el heigth no necesitamos un heigth base, ya que utilizamos el min o max directamente con heigth

• Cuando tenemos más texto que el espacio de contenedor y este texto se sale de este, podemos decir que tenemos un problema de over-flow

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

main{
    width: 100vw;
    height: 100vh;
    background-color: purple;
}

section{
    width: 80%;
    /* Antes de agregar un min o max width o height, se debe agregar un width o height base, por lo genereal siempre en porcentaje */
    min-width: 320px;
    max-width: 500px;
    min-height: 500px;/* El contenido puede exceder el tamaño de la caja ocasionando un overflow si es que se especifica un height determinado, sin embargo, si se utiliza min-height se le dice al navegador que, su tamaño mínimo será de 500px, pero si hay más contenido, entonces que la caja crezca junto con el contenido */
    margin: 0 auto;/* Ayuda a centrar una caja */
    background-color: red;
}

Este es mi desafio

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Desafio</title>
</head>
<body>
   <div class="container">
       <div class="box" id="one">
           <p>Tokyo Revengers</p>
       </div>
       <div class="box" id="two">
           <figure class="container-img">
               <img src="https://areajugones.sport.es/wp-content/uploads/2020/06/tokyo-revengers-2021-1080x609.jpg" alt="">
           </figure>
           <p>Mientras miraba las noticias, Takemichi Hanagaki se entera de que su novia de secundaria, Hinata Tachibana, ha muerto.
                La única chica que alguna vez se fijó en él fue asesinada por un grupo de criminales conocidos como la Banda Tokyo Manji. Takemichi vive en un viejo departamento con delgadas paredes, y en su trabajo, su jefa seis años menor que él lo trata como basura. Para rematar, es un completo virgen… En la cúspide de la miseria de su vida, de repente vuelve en el tiempo doce años a sus días de secundaria. Para salvar a Hinata y cambiar el curso del tiempo, ¡el alguna vez inútil
                trabajador de medio tiempo Takemichi deberá buscar volverse el líder de la banda criminal más tenebrosa de Tokio!
           </p>
       </div>
   </div>
</body>
</html>

css

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    font-size:62.5%;
}
.container{
    display:inline-block;
    width:100vw;
   height:100vh;
   font-size:1.8rem;
   text-align: center;
  
}
.box {
    
    border: 1px solid black;
      border-radius: 4rem;
        margin:0 auto;
   
} 
#two{
width: 40%;
min-height: 400px;
padding:3rem 2rem;
background:rgb(212, 212, 212);
}
#one{
    width: 20%;
    height:5rem;
    padding:1rem 2rem;
    position: relative;
    top:2rem;
    background-color :red;
}
.container-img img{
    width: 30rem;

   
}

• margin: 0 auto; significa que no se agregará nada arriba y abajo, pero a los lados se centrará automáticamente en relación con la ventana.

• min-width: 320px; hará que el ancho de la pantalla siempre ocupe el 80% hasta que llegue a 320px. Es decir, al llegar a 320px, sólo se verá el section.

• max-width: 500px; hará que el ancho del estilo aplicado ocupe el 100% de la pantalla hasta llegar a 500px. A partir de allí se generarán unas bandas.

• Puede ser que nuestro texto ocupe más tamaño del que le asignamos a su contenedor. Para ello, solo debemos agregar el min a nuestro height. Ej: ```
  min-height: 500px;

Si quieren recordar lo visto en las clases de manera sencilla pueden utilizar la plataforma Notion.site , aca pueden crear sus propias notas y exportarlas cuando la necesiten aparte si quieren que sus notas sean publicas tmabien es posible.

• Min-height: se utiliza para definir la altura mínima de un elemento dado. Impide que el valor de la propiedad height llegue a ser más pequeña que la especificada en la altura mínima ( min-height ). Se refiere a la altura del bloque contenedor.

• Max-height: se utiliza para definir la altura máxima de un elemento dado. Impide que el valor de la altura pueda llegar a ser más grande que la de max-height . Porcentajes: se refiere a la altura del bloque contenedor.

• Min-width: se usa para determinar la anchura mínima de un elemento. Previene que la propiedad width pueda ser inferior que min-width . Aplicable a: elementos de tipo bloque. Porcentajes: se refieren a la anchura del bloque contenedor.

• Max-width: define el ancho máximo que un elemento puede tener, max-width cambia el tamaño del elemento si el valor de width es mayor que el de max-width.

**lorem*8 + TAB: ** Te agrega 8 párrafos de lorem ipsum
Tienes q tener instalado previamente EMMET

33. Mis apuntes sobre: “Max/Min width”

Les comparto el código de la clase:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    <main>
        <section>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur magni praesentium exercitationem tempore. Voluptates repellendus odit itaque quia omnis? Cum repellat labore culpa animi libero. Dolorem dolores optio blanditiis accusamus.
            Corrupti vero nam excepturi odio quisquam vel dolorem quae illum ad. Ducimus, quibusdam quos nulla vel libero unde! Quae mollitia iste, expedita in veritatis quam ex a. At, ducimus ullam.
            Eius accusantium quidem unde alias eos molestiae accusamus, incidunt error fugit explicabo cum, quae aspernatur. Recusandae commodi, impedit aperiam, natus a laboriosam reiciendis accusamus cupiditate eum aspernatur tempore neque consequuntur!
            Assumenda saepe accusamus nihil reiciendis nisi, facere optio est fugit minus quaerat aliquid molestias ullam sit. Earum non labore nostrum ullam numquam facere rerum totam at aperiam animi. Debitis, corporis!
            Odit voluptatem quisquam delectus quis eum commodi ducimus! Id quae sed provident architecto repellendus quasi saepe at sequi! Architecto assumenda soluta facere suscipit sint doloremque eaque eos velit voluptatibus qui.
            Tenetur a nobis alias iusto consectetur dicta voluptas magnam quam optio consequatur suscipit libero eligendi autem in exercitationem, quaerat aspernatur laudantium, inventore aliquam expedita tempora quidem quis earum? Praesentium, veniam?
            Incidunt suscipit nemo laudantium hic, officia sit esse? Id nobis saepe dolore officia laborum consectetur beatae commodi nisi reprehenderit, provident, similique, ducimus ab. Sapiente at soluta hic nesciunt? Numquam, ipsam?
            Itaque suscipit non omnis placeat unde alias nostrum ducimus sunt at inventore quis earum, delectus explicabo ipsa minima, provident hic mollitia fuga eligendi, nihil asperiores fugit tempore nulla modi? Fuga!</p>
        </section>
    </main>
</body>
</html>

CSS:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

main {
    width: 100vw;
    height: 100vh;
    background-color: purple;
}

section {
    width: 50%;
    min-width: 320px;
    max-width: 100%;
    min-height: 500px;
    margin: 0 auto;
    background-color: red;
    color: white;
}

atajo para Toggle Word Wrap alt + z

Todo iba de maravilla hasta esta clase, he quedado perdido 😢

Estableciendo estilos al contenedor main en relación al Viewport de nuestro proyecto.

Resumen del capitulo en Notion
https://acortar.link/JlKAh

quede medio perdido jajaja necesito ver este video al menos 3 veces ajaja

Podemos definir el Viewport, como:
“Area disponible en pantalla al renderizar un sitio web.”

Pueden utilizar el

min-height: 0 auto;

Para que crezca de acuerdo su contenido automáticamente.

Que buena clase!!

Toggle Word Wrap = Alt + z

Una propuesta:

19/03/2024

Pablo Figueroa-

margin-inline

/* Antes */
{
margin-left: auto;
margin-right: auto;
}

/* Ahora */
{
margin-inline: auto;
}

Usar la propiedad box-sizing

La propiedad box-sizing determina cómo se calculan la anchura y la altura de un elemento. De forma predeterminada, se establece en content-box, lo que significa que la anchura y la altura solo incluyen el área de contenido, no el relleno, el borde o el margen. Esto puede provocar resultados inesperados al aplicar relleno o borde a un elemento, ya que aumentará su tamaño y podría desbordar su contenedor. Para evitar esto, puede usar la propiedad box-sizing con el valor de border-box, lo que significa que el ancho y el alto incluyen el contenido, el relleno y el borde, pero no el margen. De esta manera, puede controlar el tamaño de un elemento de manera más fácil y consistente en todos los navegadores.
Para más…