We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Visualización del modelo de caja

Con el botón Seleccionar elemento pulsado, si se pasa el ratón por encima de un elemento en la página, el modelo de caja para ese elemento se muestra superpuesto en la página:

También se muestra superpuesto en la página si en el panel HTML ponemos el cursor sobre la marca de un elemento :

Si se trata de un elemento en línea que está dividido en varias filas, se destaca cada una de las líneas individuales que componen el elemento:

Vista Modelo de Caja

Cuando se selecciona un elemento, podemos obtener una vista detallada del modelo de caja en dos de las vistas del panel CCS: Calculado y Disposición:

  • en la vista Calculado aparece en primer término, seguido de la sección con el listado de reglas que se aplican al elemento;
  • en la vista Disposición está en segundo término, detrás de la sección 'Rejilla' y seguido de la sección Propiedades del modelo de caja (box-sizing, display, float, line-height, position y z-index) indicando sus valores

Si ponemos el cursor sobre un valor en la vista modelo de caja al lado aparece un tooltip que nos indica de qué regla procede el valor:

Si desplazamos el cursor sobre una parte del modelo de caja en la vista Modelo de caja, se resalta la parte correspondiente de la página y aparece otro tooltip con información indicando el elemento, su clase y/o ID y sus dimensiones (ancho x alto):

Edición del modelo de caja

También podemos editar los valores en la Vista Modelo de Caja: hacer clic sobre un valor permite editarlo y ver los resultados inmediatamente en la página:

Etiquetas y colaboradores del documento

Etiquetas: 
Colaboradores en esta página: amaiafilo
Última actualización por: amaiafilo,