web/lang/css.md

# CSS

## Size
```text
px | Pixeles
mm | Milimetros
pt | Puntos

// ! 16px por defecto | Depende del navegador
em | Herrencia [Del contenedor] px

rem | Referencia el root

vw | Viwport width [Depende de la pantalla]
vh | Viwport height [Depende de la pantalla]

% | Porcentaje
```


## Template
```css
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
```

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

/* Movil */


/* Tablet */
@media (min-width: 600px) {

}

/* Desktop 1 */
@media (min-width: 900px) {

}

/* Desktop 2 */
@media (min-width: 1200px) {

}
```

## border


```css
border-radius
```



## Flex

```css
.div-flex {
    display: flex;
}
```


### flex tag

`Flex equivalent`
```css
flex: 1;

flex: 1 1 0%;

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
```


### Order
```css
justify-content: center;
align-items: center;
```

### Example
```css
Center horizontal
<--------x-------->
justify-content: center;

 
Center vertical
^
|
|
x
|
|
v
align-items: center;
```


## Zoom

```css
/* <percentage> values */
zoom: 50%;
zoom: 200%;

/* <number> values */
zoom: 1.1;
zoom: 0.7;

/* Non-standard keyword values */
zoom: normal;
zoom: reset;

/* Global values */
zoom: inherit;
zoom: initial;
zoom: revert;
zoom: revert-layer;
zoom: unset;
```