Como Funcionam Width e Height?

No CSS, as propriedades width e height são usadas para controlar as dimensões dos elementos em uma página web. Essas propriedades podem ser definidas em diferentes unidades como pixels (px), porcentagens (%), unidades de viewport (vw, vh) e mais. A propriedade width especifica a largura de um elemento. Se você não especificar uma largura, o padrão será definido como auto. This lets the browser determine the element's width based on its content, parent, and display type. For a div element, width: auto makes it expand to fill the full width of its parent container. A propriedade height especifica a altura de um elemento. Da mesma forma, a altura é auto por padrão, o que significa que ela se ajustará ao conteúdo interno. Aqui está um exemplo usando as propriedades width e height:

<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: skyblue
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>

Neste exemplo, temos um elemento div com a classe chamada box. Este elemento ocupará 100px de altura e largura, enquanto a cor de fundo será skyblue. Pixels são uma unidade de medida de tamanho fixo em CSS, proporcionando controle preciso sobre as dimensões. A propriedade min-width especifica a largura mínima que um elemento pode ter. Mesmo que o conteúdo interno seja menor, o elemento não encolherá abaixo desse valor. O min-height especifica a altura mínima que um elemento pode ter. Ele garante que o elemento não fique menor que o valor definido. Aqui está um exemplo:

<head>
  <style>
    .box {
      width: 50px;
      min-width: 100px;
      height: 50px;
      min-height: 100px;
      background-color: lightcoral;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>

O exemplo acima demonstra como min-width e min-height funcionam. Embora a caixa tenha seu width e height definidos para 50px, ela será na verdade 100px por 100px. Isso ocorre porque o min-width e o min-height estão definidos como 100px, que são maiores do que o width e o height especificados. Lembre-se, se min-width ou min-height forem maiores que o width ou height, eles substituirão os valores menores. Isso garante que os elementos não fiquem muito pequenos, o que é importante para manter um design consistente e utilizável. O max-width especifica a largura máxima que um elemento pode alcançar, mesmo que haja espaço suficiente para que ele seja mais largo. O max-height especifica a altura máxima que um elemento pode atingir, independentemente do tamanho do conteúdo. Aqui está um exemplo:

<head>
  <style>
    .box {
      width: 200px;
      max-width: 150px;
      height: 200px;
      max-height: 150px;
      background-color: lightgreen;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>

O exemplo acima demonstra como max-width e max-height substituem width e height. Embora a caixa esteja configurada para 200px por 200px, ela será na verdade 150px por 150px. Isso ocorre porque o max-width e o max-height estão definidos como 150px, que é menor. Lembre-se, quando max-width ou max-height são menores que width ou height, eles têm precedência. Isto é importante para controlar o tamanho máximo dos elementos em seus layouts. O CSS prioriza min-width e min-height sobre width e height. max-width e max-height restringem as dimensões se os valores excederem seus limites. Por exemplo, se você definir width para 600px e max-width para 500px, o elemento será limitado a 500px de largura. O max-width substitui a configuração mais larga, mantendo o elemento dentro do tamanho máximo especificado. Isso garante que os elementos permaneçam dentro das faixas de tamanho desejadas, independentemente dos valores padrão de largura e altura.

Este módulo não possui perguntas. Marque como concluído.

Como Funcionam Width e Height?

Concluído!