# 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:

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

**Alinhamento de texto**

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

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

**`overflow`**

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

```css
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.

```css
cssCopiar códigodiv {
  visibility: hidden;
}
```

**`z-index`**

Controla a **ordem de sobreposição** dos elementos:

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