2011-08-12 63 views
8

Tengo el siguiente fragmento en mi hoja de estilo. ¿Cuál es el impacto o propósito?¿Cuál es el propósito de este fragmento de CSS?

* { 
    margin:0; 
    padding:0; 
    top: 0px; 
    left: 0px; 
} 
+0

para molestar a los futuros desarrolladores .. También arriba y a la izquierda no tienen ningún efecto a menos que el elemento tenga una posición distinta a la estática. – corymathews

Respuesta

8

Es un reset CSS. Su propósito es eliminar los espaciamientos distintos de cero predeterminados para todos los elementos (*). Todos los navegadores tienen alguna hoja de estilo predeterminada y no son muy consistentes entre sí. Tome <form> como ejemplo.

Nota: Ajuste de losleft y top propiedades a 0px no se ve bien para mí. Lo más probable es que cause problemas con el posicionamiento absoluto. Al posicionar un elemento absolutamente, es posible que desee definir solo su desplazamiento vertical u horizontal (no ambos), sin modificar el otro desplazamiento. Ese restablecimiento de CSS no lo permite porque da valores tanto verticales como horizontales. También es posible que desee colocar un elemento desde la parte inferior. Si tiene ese reinicio, tendrá bottom y top que en la mayoría de los casos no se desea y puede alterar la altura del elemento o no respetar uno de los desplazamientos. En cualquier caso, le dará algo no previsto y romperá su diseño.

Para aquellos que quieran aprender más: http://www.w3.org/TR/CSS2/visuren.html#absolute-positioning

+0

mencionando que 'restablecer las propiedades izquierda y superior' estaba causando un problema en la página en un control de mapa de Google! Eliminarlos resolvió mi problema (por eso hice esta pregunta). Lo votaré y lo aceptaré como respondí. – FiveTools

+0

He aclarado su último punto. Siéntete libre de retroceder si no te gusta. – thirtydot

+0

@thirtydot He fusionado su edición con la mía;) ¡Gracias! –

11

Es un restablecer. Todos los elementos tendrán 0 margen, relleno, etc. después de eso.

Tales restablecimientos son útiles para normalizar el comportamiento (algunos navegadores vienen con márgenes predefinidos, paddings, etc.) y para aumentar la coherencia visual entre los navegadores.

+0

y su posición se restablece (aunque no verá ninguna diferencia con 'position: relative;') – knittl

+0

@knittl, ¿quiere decir, posición: relative anulará el comportamiento? Tengo un control de mapa de google que estoy cargando en una página y el impacto de este fragmento rompe el diseño dentro del mapa. Si elimino el fragmento, se muestra correctamente. Sin embargo, otros elementos de la página están desalineados. – FiveTools

+0

@FiveTools Rompe la posición de los elementos que tienen 'position: absolute;' (ver mi respuesta). Google maps hace un uso extensivo del posicionamiento absoluto. –

0

El propósito de su fragmento es para restablecer el margen, el relleno y establecer la posición de la esquina superior izquierda de la ventana de su navegador web.

1

Aplica las reglas contenidas dentro de todos los elementos de la página; creando una línea base predecible para las reglas en cascada.

La técnica se llama "reinicio" (google para "restablecer CSS") y es un enfoque para resolver diferentes navegadores utilizando diferentes reglas de CSS predeterminadas.

Estas reglas se deben aplicar lo antes posible, generalmente al comienzo de la hoja de CSS que se cargó por primera vez.

0

El simbol de Estric se conoce como todo/todo, por lo que el significado de esto es que el CSS se implementará en todos los elemetns y establecerá los valores como parametrizados.

Cuestiones relacionadas