Elemento h2
Elemento p
h2
p
Conceptos a tratar:
Características:
Elementos block en HTML:
<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<h1-h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<footer>
<ul>
<video>
En este ejemplo los 3 elementos bloque se colocan uno encima de otro:
Abajo, elementos block, aún sin propiedades de posicionamiento insertadas en los elementos; aunque sí con dimensiones (width: 100px; height: 100px;). De haber más elementos estos se colocarán uno encima de otro, de arriba hacia abajo.
A esos mismos elementos block podemos alterar su estado con 'display: inline-block' para que se comporten como elementos en línea, sin perder su estado de 'colisión' con otro elemento block (al estirar el ancho del navegador estos elementos se re-adaptarán en su esquema):
Así mismo se puede alterar el ancho y las esquinas (con 'border-radius:..;) de algunos elementos para que sigan comportándose como bloques, pero alineados horizontalmente y adaptables al ancho del navegador:
En otro nuevo ejemplo también se alteró en cada elemento su propiedad bloque ' display: inline;'. Si el ancho del navegador se reduce, entonces los elementos se readaptarán para ocupar los espacios sobrantes.
Por otro lado, es buena práctica que el elemento block sea el padre del elemento inline. Ojo: las propiedades 'margin-block-end/start' en los elementos hijos eliminaron los márgenes que por default presenta cada elemento block.
Elemento p
Luego, podemos alterar la propiedad 'block' de los elementos hijo por la propiedad 'inline' para que los elemenos se muestren uno al lado de otro:
Elemento p
Elemento p
Elemento p
Elemento p
Abajo. ya que ambos elementos tienen etiquetas diferentes en sus contenidos (uno es 'h1' y el otro 'p'), los bloques hijo con 'display: inline-block;' no están alineados horizontalmente. También, ambos elementos hijo contiene el margen natural de un elemento block. Recordar algo: el porcentaje de la propiedad 'width' en ambos elementos es la que me permite tener dos elementos por fila. Si reduzco ese porcentaje, más elementos podrán ingresar a la fila.
Elemento p
Elemento p
Elemento p
Elemento p
Abajo, ahora todos los elementos hijo tienen la misma etiqueta ('p'), se les alteró su comportamiento (de block a inline-block), se eliminó su margen natural y se alteró el ancho del % para que más elementos sean insertados por fila (cada elemento usará solo el 24% de todo el ancho disponible).
Elemento p
Elemento p
Elemento p
Elemento p
Elemento p
Elemento p
Elemento p
Elemento p
Por otro lado, la anidación de elementos bloque es interesante. Abajo están tres elementos anidados (insertados uno en otro) desde el elemento con tag main. Todos aún sin estilo en posicionamiento.
p
Ahora, con estilos en posicionamiento y dimensión pero sin eliminar los márgenes:
"Tu eres perla que surgiste del mas grande e ignoto mar, y si al son de su arrullar en jardin te convertiste"
Características:
Elementos inline en HTML:
<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<map>
<object>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>
Abajo, dos elementos inline anidados. Aunque cada elemento inline se escriba separado del otro (o con un salto de línea) el texto se mostrará uno al lado de otro, de izquierda a derecha.
Gringa loca gringa loca,
eres tu la que se quiso
casar
Ahora, los mismos elementos pero con propiedades de color, tamaño y altura de interlineado con la propiedad 'line-height: ...;'
Gringa loca gringa loca,
eres tu la que se quiso
casar
La propiedad 'position:...;' acepta los siguientes valores de posicionamiento en CSS es:
Otras propiedades de posicionamiento son:
La propiedad 'position:...;' acepta los siguientes valores de posicionamiento en CSS es:
Abajo, los cuadros amarillo y gris (block) tienen 'position: relative;' con 'left: 50%;':
En otro ejemplo, los cuadros amarillo y gris no estan dentro de un contenedor. Tienen 'position: relative;' con 'left:..;' en valores absolutos (pixeles) lo que evita que se readapten si la ventana del navegador se altera en el ancho.
Ahora los elementos están dentro de un contenedor; el recuadro amarillo con posición relativa se excede de los límites de su contenedor con 'left: 80%;'; pero el recuadro gris se mantiene en su posición con 'left: 50px;' y 'top: 50px;'. En otras palabras, los valores absolutos (como la unidad en pixeles) dan ubicación fija; mientras que los valores relativos (como los %) dan ubicación fluída según dimensiones de contenedor (o del las dimensiones de la ventana del navegador).
En otro ejemplo, solo los bloques inferiores (gris y verde) tiene activada la propiedad 'position: relative;'; pues es la única forma de darle un distanciamiento de 'top: 50px;' para ubicarlos en la actual posición. En otras palabras, la posición relativa activa también los valores top | bottom | left | right: [valor];
Sin embargo, ya que muchos de los elementos podrían contener otros elementos como texto o imágenes, vale tener en cuenta ese aspecto: únicamente la propiedad 'height: auto;' permite que el contenedor respete la cantidad de contenido, sin ocultarlo; expandiendo la altura del contenedor a lo necesario. Sin 'height: auto;' el contenido del elemento contenedor no se mostraría y el área tampoco se expandería. Finalmente, la propiedad 'padding: 15px;' únicamente en el elemento contenedor del texto '<p>' permite ajustar espacios entre contenedor padre y contenido hijo. Nota también que la separación de altura entre las dos últimas cajas (amarilla y verde) se sigue respetando gracias 'position: relative;' y 'top: 50px;' activado únicamente en esos dos elementos.
Guayaquil, oficialmente Santiago de Guayaquil, es la ciudad capital de la Provincia del Guayas y cabecera del cantón homónimo. Es la segunda ciudad más poblada del Ecuador, con una población de 2.7 millones de habitantes, y la segunda área urbana más poblada del país.
Si a tus rubias y morenas, que enloquecen de pasion les palpita el corazon que mitiga negras penas con sus ojos verdes mares o de negro anochecer,
Si a tus rubias y morenas, que enloquecen de pasion les palpita el corazon que mitiga negras penas con sus ojos verdes mares o de negro anochecer...
Si a tus rubias y morenas, que enloquecen de pasion les palpita el corazon que mitiga negras penas con sus ojos verdes mares o de negro anochecer...
Si a tus rubias y morenas, que enloquecen de pasion les palpita el corazon que mitiga negras penas con sus ojos verdes mares o de negro anochecer...
Si a tus rubias y morenas, que enloquecen de pasion les palpita el corazon que mitiga negras penas con sus ojos verdes mares o de negro anochecer...
Se debe tener en cuenta que un elemento block con 'position: absolute;' y 'top: 0px;' se ubicará en la posición vértice (0,0) de su contenedor (esquina superior izquierda de su más inmediato elemento padre). Por ejemplo, el resultado del código inferior es la barra verde (un elemento en posición absoluta) ubicado al inicio de está página, pues es esta página su contenedor inmediato
<!-- HTML -->
<div class="eleAbso1"> </div>
/* CSS */
<style>
.eleAbso1 {
width: 100%;
height: 21px;
position: absolute;
top: 0px;
background-color: yellowgreen;
}
</style>
Debido a eso es necesario anidar el elemento de posición absoluta dentro de un contenedor padre en posición relativa:
position: absolute; top: 0px;
¿Y si se añade otro elemento? Si se añade otro elemento posicionado absoluto simplemente no será mostrado; no por inexistente, sino porque este último elemento se ubicará encima del elemento absoluto anterior (se agregó una sombra para hacerlo más notorio). Para que este último elemento añadido sea mostrado, será necesario darle valores de ubicación 'left' y 'top':
Yo estoy primero en el código, soy absoluto con 'top: 0px;'
Yo llegué después, soy absoluto con 'top: 27px;'
Hasta aquí debemos recordar algunas de las propiedades de 'relative;' y 'absolute':
Así, un elemento absoluto es un estudiante obediente que únicamente se ubicará en la silla que le hemos asignado. No se moverá a menos que le sea avisado. Mientras que la posición relativa es un estudiante rebelde pero ordenado: se ubicará en la silla que le asignemos pero se ajustará si hay otros estudiantes muy cerca.
Aún así, hay que tener cuidado con la convivencia entre un elemento relativo y uno absoluto. En el ejemplo de abajo, un contenedor relativo agrupa dos elementos hijo (amarillo absoluto - gris relativo, en ese orden); ambos con los valores 'width: auto;' y 'height: 60px;'. Allí:
pos. relativa
pos. absoluta
Sin embargo y en el ejemplo de abajo: solo al intercambiar el orden de ambos elementos (en el código) da otros resultados diferentes: El elemento absoluto al no tener valores de ubicación (der., izq., arriba o abajo) se ubicará en la posición (0,0) de su contenedor, solapándose debajo del elemento relativo. Y aunque agreguemos más elementos absolutos, (cajas amarillas) todos seguirán solapándose debajo del elemento relativo hasta que le demos a las cajas amarillas algún valor de posición.
pos. absoluta
pos. relativa (amarillo absoluto está abajo de mi)
En otras palabras, debemos estar atentos en la ubicación del código de los elementos ubicados en absoluto o relativo, y hacer ajustes de posición y ordenamiento según necesidades de diseño y contenido.