files/es/web/css/layout_mode/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

---
title: Layout mode
slug: Web/CSS/Layout_mode
tags:
  - CSS
  - Layout
  - Referencia
translation_of: Web/CSS/Layout_mode
---
<div>{{cssref}}</div>

<p>Un <strong>modo de diseño</strong> <a href="https://developer.mozilla.org/es/docs/Web/CSS">CSS</a>(CSS layout mode), a veces simplemente llamado "<em>layout</em>", es un algoritmo que determina la posición y tamaño de cajas basado en la forma en la que interactúan con sus (elementos) hermanos y padres. Hay varios de ellos:</p>

<ul>
 <li>El <em>block layout</em>, diseñado para presentar documentos. El block layout contiene características de documento-centrado, como la capacidad de <a href="https://developer.mozilla.org/es/docs/Web/CSS/float">flotar</a>(<em>float</em>) elementos o distribuirlos en <em><a href="https://developer.mozilla.org/es/docs/Columnas_con_CSS-3">múltiples columnas.</a></em></li>
 <li>El <em>inline layout,</em> diseñado para presentar texto.</li>
 <li>El <em>table layout</em>, diseñado para presentar tablas.</li>
 <li>El <em>positioned layout</em>, diseñado para posicionar elementos sin demasiada interacción con otros elementos. </li>
 <li>El <em><a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Conceptos_Basicos_de_Flexbox">flexible box layout</a></em>, diseñado para presentar páginas complejas que pueden redimensionarse de forma fluida.</li>
 <li>El <em><a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Grid_Layout">grid layout</a></em>, diseñado para presentar elementos relativos a una cuadrícula fija (fixed grid).</li>
</ul>

<div class="note">
<p><strong>Nota: </strong>No todas las <a href="https://developer.mozilla.org/es/docs/Web/CSS/Referencia_CSS">propiedades CSS</a> aplican a todos los <em><strong>modos de diseño</strong></em>. La mayoría de ellos aplican a uno o dos de ellos y no tienen efecto si se configuran en un elemento que es parte de otro modo de diseño.</p>
</div>

<h2 id="Ver_También">Ver También</h2>

<ul>
 <li>{{CSS_key_concepts}}</li>
</ul>