He usado CSSLint para mis hojas de estilo y recibo una advertencia que no entiendo.csslint - caja rota modelo
Considere este código CSS:
div {
width: 50px;
height: 50px;
border: 1px solid;
}
CSSLint dice lo siguiente: "modelo de caja rota: el uso de la altura con la frontera." "Modelo de caja rota: utilizando ancho con borde".
¿Por qué no debería usar ancho/alto con borde?
Supongo que CSSLint está tratando de imponer un conjunto de buenas prácticas alrededor del lector sin tener que entender las implicaciones del modelo de caja. Al final del día, comprendo el modelo de la caja completamente bien y entiendo que su CSS produce una anchura/altura "real" de 52px, lo que tal vez es tratar de evitar malentendidos.
Personalmente lo ignoraría. Sí dice "advertencia" en lugar de error y, por lo tanto, es subjetivo.
Yeah muchas advertencias son inútiles: http: //csslint.net/about.html – MatTheCat
Gracias por la respuesta rápida. :) Voy a aceptarlo en 2 minutos. –
@dotweb: HTH :-) –
Esto es una advertencia, no un error, ¡así que estás bien!
Qué le está advirtiendo acerca es que en el modelo estándar de la caja, el ancho de la border es además a la altura/anchura que especifique.
Por lo tanto, en su ejemplo, el real alto y ancho del cuadro en la página será de 52 píxeles.
CSSLint le advierte acerca de esto porque es posible que no se dé cuenta de esto y, por lo tanto, su diseño puede no ser el correcto.
Si tiene en cuenta esto y lo ha tenido en cuenta en su diseño, puede desmarcar la casilla de verificación "Cuidado con el modelo de caja rota" en CSSLint para suprimir esta advertencia.
Lo mismo aplica para padding, por cierto.
Oh, bien. Sé que la altura exterior también incluye el borde. Solo pensé que el "modelo de caja rota" era algo diferente. Gracias de todos modos. –
@dotweb: el modelo anterior de IE Box (que todavía está disponible a través de los horrores del modo Quirks) contó el borde y el relleno dentro de las dimensiones especificadas. De hecho, esta es la principal diferencia entre el modo peculiar y el modo estándar.Esto es lo que la gente generalmente entiende por 'modelo de caja rota', pero en el contexto de la advertencia de CSSLint, creo que están usando la frase para advertirle en caso de que piense que el modelo de caja funciona de esa manera, en lugar de decir que su código está funciona de esa manera (lo cual no es). – Spudley
Las versiones antiguas de Internet Explorer (y todo lo demás) utilizan una forma diferente de calcular el ancho de las cosas. El viejo IE midió la caja incluyendo su relleno y el borde, las cosas nuevas miden el tamaño del contenido sin el relleno y el borde. Para asegurarse de que su sitio se muestre constantemente en ambos tipos de modelo de caja, puede elegir no tener relleno/borde y ancho/alto en un estilo aplicado al mismo elemento.
Es importante tener esto en cuenta si usted está usando CSS Lint: http://mattwilcox.net/archive/entry/id/1054/ – thirtydot