Hola a todos, y una vez más, bienvenidos al curso de CSS 3 en progrademia.com
En esta séptima clase, conoceremos dos conceptos fundamentales a la hora de desarrollar páginas web. Estos son Display y Position.
Hablamos de dos propiedades, con las que podremos modificar, o mejorar el posicionamiento de cada uno de los elementos en una página web.
También veremos el valor flex, que nos permite que nuestro contenido sea flexible.
¡Vamos a ello!
CÓDIGO DE EJEMPLO:
<!DOCTYPE html>
<html>
<head>
<title>Display con aside, article...</title>
<style>
header{
width: 100%;
height: 100px;
background-color: red;
}
div {
display: flex;
flex-direction: column;
flex: auto;
border: 2px solid black;
}
article{
display: inline-block;
flex: auto;
background-color: grey;
width: 200px;
position: absolute; top: 20px; left: 200px;
}
aside{
display: inline-block;
background-color: pink;
position: relative;
top: 20px;
left: 200px;
}
article p {
position: relative;
top: 10px;
left: 10px;
}
footer{
width: 100%;
height: 20px;
background-color: green;
}
</style>
</head>
<body>
<header></header>
<div>
<article> <p> Articulo</p></article>
<aside> <p> Publicidad</p></aside>
</div>
<footer></footer>
</body>
</html>