IMPORTANT: Per accedir als fitxer de subversion: http://acacha.org/svn (sense password). Poc a poc s'aniran migrant els enllaços. Encara però funciona el subversion de la farga però no se sap fins quan... (usuari: prova i la paraula de pas 123456)

Vegeu també Layouts i User Interface

Layout Properties

Display

Esta propiedad especifica el tipo de caja de representación que se usará para un elemento. En un lenguaje como el HTML donde los elementos existentes tienen un comportamiento bien definido, los valores por defecto del la propiedad 'display' se toman de los comportamientos descritos en las especificaciones de HTML o de las hojas de estilo del navegador o el usuario. En lenguajes en los que el comportamiento de 'display' no está definido (como XML) el valor por defecto es: 'inline'.

Además de los muchos posibles valores permitidos para 'display', el valor "none" permite que hagamos invisible un elemento, siendo este un valor heredable, lo que hace que los elementos hijo también sean invisibles. En el árbol del documento, el elemento es inexistente. Este valor nos brinda grandes posibilidades, pero hay que usarlo con precaución.

  • inherit : Especifica el valor de este elemento igual que el de su elemento padre.
  • none : Este valor desactiva la presentación del elemento (no tiene efecto en el formato); todos los elementos hijo son escondidos de forma incondicional. El documento es representado como si el elemento y sus hijos fueran inexistentes en el árbol del documento. Para hacer que un elemento forme parte de un documento, mientras que su contenido es invisible, vea la propiedad visibility.
  • inline : Hace que el elemento genere uno o más elementos en la misma línea.
  • block : Hace que el elemento genere una caja de bloque.
  • inline-block : Valor introducido a partir de CSS 2.1. Hace que un elemento se represente como una caja seguida de forma fluida, por un contenido, como si formase parte de la misma caja.
  • list-item : Hace que un elemento genere una caja para el contenido del elemento y una caja separada en la misma línea para los elementos de la lista.
  • compact : Dependiendo del contenido, este valor crea bien un elemento caja o un elemento en línea. En cada caso se pueden aplicar distintas propiedades CSS a un elemento compacto. En un contenido de tipo caja, el elemento compacto será presentado en el margen izquierdo o a la derecho de la caja. El elemento compacto participa en el cálculo de los valores del ancho de línea para la línea corriente y del valor de la propiedad vertical-align del elemento caja.
  • run-in : Dependiendo del contenido, este valor de la propiedad display, genera o bien un elemento caja o uno en línea. En cada caso se pueden aplicar distintas propiedades CSS a un elemento. Las propiedades de un elemento run-in, son heredadas de su elemento padre en el árbol del documento, no del elemento caja del que forma parte.
  • table-header-group|table-footer-group : Este valor hace que el elemento se comporte de forma similar a las correspondientes instrucciones de tabla HTML: THEAD y TFOOT.
  • table : Este valor hace que el elemento se comporte como un elemento HTML
  • inline-table : Este valor no tiene una correspondencia directa en HTML.
  • table-caption : Este valor hace que el elemento se comporte como un elemento HTML caption.
  • table-row table-row-group : Este valor hace que el elemento se comporte como un elemento HTML tr.
  • table-cell : Este valor hace que el elemento se comporte como un elemento HTML td.
  • table-column table-column-group : Estos valores hacen que el elemento se comporte como elementos HTML col y colgroup respectivamente.

Recursos:

Position

Float

  • left — floats the element to the left.
  • right — floats the element to the right.
  • none — specified no floating at all. This is the default value.
  • inherit — specifies that the value of the float property should be inherited from the parent element.

Recursos

Tècniques per crear layouts

  • Positioning

CSS columns

CSS columns

CSS Frameworks

Recursos:

Bootstrap

Vegeu Bootstrap#Bootstrap_Grid_System i:

https://getbootstrap.com/examples/grid/
http://getbootstrap.com/css/#grid
Versió 4: https://getbootstrap.com/examples/grid/


Material

Vue -material

Vegeu vue-material

Vegeu també

Enllaços externs