5.6 Layout e Modelo de Caixa

Box Model (modelo de caixa)

Todo elemento em uma página é tratado como uma caixa. O modelo de caixa é formado por:

luaCopiar código+-----------------------------+
|        margin (externo)    |
|  +-----------------------+ |
|  |     border (borda)    | |
|  |  +-----------------+  | |
|  |  | padding (interno)|  | |
|  |  |    conteúdo      |  | |
|  |  +-----------------+  | |
|  +-----------------------+ |
+-----------------------------+

Propriedade display: block, inline, inline-block, none

• block: ocupa toda a linha (ex: <div>, <p>).

• inline: fica na mesma linha de outros (ex: <span>, <a>).

• inline-block: fica na linha, mas aceita tamanho e margem.

• none: oculta o elemento.

Propriedade position: static, relative, absolute, fixed, sticky

• static: padrão.

• relative: move em relação à posição original.

• absolute: move em relação ao parente mais próximo com position.

• fixed: fica fixo na tela (ex: menu que não some).

• sticky: gruda ao rolar, até certo ponto.

Margens e preenchimentos

Já vimos margin e padding, mas podemos especificar os lados:

cssCopiar códigomargin-top: 10px;
padding-left: 20px;

Alinhamento de texto

Além do text-align, podemos centralizar usando margin:

cssCopiar códigodiv {
  margin: 0 auto;
  width: 300px;
}

overflow

Controla o que acontece se o conteúdo passar do tamanho do elemento:

cssCopiar códigodiv {
  overflow: hidden;
}

Outros valores: visible, scroll, auto.

visibility

Controla se o elemento é visível ou não, mas sem tirar ele do lugar.

cssCopiar códigodiv {
  visibility: hidden;
}

z-index

Controla a ordem de sobreposição dos elementos:

cssCopiar códigodiv {
  z-index: 10;
  position: absolute;
}