# Cheatsheet Box-model

### cores
nomes de cores (red, white), hexadecimais (#FFFFFF, #F0F0F0), RGB (rgb(255, 0, 0), rgb(255, 255, 255)) e outros.
referência: [W3 Schools Unidades de cores](https://www.w3schools.com/cssref/css_colors_legal.asp)

### unidades de tamanho
px, em, rem, vh, e outros
referência: [W3 Schools Unidades de tamanho/posição](https://www.w3schools.com/cssref/css_units.asp)

## Box model

ordem: conteúdo, padding, borda, margem

| Nome | Descrição | Valores |
| ----------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [`padding`](https://www.w3schools.com/css/css_padding.asp) | **Shorthand** para as propriedades `padding-top`, `padding-right`, `padding-bottom` e `padding-left` | [**unidades de tamanho**](#unidades-de-tamanho) (1 unidade para todos os lados, 2 unidades para top/bottom e left/right, 3 unidades para top, left/right e bottom e 4 unidades para top, right, bottom e left) |
| [`margin`](https://www.w3schools.com/css/css_margin.asp) | **Shorthand** para as propriedades `margin-top`, `margin-right`, `margin-bottom` e `margin-left` | [**unidades de tamanho**](#unidades-de-tamanho) (1 unidade para todos os lados, 2 unidades para top/bottom e left/right, 3 unidades para top, left/right e bottom e 4 unidades para top, right, bottom e left) |
| [`border`](https://www.w3schools.com/css/css_border.asp) | **Shorthand** para as propriedades `border-width`, `border-style` e `border-color` | `border-width` `border-style` `border-color` |
| [`border-width`](https://www.w3schools.com/css/css_border_width.asp) | Diz a grossura da borda | [**unidades de tamanho**](#unidades-de-tamanho) |
| [`border-style`](https://www.w3schools.com/css/css_border_sides.asp) | Diz o estilo da borda | `dotted` `solid` `double` `dashed` |
| [`border-color`](https://www.w3schools.com/css/css_border_color.asp) | Diz a cor da borda | [**cores**](#cores) |
| [`border-radius`](https://www.w3schools.com/css/css_border_rounded.asp) | Diz o quanto os cantos da borda devem ser arredondados | [**unidades de tamanho**](#unidades-de-tamanho) |
| [`box-sizing`](https://www.w3schools.com/css/css3_box-sizing.asp) | Diz como calcular o tamanho para o conteudo do elemento | `content-box`: (`width` = **conteudo** + padding + border) ou `border-box`: (**conteudo** = `width` - (padding + border)) |

###### tags: `cheatsheet` `front-end` `módulo 1`