PDF de programación - [14.1] Propiedad display

Imágen de pdf [14.1] Propiedad display

[14.1] Propiedad displaygráfica de visualizaciones

Publicado el 17 de Enero del 2020
83 visualizaciones desde el 17 de Enero del 2020
126,2 KB
13 paginas
Creado hace 2a (08/03/2017)
[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
info@jorgesanchez.net
@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
info@jorgesanchez.net
@jorgesancheznet

2 2

valores para la propiedad

display

HTML y CSS
Propiedad display
Jorge Sánchez Asenjo, 2017

www.jorgesanchez.net
info@jorgesanchez.net
@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
info@jorgesanchez.net
@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
info@jorgesanchez.net
@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
info@jorgesanchez.net
@jorgesancheznet

6 6

display:block

• Permite modificar todas las propiedades

HTML y CSS
Propiedad display
Jorge Sánchez Asenjo, 2017

www.jorgesanchez.net
info@jorgesanchez.net
@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
info@jorgesanchez.net
@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
info@jorgesanchez.net
@jorgesancheznet

9 9

display:none

• No se muestra el elemento

HTML y CSS
Propiedad display
Jorge Sánchez Asenjo, 2017

www.jorgesanchez.net
info@jorgesanchez.net
@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
info@jorgesanchez.net
@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
info@jorgesanchez.net
@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
info@jorgesanchez.net
@jorgesancheznet

1313
  • Links de descarga
http://lwp-l.com/pdf17164

Comentarios de: [14.1] Propiedad display (0)


No hay comentarios
 

Comentar...

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad