{"id":1282,"date":"2024-08-01T18:25:45","date_gmt":"2024-08-01T16:25:45","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1282"},"modified":"2024-08-01T18:25:45","modified_gmt":"2024-08-01T16:25:45","slug":"30-la-propiedad-css-display","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/css3-basico\/30-la-propiedad-css-display\/","title":{"rendered":"30. La propiedad CSS display"},"content":{"rendered":"\n

La propiedad display<\/em><\/strong> es la propiedad CSS m\u00e1s importante para controlar el dise\u00f1o. Especifica si\/c\u00f3mo se muestra un elemento. Cada elemento HTML<\/strong> tiene un valor de visualizaci\u00f3n predeterminado seg\u00fan el tipo de elemento que sea. El valor de visualizaci\u00f3n predeterminado para la mayor\u00eda de los elementos es bloque<\/strong> (block<\/strong>) o en l\u00ednea (inline<\/strong>).<\/p>\n\n\n\n\n\n\n\n

Elementos block<\/h2>\n\n\n\n

Veamos algunos de los elementos HTML tipo block:<\/p>\n\n\n\n

    \n
  • <div><\/em><\/strong><\/li>\n\n\n\n
  • <h1>… <h6><\/em><\/strong><\/li>\n\n\n\n
  • <p><\/em><\/strong><\/li>\n\n\n\n
  • <form><\/em><\/strong><\/li>\n\n\n\n
  • <header><\/em><\/strong><\/li>\n\n\n\n
  • <footer><\/em><\/strong><\/li>\n\n\n\n
  • <section><\/em><\/strong><\/li>\n<\/ul>\n\n\n\n

    Elementos inline<\/h2>\n\n\n\n

    Un elemento en l\u00ednea<\/strong> no comienza en una nueva l\u00ednea y solo ocupa el ancho necesario. Este es un elemento <span><\/em><\/strong> en l\u00ednea dentro de un p\u00e1rrafo. Ejemplos de elementos en l\u00ednea:<\/p>\n\n\n\n

      \n
    • <span><\/em><\/strong><\/li>\n\n\n\n
    • <a><\/em><\/strong><\/li>\n\n\n\n
    • <img><\/em><\/strong><\/li>\n<\/ul>\n\n\n\n

      Display:none<\/h2>\n\n\n\n

      display:none<\/em><\/strong> se usa com\u00fanmente con JavaScript<\/strong> para ocultar y mostrar elementos sin eliminarlos ni volver a crearlos. El elemento <script><\/em><\/strong> usa display: none;<\/em><\/strong> por defecto.<\/p>\n\n\n\n

      Anular el valor de visualizaci\u00f3n predeterminado<\/h2>\n\n\n\n

      Como se mencion\u00f3, cada elemento tiene un valor de visualizaci\u00f3n predeterminado. Sin embargo, puedes anular esto. Cambiar un elemento en l\u00ednea<\/strong> a un elemento de bloque<\/strong>, o viceversa, puede ser \u00fatil para hacer que la p\u00e1gina se vea de una manera espec\u00edfica y seguir los est\u00e1ndares web. Un ejemplo com\u00fan es crear elementos <li><\/em><\/strong> en l\u00ednea<\/strong> para men\u00fas horizontales.<\/strong><\/p>\n\n\n\n

      Ejm<\/strong><\/p>\n\n\n\n

      <!DOCTYPE html>\n<html lang=\"es\">\n<head>\n<style>\nli {\n\tdisplay:inline;\n}\n<\/style>\n\n<\/head>\n<body>\n<p>Muestra una lista de enlaces en un men\u00fa horizontal<\/p>\n\n<ul>\n\t<li><a href=\"#\">Home<\/a><\/li>\n\t<li><a href=\"#\">Quienes somos<\/a><\/li>\n\t<li><a href=\"#\">Contacto<\/a><\/li>\t\n<\/ul>\n<\/body>\n<\/html><\/pre>\n\n\n\n
      \n
      Nota<\/strong>: Establecer la propiedad de visualizaci\u00f3n de un elemento solo cambia la forma en que se muestra el elemento, NO el tipo de elemento que es. Entonces, un elemento en l\u00ednea con display: block;<\/em><\/strong> no est\u00e1 permitido tener otros elementos de bloque dentro de \u00e9l.<\/p>\n<\/blockquote>\n\n\n\n
      Ocultar un elemento – \u00bfdisplay:none o visibility:hidden?<\/h2>\n\n\n\n
      Se puede ocultar un elemento configurando la propiedad display<\/em> <\/strong>en none<\/em><\/strong>. El elemento se ocultar\u00e1 y la p\u00e1gina se mostrar\u00e1 como si el elemento no estuviera all\u00ed.<\/p>\n\n\n\n
      visibility: hidden;<\/em><\/strong> tambi\u00e9n oculta un elemento. Sin embargo, el elemento seguir\u00e1 ocupando el mismo espacio que antes. El elemento estar\u00e1 oculto, pero a\u00fan afectar\u00e1 el dise\u00f1o.<\/p>\n","protected":false},"excerpt":{"rendered":"
      La propiedad display es la propiedad CSS m\u00e1s importante para controlar el dise\u00f1o. Especifica si\/c\u00f3mo se muestra un elemento. Cada […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":563,"menu_order":29,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1282","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"La propiedad display es la propiedad CSS m\u00e1s importante para controlar el dise\u00f1o. Especifica si\/c\u00f3mo se muestra un elemento. Cada […]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1282","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1282"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1282\/revisions"}],"predecessor-version":[{"id":1284,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1282\/revisions\/1284"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/563"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1282"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}