[14.1] Propiedad display
LMSGI, módulo del ciclo de FP de Grado Superior,
Administración de Sistemas Informáticos en Red
HTML y CSS
Propiedad display
Jorge Sánchez Asenjo, 2017
www.jorgesanchez.net
[email protected]
@jorgesancheznet
1 1
introducción
• Todos los elementos tienen una forma de comportarse
visualmente
• La forma de comportarse lo controla la propiedad CSS
display
• Esta propiedad se puede modificar
HTML y CSS
Propiedad display
Jorge Sánchez Asenjo, 2017
www.jorgesanchez.net
[email protected]
@jorgesancheznet
2 2
valores para la propiedad
display
HTML y CSS
Propiedad display
Jorge Sánchez Asenjo, 2017
www.jorgesanchez.net
[email protected]
@jorgesancheznet
3 3
display:inline
• Elemento cuyo contenido se muestra en la misma línea
• Ejemplos (por defecto):
• strong
• em
• mark
• q
• span
HTML y CSS
Propiedad display
Jorge Sánchez Asenjo, 2017
www.jorgesanchez.net
[email protected]
@jorgesancheznet
4 4
display:inline
• Admite márgenes, padding, bordes,…
• No admite propiedades width, height ni de
posicionamiento
HTML y CSS
Propiedad display
Jorge Sánchez Asenjo, 2017
www.jorgesanchez.net
[email protected]
@jorgesancheznet
5 5
display:block
• Elemento que genera un rectángulo
• Aparece separado
• Por defecto se expande en todo el ancho de su contenedor
• Ejemplos (por defecto):
• div
• p
• h1
• section
• article
• ul
HTML y CSS
Propiedad display
Jorge Sánchez Asenjo, 2017
www.jorgesanchez.net
[email protected]
@jorgesancheznet
6 6
display:block
• Permite modificar todas las propiedades
HTML y CSS
Propiedad display
Jorge Sánchez Asenjo, 2017
www.jorgesanchez.net
[email protected]
@jorgesancheznet
7 7
display:inline-block
• Genera una rectángulo con el contenido
• El tamaño se adapta al contenido
• No aparece separado
• Ejemplos (por defecto):
• img
• input
• textarea
• button
• video
HTML y CSS
Propiedad display
Jorge Sánchez Asenjo, 2017
www.jorgesanchez.net
[email protected]
@jorgesancheznet
8 8
display:inline-block
• Permite modificar width y height
• Admite modificar float
• No permite modificar las propiedades de posicionamiento
HTML y CSS
Propiedad display
Jorge Sánchez Asenjo, 2017
www.jorgesanchez.net
[email protected]
@jorgesancheznet
9 9
display:none
• No se muestra el elemento
HTML y CSS
Propiedad display
Jorge Sánchez Asenjo, 2017
www.jorgesanchez.net
[email protected]
@jorgesancheznet
1010
display:list-item
• Hace que el elemento sea un ítem de lista
• Ejemplo:
• li
• Propiedades:
• list-style
HTML y CSS
Propiedad display
Jorge Sánchez Asenjo, 2017
www.jorgesanchez.net
[email protected]
@jorgesancheznet
1111
otros
• table. Comportamiento de tabla (como <table>)
• table-row. Comportamiento de fila de tabla (como <tr>)
• table-cell. Comportamiento de celda (como <td>)
• table-column. Comportamiento de columna (como <col>)
• table-column-group. Como <colgroup>
HTML y CSS
Propiedad display
Jorge Sánchez Asenjo, 2017
www.jorgesanchez.net
[email protected]
@jorgesancheznet
1212
otros
• table-header-group- Como <thead>
• table-footer-group- Como <tfoot>
• table-row-group- Como <tbody>
HTML y CSS
Propiedad display
Jorge Sánchez Asenjo, 2017
www.jorgesanchez.net
[email protected]
@jorgesancheznet
1313
Comentarios de: [14.1] Propiedad display (0)
No hay comentarios