The Box Model
Para poder organizar los bordes se puede usar el modelo llamado The Box Model. La forma de este se muestra en la siguiente imagen.
Create a Border
Es posible la creacion de bordes, los cuales siguen el Box Model
mostrado, para esto se deben asignar 3 valores a border,
estos valores son thickness, type y por
ultimo color, el cual como se menciona en otra seccion
puede ser RGB o Hex o definido por CSS.
En este parrafo se muestra un ejemplo de un borde con los siguientes
valores:
boder: 2px solid black;
Padding
El Padding es usado para dar una distancia entre el border y el
elemento como tal, con el uso de esta es posible dar un espaciado con
el fin de que no quede el borde pegado al elemento.
En este parrafo se usa un padding: 20px el resto es igual
que el ejempo anterior.
Margin
Similar al caso anterior, la margen es el espacio entre un elemento y
otro, esto permite que por ejemplo dos cuadros no esten juntos entre
ellos y con esto dar una mejor visualizacion.
En este caso se usa un margin: 2rem;
En el caso de las margenes es posible asignar un valor unicamente para alguna de las caras del elemento, por ejemplo solo la superior, o la inferior o si se desea varias a la vez sin llegar a todas. Esto tambien permite que sea puedan implementar medidas independientes.
margin-topmargin-bottommargin-leftmargin-right
Understanding Display
El Display en el que se muestra el contenido de una pagina se puede
organizar de diferentes maneras, puede ser en block o
tambien es posible que sea inline, las diferencias se
muestran en la siguiente imagen.
Por defecto el Display que viene en una pagina es de tipo
block, por lo cual si se decide cambiar se puede hacer
con el uso de:
displlay: inline;
En block
En inline
Using Float
Esta manera se usa con el fin de poder acomodar los elementos de una manera mucho mas sencilla. Por ejemplo si se desea que un boton se encuentre a un costado de la pagina, en lugar de decir que tamaño de margen tener se le puede ubicar al lado derecho sin problema, aunque la pantalla cambie de tamaño este quedara en la misma posicion. Por ejemplo el siguiente boton:
Display: Flex
El uso de display:flex; permite que los elementos se
alineen de manera horizontal. Es posible realizar combinaciones que
permiten un mejor ajuste del contenido.
Si se usa un padre y un hijo, se puede hacer esto con el uso de
flex-wrap: wrap;, lo que no permite que los hijos se
muevan fuera de la pagina en caso que se cambie el tamaño.
Por ultimo esta el justify-content: center;, este permite
justificar el contenido para que se alineen de alguna manera en
especifico.
Working with Position
Funciona cuando se desea dejar el elemento en una posicion especifica
de la pagina, esto hace que el elemento se posicione en donde uno
desee segun el argumento que se desee, para esto se usa:
position: relative;
Luego de esto es posible usar top, left,
bottom y left con el fin de asignar la
posicion que se desea, por ejemplo:
position: relative;
top: 10px;
left: 50px;