Cómo dominar el posicionamiento CSS

Answer 1

aprendí la mayor parte de mi CSS de los libros de Eric Meyer – meyerweb.com.
Entonces buscaría en Google problemas específicos. W3Schools generalmente tiene buena información, como esta página sobre el modelo de caja: Modelo de caja CSS.

En general solo necesitas saber que
1) Un elemento flotante flota a la derecha o a la izquierda del contenido que lo sigue. Un elemento despejado (ambos) no flotará pero volverá a su posición normal.

2) Si está flotando div B a la derecha de div C y ambos están ubicados dentro de div A, debe definir anchos (o anchos máximos) para A, B y C y asegurarse de que B y C sean lo suficientemente pequeños para encajar lado a lado dentro de A. (Esto es más complicado cuando se utilizan porcentajes en lugar de px para un diseño receptivo)

3) Un cuadro de 100 px con relleno de 10 px en ambos lados tendría un ancho total de 120 px en la mayoría de los navegadores, pero tendría un ancho de 100px en versiones anteriores de IE.

4) La forma en que se representa el cuadro depende del tipo de documento que utilice y de si se representará en modo estricto o en modo peculiar. Vea el modo Quirks y el modo estricto y el modo Quirks; este último tiene una tabla que muestra cómo se comportan los diferentes doctypes. Estuve usando XHTML 1.0 estricto durante bastante tiempo para evitar la mayor parte de estos problemas. ahora estoy usando HTML 5 y las cosas suelen comportarse.

Answer 2

Si desea dominar el posicionamiento CSS, recuerde esta regla: menos es más. Si te encuentras posicionando cosas con variaciones extremas de las reglas de CSS, es probable que no hayas agotado la combinación correcta y deberías hacer todo lo posible para encontrarla.

Consejos útiles

• Para reducir el uso excesivo de la parte superior, izquierda, derecha inferior, margen o relleno, establezca los elementos principales en posición relativa para los hijos que están absolutamente posicionados. Esto permitirá que el elemento secundario se posicione absolutamente solo dentro de los límites del elemento primario. Esto tiene el efecto adicional de mejorar la consistencia en todos los navegadores. Practica esto.
• Margen = interior, relleno = exterior, experimente también con su uso para posicionamiento.
• Recuerde que solo en algunos casos necesitará ser absolutamente específico y orientador, y si se vuelve demasiado específico, se sentirá frustrado con el mantenimiento necesario para que funcione en otros navegadores. Con esto en mente, aquí hay otra regla a considerar: construir flexible, no frágil.

Answer 3

Estático: posicionamiento “normal”. Y, de hecho, un elemento de posición estática es sinónimo de un elemento no posicionado.

Relativo : Movimientos y elemento relativo a donde estaría si lo dejaras solo. Si lo hace estático, y no define arriba, izquierda, abajo o derecha, se queda justo donde está, pero ahora es un elemento posicionado (y puede usarse para afectar un elemento posicionado absolutamente).

Absoluto : el elemento se posiciona en relación con toda la ventana gráfica A MENOS QUE ese elemento esté contenido dentro de un elemento de posición. Si el elemento posicionado absolutamente está dentro de un elemento posicionado, entonces el posicionamiento es relativo al elemento que lo contiene.

Corregido : el elemento es la posición relativa a la ventana gráfica. (Importa si está / no está contenido dentro de algún otro elemento).

Debería hacer un video. Pero ahora tengo que ir a tomar una hamburguesa con queso y algunas papas fritas.

Answer 4

Además de lo que ya se ha escrito aquí, responderé por aprender la especificación de Flexbox si aún no lo ha hecho. Resolverá muchos de sus problemas de posicionamiento típicos en CSS, por ejemplo, centrado vertical.

Además, Flexbox ahora tiene un soporte global del 97,68% [1], por lo que está listo para la producción para la mayoría de los proyectos. Ahorra mucho tiempo y realmente hace que CSS sea mucho más divertido de usar.

Además, esté atento a las cuadrículas CSS, que actualmente se encuentran en el estado de recomendación de candidatos del W3C. Una vez que CSS Grids esté listo para la producción, CSS Grids + Flexbox será la forma en que diseñemos los diseños web.

El problema central es este: todas las técnicas de diseño en CSS no se han diseñado para admitir diseños tan complejos como los que estamos creando hoy en día, sino solo para formatear artículos académicos. Realmente es hora de estas nuevas especificaciones.

Si está interesado, puede leer todo sobre Flexbox aquí: The Ultimate CSS3 Flexbox Tutorial for 2017 (descargo de responsabilidad: este es un artículo en mi blog)

Notas al pie

[1] ¿Puedo usar … Tablas de soporte para HTML5, CSS3, etc.

Answer 5

De acuerdo, en primer lugar, el posicionamiento ahora en días nunca se realiza de forma estática o absoluta.

Lo que normalmente usarías para alinear cosas dentro de otro espacio a la izquierda o la derecha es float: y para alinear divisiones, usarías porcentajes de la página con el width:

Un marco muy común que se usa hoy en día es Bootstrap. [1]
Bootstrap utiliza un sistema de cuadrícula para su diseño que le ayuda a ordenar dónde y qué tan grandes deberían ser las cosas. No voy a debatir Bootstrap o incluso el uso de frameworks aquí, pero su método para “arreglar” CSS es muy útil y ciertamente algo que recomendaría echar un vistazo.

Aparte de eso, el único momento en que normalmente especificaría un tamaño exacto es para la altura de las cosas, ya que los sitios se escalan infinitamente verticalmente, pero tienen un espacio finito horizontalmente. Las mismas técnicas utilizadas hoy en día son similares a las de la antigua imprenta, donde el “extremo” vertical del sitio se conoce como “debajo del pliegue”.

No estoy seguro de qué más decirle, ya que parece verlo más complicado de lo que tiene que ser. Simplemente asegúrese de que sus diseños sean dinámicos y se vean bien en diferentes tamaños de pantalla y no debe preocuparse por qué técnica es la “correcta”, porque casi siempre hay más de una forma de hacer las cosas.

Notas al pie

[1] CSS · Bootstrap

Answer 6

¡Oye!

Me gustaría recomendar un canal de Youtube para usted, se llama DevTips.

Aprendí casi todo en este canal, desde un sitio web básico hasta sitios web más avanzados con mejores diseños.

Enlace a la lista de reproducción de YouTube de DevTips.

Descargo de responsabilidad: no estoy afiliado a este canal. Solo me gustaría ayudar a alguien 🙂

Answer 7

Encontré este sitio web bastante útil cuando lo estaba aprendiendo

CSS – posición

Answer 8

en lugar de posicionamiento, te sugiero que elijas CSS Flexbox, es la tendencia actual, de hecho Bootstrap 4 viene con esto.