path: root/files/es/web/css/introducción/layout/index.html

---
title: Layout
slug: Web/CSS/Introducción/Layout
translation_of: Learn/CSS/CSS_layout
---
<p>{{ CSSTutorialTOC() }}</p>

<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes", "Boxes")}}Esta es la 12ª sección del tutorial CSS Getting Started; Describe algunas maneras de ajustar el diseño de su documento. Cambia el diseño de su documento de ejemplo.</p>

<h2 class="clearLeft" id="Informacion_Layout">Informacion: Layout</h2>

<p>Puede utilizar CSS para especificar varios efectos visuales que cambian el diseño de su documento. Algunas de las técnicas para especificar el diseño son avanzadas, y más allá del alcance de este tutorial básico.</p>

<p>Cuando diseña un diseño para que se vea similar en muchos navegadores, su hoja de estilo interactúa con la hoja de estilo y el motor de diseño predeterminados del navegador de formas que pueden ser complejas. Este es también un tema avanzado, más allá del alcance de este tutorial básico.</p>

<p>Esta página describe algunas técnicas sencillas que puedes probar.</p>

<h3 id="Estructura_del_documento">Estructura del documento</h3>

<p>Si desea controlar el diseño de su documento, es posible que deba cambiar su estructura.</p>

<p>El lenguaje de marcado del documento puede tener etiquetas de propósito general para crear la estructura. Por ejemplo, en HTML puede utilizar el elemento {{HTMLElement ('div')}} para crear una estructura.</p>

<div class="tuto_example">
<div class="tuto_type">
<p>Ejemplo</p>

<p>En su documento de ejemplo, los párrafos numerados en el segundo encabezado no tienen un contenedor propio.</p>

<p>Su hoja de estilo no puede dibujar un borde alrededor de esos párrafos, porque no hay ningún elemento que especificar en el selector.</p>

<p>Para solucionar este problema estructural, puede agregar una etiqueta {{HTMLElement ('div')}} alrededor de los párrafos. Esta etiqueta es única, por lo que puede identificarse con un atributo id:</p>
</div>

<pre class="brush:html;highlight:[2,8]">&lt;h3&gt;Numbered paragraphs&lt;/h3&gt;
&lt;div id="numbered"&gt;
  &lt;p&gt;Lorem ipsum&lt;/p&gt;
  &lt;p&gt;Dolor sit&lt;/p&gt;
  &lt;p&gt;Amet consectetuer&lt;/p&gt;
  &lt;p&gt;Magna aliquam&lt;/p&gt;
  &lt;p&gt;Autem veleum&lt;/p&gt;
&lt;/div&gt;
</pre>

<p>Ahora su hoja de estilos puede utilizar una regla para especificar bordes alrededor de ambas listas:</p>

<pre class="brush:css">ul, #numbered {
  border: 1em solid #69b;
  padding-right:1em;
}
</pre>

<p>  El resultado se ve así: </p>

<table style="background-color: white; border: 2px outset #3366bb; padding: 1em; width: 30em;">
 <tbody>
  <tr>
   <td>
    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>

    <div style="border: 12px solid #69b; margin-bottom: 16px; padding: 1em;">
    <ul style="">
     <li>Arctic</li>
     <li>Atlantic</li>
     <li>Pacific</li>
     <li>Indian</li>
     <li>Southern</li>
    </ul>
    </div>

    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p>

    <div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;">
    <p><strong>1: </strong>Lorem ipsum</p>

    <p><strong>2: </strong>Dolor sit</p>

    <p><strong>3: </strong>Amet consectetuer</p>

    <p><strong>4: </strong>Magna aliquam</p>

    <p><strong>5: </strong>Autem veleum</p>
    </div>
   </td>
  </tr>
 </tbody>
</table>
</div>

<h3 id="Unidades_de_tamaño">Unidades de tamaño</h3>

<p>Hasta ahora en este tutorial, se han especificado tamaños en píxeles (px). Estos son apropiados para algunos propósitos en un dispositivo de visualización como una pantalla de computadora. Pero cuando el usuario cambia el tamaño de fuente, su diseño puede parecer incorrecto.</p>

<p>Para muchos propósitos es mejor especificar tamaños como un porcentaje o en ems (em). Un em es nominalmente el tamaño de la fuente actual (el ancho de una letra m). Cuando el usuario cambia el tamaño de fuente, su diseño se ajusta automáticamente.</p>

<div class="tuto_example">
<div class="tuto_type">
<p>Ejemplo</p>

<p>El borde a la izquierda de este texto tiene su tamaño especificado en píxeles.</p>

<p>El borde de la derecha tiene su tamaño especificado en ems.</p>

<p>En su navegador, cambie el tamaño de la fuente para ver cómo se ajusta el borde de la derecha pero el borde de la izquierda no:</p>
</div>

<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
 <tbody>
  <tr>
   <td>
    <div style="">RESIZE ME PLEASE</div>
   </td>
  </tr>
 </tbody>
</table>
</div>

<div class="tuto_details">
<div class="tuto_type">
<p>Más detalles</p>

<p>Para otros dispositivos, otras unidades de longitud son apropiadas.</p>

<p>Hay más información sobre esto en una página posterior de este tutorial.</p>

<p>Para obtener detalles completos de los valores y unidades que puede utilizar, consulte Valores en la especificación CSS.</p>
</div>
</div>

<h3 id="Diseño_del_texto">Diseño del texto</h3>

<p>Dos propiedades especifican cómo está alineado el contenido de un elemento. Puede usarlos para ajustes sencillos de diseño:</p>

<p>{{Cssxref ('text-align')}}</p>

<p><br>
   Alinea el contenido. Utilice uno de estos valores: izquierda, derecha, centro, justificar<br>
 {{Cssxref ('texto-sangría')}}<br>
     Indente el contenido en una cantidad que especifique.</p>

<p>Estas propiedades se aplican a cualquier contenido similar al texto del elemento, no sólo al texto real. Recuerde que son heredados por los hijos del elemento, por lo que es posible que tenga que desactivarlos explícitamente en los niños para evitar resultados sorprendentes.</p>

<div class="tuto_example">
<div class="tuto_type">
<p>Ejemplo</p>

<p>Para centrar los títulos:</p>
</div>

<pre class="brush:css">h3 {
  border-top: 1px solid gray;
  text-align: center;
}
</pre>

<p>Resultado:</p>

<table style="background-color: white; border: 2px outset #3366bb; padding: 1em; width: 30em;">
 <tbody>
  <tr>
   <td>
    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray; text-align: center;">(A) The oceans</p>
   </td>
  </tr>
 </tbody>
</table>

<p>En un documento HTML, el contenido que ve debajo de un encabezado no está estructuralmente contenido por el encabezado. Así que cuando alineas un encabezado como este, las etiquetas debajo del encabezado no heredan el estilo.</p>
</div>

<h3 id="Floats">Floats</h3>

<p>La propiedad {{cssxref ('float')}} fuerza un elemento a la izquierda oa la derecha. Esta es una forma sencilla de controlar su posición y tamaño.</p>

<p>El resto del contenido del documento fluye normalmente alrededor del elemento flotante. Puede controlar esto usando la propiedad {{cssxref ('clear')}} en otros elementos para hacerlos permanecer alejados de los flotadores.</p>

<div class="tuto_example">
<div class="tuto_type">
<p>Ejemplo</p>

<p>En el documento de ejemplo, las listas se extienden por la ventana. Puede evitarlo flotando hacia la izquierda.</p>

<p>Para mantener los encabezados en su lugar, también debe especificar que se mantengan alejados de los flotadores a su izquierda:</p>
</div>

<pre class="brush:css">ul, #numbered {float: left;}
h3 {clear: left;}
</pre>
</div>

<p>El resultado sería:</p>

<table style="background-color: white; border: 2px outset #3366bb; padding: 1em; width: 30em;">
 <tbody>
  <tr>
   <td>
    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>

    <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;">
    <ul style="">
     <li>Arctic</li>
     <li>Atlantic</li>
     <li>Pacific</li>
     <li>Indian</li>
     <li>Southern</li>
    </ul>
    </div>

    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p>

    <div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;">
    <p><strong>1: </strong>Lorem ipsum</p>

    <p><strong>2: </strong>Dolor sit</p>

    <p><strong>3: </strong>Amet consectetuer</p>

    <p><strong>4: </strong>Magna aliquam</p>

    <p><strong>5: </strong>Autem veleum</p>
    </div>
   </td>
  </tr>
 </tbody>
</table>

<p>(Un poco de relleno es necesario a la derecha de las cajas, donde el borde es demasiado cerca del texto.)</p>

<h3 id="Posicionamiento">Posicionamiento</h3>

<p>Puede especificar la posición de un elemento de cuatro formas especificando la propiedad {{cssxref ('position')}} y uno de los siguientes valores.</p>

<p>Estas son propiedades avanzadas. Es posible utilizarlos de manera sencilla, por eso se mencionan en este tutorial básico. Pero puede ser difícil usarlos para diseños complejos.</p>

<p>relativo</p>

<p><br>
   La posición del elemento se desplaza en relación con su posición normal. Utilícelo para desplazar un elemento por una cantidad especificada. A veces se puede utilizar el margen del elemento para lograr el mismo efecto.<br>
 fijo<br>
     La posición del elemento es fija. Especifique la posición del elemento en relación con la ventana del documento. Incluso si el resto del documento se desplaza, el elemento permanece fijo.<br>
 absoluto<br>
     La posición del elemento es fija con relación a un elemento padre. Sólo un padre que está posicionado con relativo, fijo o absoluto hará. Puede hacer que cualquier elemento padre sea adecuado especificando position: relative; Para ello sin especificar ningún cambio.<br>
 estático<br>
     El valor por defecto. Utilice este valor si necesita desactivar la posición de forma explícita.</p>

<p>Junto con estos valores de la propiedad de posición (a excepción de estática), especifique una o más de las propiedades: superior, derecha, inferior, izquierda, anchura, altura para identificar dónde desea que aparezca el elemento y tal vez también su tamaño.</p>

<div class="tuto_example">
<div class="tuto_type">
<p>Ejemplo</p>

<p>Para colocar dos elementos uno encima del otro, cree un contenedor principal en el documento con los dos elementos dentro de él:</p>
</div>

<pre class="brush:html">&lt;div id="parent-div"&gt;
  &lt;p id="forward"&gt;/&lt;/p&gt;
  &lt;p id="back"&gt;\&lt;/p&gt;
&lt;/div&gt;
</pre>

<p>En su hoja de estilos, haga que la posición de los padres sea relativa. No hay necesidad de especificar ningún cambio real. Haga que la posición de los niños sea absoluta:</p>

<pre class="brush:css">#parent-div {
  position: relative;
  font: bold 200% sans-serif;
}

#forward, #back {
  position: absolute;
  margin:0px; /* no hay margenes alrededor del elemento */
  top: 0px; /* distancia desde la parte superior */
  left: 0px; /* distancia desde la izquierda */
}

#forward {
  color: blue;
}

#back {
  color: red;
}
</pre>

<p>El resultado se ve así, con la barra invertida en la parte superior de la barra inclinada:</p>

<div style="position: relative; left: .33em; font: bold 300% sans-serif;">
<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: blue;">/</p>

<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: red;">\</p>
</div>

<table style="background-color: white; border: 2px outset #3366bb; height: 5em; padding: 1em; width: 30em;">
 <tbody>
  <tr>
   <td> </td>
  </tr>
 </tbody>
</table>
</div>

<div class="tuto_details">
<div class="tuto_type">
<p>Más detalles</p>

<p>La historia completa sobre posicionamiento toma dos capítulos complejos en la Especificación CSS: Modelo de formato visual y detalles del modelo de formato Visual.</p>

<p>Si está diseñando hojas de estilo para trabajar en muchos navegadores, también debe tener en cuenta las diferencias en la forma en que los navegadores interpretan el estándar y quizás errores en versiones concretas de navegadores particulares.</p>
</div>
</div>

<h2 id="Action_Specifying_layout">Action: Specifying layout</h2>

<ol>
 <li>Cambie el documento de ejemplo, doc2. Html y hoja de estilo, style2. Css, utilizando los ejemplos anteriores en las secciones Estructura de documento y flotantes.</li>
 <li>En el ejemplo Flotantes, agregue relleno para separar el texto del borde derecho por 0. 5 em.</li>
</ol>

<div class="tuto_example">
<div class="tuto_type">
<p>Cambios</p>

<p>Cambie el documento de ejemplo, doc2. Html, agregando esta etiqueta a ella cerca del final, justo antes de &amp;lt;/ body&amp;gt;.</p>
</div>

<pre class="brush:html">&lt;img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"&gt;
</pre>

<p>Si no descargó el archivo de imagen anteriormente en este tutorial, descárguelo ahora y colóquelo en el mismo directorio que los demás archivos de ejemplo:</p>

<table style="border: 2px solid #cccccc;">
 <tbody>
  <tr>
   <td><img alt="Image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"></td>
  </tr>
 </tbody>
</table>

<p>Predecir dónde aparecerá la imagen en el documento. A continuación, actualice su navegador para ver si estaba correcto.</p>

<p>Agregue una regla a su hoja de estilos que coloque la imagen en la parte superior derecha de su documento.</p>

<p>Actualiza tu navegador y haz que la ventana sea pequeña. Compruebe que la imagen permanece en la parte superior derecha incluso cuando se desplaza el documento:</p>

<div style="position: relative; width: 29.5em; height: 18em;">
<div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;">
<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>

<div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;">
<ul style="">
 <li>Arctic</li>
 <li>Atlantic</li>
 <li>Pacific</li>
 <li>Indian</li>
 <li>Southern</li>
</ul>
</div>

<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p>

<div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;">
<p><strong>1: </strong>Lorem ipsum</p>

<p><strong>2: </strong>Dolor sit</p>

<p><strong>3: </strong>Amet consectetuer</p>

<p><strong>4: </strong>Magna aliquam</p>

<p><strong>5: </strong>Autem veleum</p>
</div>

<p style=""> </p>

<div style="position: absolute; top: 2px; right: 0px;"><img alt="Yellow map pin" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"></div>
</div>
</div>
</div>

<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Layout" title="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Layout"> See a solution to this challenge.</a></p>

<h2 id="What_next">What next?</h2>

<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Tables") }}Usted acaba de cubrir todos los temas en este tutorial básico de CSS. La siguiente página describe selectores más avanzados para reglas CSS y algunas maneras específicas en las que puede diseñar tablas.</p>