Resolviendo problemas con CSS. ¿Por qué CSS es tan importante donde puedo escribir CSS?

Tal enfoque fue voluminoso por varias razones:

• tablas en HTML. varios: Requieren mucho código de plantilla;
• marking fue semánticamente incorrecto: Las tablas deben usarse para datos multidimensionales;
• cambiar el diseño requirió un cambio en el markup: Si queríamos mover la columna izquierda a la derecha, deberían haber sido modificar la estructura HTML;
• las mesas eran propensas a errores de sintaxis: Las líneas y las células para la corrección deben ir e invertir de cierta manera;
• marking fue ilegible: Se invirtieron tablas en otras tablas para obtener columnas adicionales dentro de las columnas.

Es por eso que, desde la aplicación de tablas como una herramienta se negó lentamente y, en lugar de, usó CSS.

Que es css

CSS (hojas de estilo en cascada) significa hojas de estilo en cascada y es un lenguaje de marcado de estilo (como HTML o XML). Por lo tanto, CSS no representa nada en sí mismo, si no está relacionado con un documento HTML.

CSS traído una vida En un documento HTML, eligiendo fuentes, aplicando colores, definiendo sangrías, elementos de posicionamiento, interacciones animadoras y mucho más.

Cómo funciona CSS

CSS. elige Elemento HTML (por ejemplo, párrafo), pregunta propiedad Para cambiar (como el color) y aplica un cierto valor (por ejemplo, rojo):

P (color: rojo;)

La palabra "estilo" puede ser engañosa. Puede pensar que CSS se usa solo para cambiar el color del texto, el tamaño y el tipo de fuente. Pero CSS puede establecer el diseño de un documento HTML, determinar las alturas, el ancho, el campo interno y externo, la posición, la columna, etc.

¿Dónde puedo escribir CSS?

CSS como un atributo

Puede escribir CSS directamente en elementos HTML utilizando el atributo de estilo:

Este es un texto importante.

CSS B.

Puedes usar la etiqueta

Este párrafo será rojo.

CSS en un archivo separado

Puede escribir su CSS en un archivo separado con extensión. CSS, y luego átalo de HTML usando una etiqueta .

P (color: rojo;)

Este párrafo será rojo.

Este documento HTML, que "llama" el archivo CSS, en nuestro caso, el archivo llamado Style.CSS se encuentra en la misma carpeta que el archivo CSS.

Esto tercer métodoEl uso de un archivo CSS separado es privilegiado.

Las tablas de estilo cascada (CSS) se utilizan para hacer una página web atractiva a los ojos de los visitantes. Además, la tabla de estilos CSS simplifica enormemente el proceso de desarrollo de la página web. También CSS le permite realizar cambios en un solo lugar, y no editar todo el sitio. Por lo tanto, no necesita visitar cada página web del sitio y editarlas.

CSS guarda tu precioso tiempo y energía. Las hojas de estilo cascada, de la siguiente manera, determinan un estilo específico para las páginas web basadas en una lista de prioridades, comúnmente llamada "cascada". Además, también le permite administrar varios elementos en las páginas web de su sitio. Una tabla de estilos CSS puede controlar la fuente, el formato, el tamaño del texto, el posicionamiento, el estilo y el color de todo el sitio web. Aunque las hojas de estilo en cascada pueden cambiar la presentación y la apariencia de su sitio web, sin embargo, no tienen nada que ver con el diseño del sitio web.

CSS puede ayudar a la maestra web de muchas maneras. Gracias al sitio web de CSS tendrá un diseño más atractivo. Al mismo tiempo, incluso los motores de búsqueda prefieren los sitios web basados \u200b\u200ben CSS cuando se trata de asignarlos en el índice de búsqueda.

Separación de la presentación del sitio de su contenido.

Con CSS, puede obtener un gran control sobre la apariencia de su sitio, ya que esta tecnología le permite vincular diferentes estilos con el texto de su sitio. Como resultado, si necesita cambiar la apariencia de cualquier elemento de la página web, deberá editar solo una tabla externa de la tabla de estilos CSS, y esto afectará a todo el sitio web. Este enfoque no solo proporciona un proceso de gestión flexible, sino que también ahorra tiempo.

Aumente la velocidad de carga del sitio.

Dado que las hojas de estilo en cascada son archivos de texto, pesan poco y usan menos ancho de banda, lo que a su vez aumenta la velocidad de descargar su sitio. Según las estadísticas, el sitio que utiliza hojas de estilo basadas en CSS externas se carga aproximadamente siete veces más rápido que un sitio similar sin esta tecnología. Dado que los documentos de texto se cargan muy rápidamente, las páginas web se mostrarán casi en unos pocos segundos, y esto tendrá un efecto positivo en la impresión general de los visitantes al visitar su sitio.

CSS hace que sea fácil cambiar la posición de cualquier artículo en la página web. Por ejemplo, el menú se puede colocar en cualquier lugar: izquierda, derecha, superior o inferior. Al mismo tiempo, el objetivo principal de dicha posicionamiento de elementos es que los robots del motor de búsqueda en primer lugar escanean el contenido principal de su sitio web. Para lograr esto, se necesitan todos los elementos auxiliares, como el menú, en el código HTML para colocar después del contenido principal.

Compatibilidad CSS con navegadores modernos.

Dado que actualmente hay muchos navegadores diferentes, el maestro web es difícil verificar el rendimiento del sitio absolutamente en todos los navegadores. Sin embargo, si se adhiere al diseño estándar basado en CSS, entonces este problema se resuelve fácilmente.

Como se puede ver desde lo anterior, la tecnología CSS está más allá de lo que proporciona herramientas para crear sitios modernos y atractivos, también ayuda a resolver una serie de problemas. Que en sí mismo determina la alta importancia de los CSS.

Uno de los servicios más antiguos en Internet son foros. Estos sitios de comunicación aparecieron entre los primeros y, desde entonces, permanecen en forma casi sin cambios. Pero a pesar de su sólida edad, como antes de hacer frente a sus funciones. Aquí las personas se comunican, haz preguntas y reciben respuestas.

Hola, querido sitio web de lectores de blogs. Hoy me gustaría hablar de si es posible que necesite cuando trabaje con el conocimiento del idioma HTML (lea lo que es), lo básico del trabajo con las tablas de cascada de CSS (artículo introductorio sobre el tema que encontrará), así como Comprender al menos los fundamentos y principios, construir programas en FP y trabajo lógico con bases de datos MySQL.

te permite hacer sitios, no poseer Todos los mencionaron sobre las sabidurías, pero al mismo tiempo, probablemente tenga preguntas y problemas que no puede resolver los medios incluso los CMS más confiables (Joomla, WordPress, Drupal, etc.).

¿Por qué lo necesite cuando trabaje en el conocimiento del sitio de los idiomas (marcas, estilos, programación del servidor)

O no encontrará dicho artículo en el ingreso de CMS entre muchas otras configuraciones (la lógica de los autores de los motores al establecer algunas configuraciones sigue siendo incomprensible y, posiblemente, el poder del hábito del autor del autor) se juega aquí, O los desarrolladores no incluirán un artículo de este tipo en la administración del sistema de gestión de contenido en absoluto. Es imposible implementar la configuración para todos a través del administrador, generalmente, solo se muestran los ajustes más necesarios y utilizados con frecuencia.

Suele pasar es más fácil resolver el problema. No se proporciona regularmente en el administrador, pero directamente, el derecho de algo en la base de datos o ajustando el contenido de ciertos archivos del motor a través del acceso a la FTP.

Sí, para esto será necesario dedicar tiempo al estudio de al menos la base del lenguaje de marcado HTML, para comprender cómo las tablas de estilo Cascade afectan la aparición de Webon, así como tratar con el dispositivo de base de datos, aprenda cómo cambiar eso. Y, tal vez, lo más difícil es comprender los principios básicos para escribir el código en el idioma PHP para comprender qué y dónde es posible cambiar sin dolor y qué no se puede tocar.

Comenzaré, por supuesto, con el diseño de los webons (en realidad, en este momento he terminado este caso y usted puede familiarizarse con los resultados y). Como mencioné en una de las publicaciones anteriores, hasta hace poco, todos los recursos consistían en páginas HTML. Además, se solicitó el contenido del sitio web (textos, imágenes, tablas) y su diseño (colores, fondo, guiones).

En una comprensión moderna de la exactitud del vértice, el relleno debe realizarse utilizando las etiquetas del lenguaje de marcado de hipertexto, y el diseño de este relleno debe deberse a las tablas de archivos externos. Dicha separación le permite descargar la página del sitio web del código de servicio excesivo.

El hecho es que los motores de búsqueda son muy intentos. observando la proporción del componente de información. Código de la página web (texto que se muestra en el navegador) y su componente de servicio (Etiquetas, una variedad de scripts, etc.). Por lo tanto, al hacerlo de esta página, todo lo que no lleva el componente de información, pero es responsable solo de decorar páginas, mejoramos la proporción de motores de búsqueda a nuestro proyecto (bueno, al menos en teoría).

Además, la lista de reglas CSS hecha a un archivo separado le permite unificar el diseño de recursos. Si es necesario, siempre será posible cambiar algo en el diseño no es el código correcto de todos los web, porque En este caso, será suficiente para arreglar las propiedades existentes o agregar nuevas propiedades de estilo en el estilo de todas las páginas al estilo de los estilos.

Con la apariencia de las tablas de estilos, muchas etiquetas del lenguaje de la marca de hipertexto y sus atributos. comenzó a ser considerado obsoleto y no se recomienda para su uso. En su lugar, se les recomienda utilizar las propiedades CSS que realizan las mismas acciones. Esto no significa que ahora no sea necesario estudiar HTML, simplemente disminuyó el número de etiquetas y sus atributos que necesitan saber y poder usar para crear y mantener en el estado adecuado del sitio. Intentaré contar con esas etiquetas que yo mismo use constantemente.

En qué editor es mejor editar o realizar cambios en el código.

No hay nada difícil en esto, porque, de hecho, ni siquiera es un lenguaje de programación, sino un marcado de hipertexto, algo similar a la sintaxis en ruso. ¿Qué me gustaría asesorar de inmediato, confiando en su propia experiencia? Trate de escribir etiquetas usted mismo en el bloc de notas, escriba Bloc de notas ++. (Lea la mía), y no en programas, como Drimvuiver. ¿Por qué?

Sí, porque en este caso se pierde su mano y recuerde las etiquetas de escritura y los atributos. Sí, en programas de tipo Dreamvyver, es más conveniente ser superior. Puede verlo de inmediato en el navegador, y las opciones de escritura para esta o la etiqueta se pueden seleccionar de la lista desplegable.

Pero el hecho es que básicamente tiene que gobernar el código existente en los archivos de su motor y será mucho más conveniente si recordará la escritura de todas las etiquetas y sus atributos de corazón (el beneficio de ellos no es tanto). Por qué, para corregir una etiqueta, abra el archivo en el engorroso Dreamvier, cuando hay suficiente cuaderno ordinario para estos fines, bueno, o su contraparte avanzada para el nombre del Non-Type Plus Plus (enlace es ligeramente más alto).

Aunque, esta es mi opinión personal (IMHO) y usted decide qué es más conveniente. Por ejemplo, Evgeny Popov, en curso, estudié todo este caso, aparentemente, el adherente de Drimvyever. Es importante en principio uno, de modo que regañó el código en el editor que pueda mantener todos los cambios realizados y que pueden, si se desea, devuelve todo como era (espalda).

En este caso, sin importar cómo contragartes, todo será fijable. Y, por supuesto, la iluminación de la sintaxis del idioma en la que escribe o edita el código es muy conveniente. Bloc de notas ++ - ¡Esta es definitivamente mi elección! Le conté sobre sus posibilidades en el artículo más tarde.

Probablemente, informar sobre el marcado y su diseño a su vez, no será correcto, así que intentaré hablar sobre su intercambio. Debe entenderse que las propiedades CSS se registran en uno o más archivos individuales que puede encontrar fácilmente en el tema del registro utilizado para su motor.

Si bien las etiquetas web en CMS modernos no se registran en algunos archivos uno o más, ya que antes, y se genera (interpretada) de PHP. Y fue el código que ya se ha generado de esta manera que el navegador se aplica al navegador para que, a su vez, lo interpreta en una página abierta en línea para nosotros. Heathwood, ¿no es así?

por lo tanto etiquetas Etiquetas en cualquier CMS No es una tarea tan trivial, incluso si está completamente aliviado con el lenguaje del marcado de hipertexto. Después de todo, las etiquetas tiene que gobernar en archivos PHP y, por lo tanto, deberá saber al menos sus conceptos y sintaxis básicos.

Pero no se preocupe, para editar el diseño de gran conocimiento en PHP de usted no necesitará. Las etiquetas allí mienten, cómo decir, en la superficie y no es muy difícil identificar y corregir si es necesario.

Que herramientas puedes usar

El problema surge, por regla general, en el otro. ¿Cómo encontrar ese archivo con la extensión PHP en la que se forman los fragmentos necesarios de las etiquetas? Aquí hay una cuestión de problemas. Sí, por supuesto, si tiene experiencia en trabajar con motores de datos, entonces, creo, Clea. ¿Pero si eres nuevo y no sabes cuál de los cientos de archivos PCP para lo que es responsable?

Se le ayudará con un plugin magnífico para un navegador igualmente magnífico, así como el bloc de notas ++ mencionado anteriormente, y no lo involuntario a muchos. Este montón de programas lo ayudará a convertir las montañas y guardará la masa de tiempo.

En las publicaciones más cercanas, le diré a Detalle cómo usar estos programas para abordar eficazmente los problemas emergentes con el sitio. Sí, casi me olvido de un programa indispensable que le permite acceder a FTP - FileZilla (ya existe un artículo sobre este tema). Bueno, sobre nosotros, por supuesto, hablemos.

Bueno, los objetivos se describen, las tareas se entregan, sigue siendo solo para realizarlas. Para el SIM, le permite declararle.

¡Buena suerte para ti! A reuniones ambiguas en el sitio web de páginas del blog

Puedes estar interesado

Hermosas fuentes rusas para el sitio y la computadora en el servicio de fuentes de Google en línea, donde descargar y cómo instalar Diseño adaptativo (responsivo): optimización del sitio para verlo en dispositivos móviles
GIF, PNG o JPG - Formatos de gráficos ráster para la Web, sus pros y sus contras cuando se usan en el sitio

A veces el comportamiento de CSS puede confundir. Conozca algunas propiedades astutas que pueden causar los problemas más comunes, y cómo se pueden resolver estos problemas.

CSS es un desastre. La CSS se implementó por primera vez en 1995, y originalmente se destinó a no conjuntamente sitios web y aplicaciones web, sino para la tipografía de los documentos de texto simples. Desde entonces, CSS ha pasado un camino difícil. Tal vez demasiado complicado.

En primer lugar, CSS no estaba destinado a la distribución de documentos multicolones, interfaces adaptativas y muchos otros. Es por eso que se ha convertido en una lengua con muchos hacks y fallos, una especie de maravillosa máquina de vapor con muchas extensiones y una fila.

Por otro lado, hace que CSS sea bastante divertido. Y hasta cierto punto, somos propiedad del hecho de que tenemos trabajo. Estoy completamente convencido de que el desarrollo de CSS absolutamente cruzados no es aún posible, y es poco probable posible en el futuro previsible.

En cualquier caso, no estoy escribiendo para expresar mis creencias y descontento, pero para hablar de CSS. Hoy plantearemos preguntas sobre algunos problemas comunes e intentaremos nuestra solución para resolverlos.

Limpieza de flujo (limpieza de flotadores) - la pregunta anterior como el mundo

Creo que esta es la pregunta más común que causa el desconcierto al intentar estilizar los artículos. Es viejo como el mundo, así que estoy 100% seguro de que cualquiera que haya escrito los estilos en CSS se metió en una trampa similar.

Básicamente, cuando el elemento contiene bloques flotantes dentro (flotando), se "colapsa": toma la altura mínima. Esto ocurre porque los elementos flotantes se eliminan del flujo total de elementos, de modo que el bloque en el que se envuelven estos elementos, se comporta como si no contenga ninguna subsidiaria.

Hay muchos caminos que le permiten corregir este comportamiento. En el pasado tenía que añadir vacío. div con una propiedad limpia los dos. Después de todos los elementos flotantes, al final del contenedor. También podrías tener esto div Reemplazar etiqueta hora - Tampoco la mejor opción.

Pero Nicolas Gallagher propuso una nueva forma de limpiar el flujo en el elemento padre sin contaminación de Markup con etiquetas adicionales. Después de las turbulentas discusiones y pruebas, se identificó una versión de trabajo con un conjunto mínimo de propiedades, cuya versión más reciente se da aquí:

Clearfix: Después (contenido: ""; Pantalla: Tabla; Borre: ambos;)

De hecho, mintí diciendo que esta versión es la última, pero definitivamente es la opción más optimizada. Si necesita soporte para IE 6/7, entonces necesita este código opcional:

Lo que realmente necesitas es determinar la clase. .Clearfix. En su proyecto, que luego puede prescribir elementos en los que desea limpiar el arroyo. Esta es la forma más fácil de trabajar con elementos flotantes.

¿Cómo lidiar con el espacio entre los elementos de bloques en línea?

Intentemos establecer artículos en una línea, pero sin usar la propiedad. flotador, al definirlos como un bloque de bloques rectos (bloques en línea). Propiedad pantalla: bloque en línea Durante mucho tiempo, permaneció infravalorado y un poco usado, pero finalmente descubrimos cómo funciona y calificó las fortalezas. Hoy en día, cada vez más desarrolladores de interfaz se deshacen de los elementos flotantes a favor de los elementos esforzados, siempre que sea posible.

Creo que la principal ventaja de los elementos del colador es que no necesitamos cuidar la limpieza de flujo y otros inconvenientes que pueden provocar elementos flotantes. Básicamente, al definir un elemento, como un bloque directo, lo convertiremos en un tipo de híbrido: una semi-línea y un semicloque. Dichos elementos pueden cambiarse de tamaño, pueden tener sangrías externas, pero su ancho original depende del contenido, mientras que los elementos de bloques están de forma predeterminada, tome todo el ancho del padre. Es decir, se basan entre sí horizontalmente, como símbolos en una cadena, y no verticalmente como bloques.

Aquí usted dirá: "¿Y qué podría haber un problema con ellos?". El problema es que son la mitad de la fila, y, como las líneas, se separan entre sí con un ligero intervalo igual al ancho del símbolo vacío. Para la fuente estándar 16px, la dimensión de esta distancia es 4px. En la mayoría de los casos, esta distancia es del 25% del tamaño de la fuente. En cualquier caso, se molesta cuando intentas construir elementos. Supongamos que tenemos un elemento padre en 600px de ancho con tres elementos de bloques de hija del ancho de 200px. Si no se deshace de estos espacios de cuatro píxeles, obtenemos que el ancho resultante de los elementos será mayor que el ancho del elemento padre (200 * 3 + 4 * 2 \u003d 608).

Afortunadamente, hay varias formas de deshacerse de estos intervalos no deseados, cada uno con sus ventajas y desventajas. Para ser absolutamente honesto, diré que todavía no hay soluciones ideales. ¡Echemos un vistazo a estas formas, una por una!

Usando el marcado: eliminamos las brechas

Preste atención a este marcado: lo describí en unas pocas líneas antes.

Como dije anteriormente, los tres de estos bloques no caben en una sola línea, ya que hay uno o más signos de espacio entre los bloques (en nuestro caso, un símbolo de traducción de cadenas y dos espacios). La primera forma implica una eliminación simple de espacios entre los elementos:

Este método funciona, pero muy empeora la legibilidad del código. Tal vez podamos convertir nuestras etiquetas en lugar de construirlas en una línea, el código se volverá más legible:

Otra opción inusual:

Sí, este enfoque funciona! Pero en general, no lo recomendaría a usar, ya que no es intuitivo. A pesar de que logramos deshacernos del espacio no deseado entre los elementos, a cambio, recibimos un código bastante desagradable. Probemos algo más.

Marcado: cometer los intervalos.

¿Y si, si está comentando las brechas en lugar de deshacerse de ellos?

¡Guau! ¡Esto es mucho mejor! El código se mantuvo legible, y en general todo se ve bien. Incluso si se ve extraño a primera vista, quizás este enfoque sea útil para usted. Personalmente, uso este enfoque cuando necesito eliminar el espacio entre los elementos del bloque de estrecho.

Sin embargo, algunos dirán que esta no es la forma perfecta, ya que esta solución requiere control del marcado, y los problemas de posicionamiento son el negocio de CSS y solo CSS. Y serán absolutamente correctos. Esto nos lleva a las soluciones de base de datos CSS.

CSS: espacio de manipulación entre caracteres. Propiedad de cartas

Propiedad espaciado de letras Se utiliza para establecer el ancho del espacio entre los caracteres. La idea de nuestra manera es hacer que el espacio entre los caracteres sea menor que el ancho del espacio, y para los elementos infantiles lo llevan a la forma original:

Padre (letra-espacio: -0.3EM;) .Child (espacio-espacio: normal;)

Esta técnica se usa en la plancha: un motor de cuadrícula desarrollado por Nicolas Gallagher, por lo que podemos considerar esta opción bastante confiable. Sin embargo, realmente no me gusta lo que confiamos en algún tipo de número mágico. Además, para algunas fuentes, deberá establecer un valor a continuación -0.3EM, por ejemplo, -0.31EM o -0.32EM. Tienes que adaptarte a cada caso específico.

CSS: sangría externa negativa

Otra forma que sea similar al anterior es el uso de una jubilación negativa. Este método da fallas en IE 6/7, ya que no son amigables con los retiros negativos. Además, debe eliminar un guión negativo en el primer elemento secundario para que no se mueva hacia la izquierda, y que los elementos del niño se suban por completo al contenedor:

Niño (margen-izquierda: -0.25EM;) .Child: First-of Tipo (Margen-Izquierda: 0;)

Si no necesita soportar IE 6/7, o si tiene un archivo de estilo separado para estos navegadores, creo que es una solución bastante buena y segura.

CSS: Tamaño de fuente

Y el último, pero lejos de la peor manera es que puede intentar establecer el tamaño de fuente del elemento padre en 0 para que los caracteres vacíos también se conviertan en un ancho cero, y luego restaure el tamaño de fuente para los elementos infantiles.

Padre (tamaño de fuente: 0;) .Child (Tamaño de fuente: 16px;)

Este método funciona bien, pero también tiene sus inconvenientes:

• no puede restaurar el tamaño de la fuente utilizando un valor relativo. em.Dado que el tamaño de fuente del elemento padre es 0px
• los espacios no se eliminan en los navegadores estándar Android a Jelly Bean
• si cambias en contexto @ Perfil delantero, la fuente no puede ser alisada en Safari 5
• algunos navegadores no se les permite una fuente de altura cero, por ejemplo, Chino Chrome exhibe una fuente de este tipo a la norma 12px

Así que esta definitivamente no es la mejor solución. Como ya habló anteriormente, dejaría de usar el método con comentarios.

Desmontamos el posicionamiento absoluto.

El posicionamiento es una cosa bastante difícil. Muchos recién llegados están atascados en el momento en que es necesario sacar el elemento en la página. Y usualmente usan mal, o viceversa - abuso - propiedad posición. Esta propiedad determina cómo se cambiará el elemento con respecto a algún lado ( cima., derecha, fondo y izquierda.). Se necesitan cuatro valores:

• estático. - El valor predeterminado, los desplazamientos no funcionan.
• relativo. - La capa visual se desplaza, pero no el elemento mismo.
• absoluto. - El elemento se desplaza en el contexto circundante (primer antepasado no estático)
• reparado - Los elementos se colocan en el área de visualización, no importa cuál sea su posición en el DOM

Por lo general, el problema se produce cuando se usa. posición: Absolute.. Es posible que ya se haya encontrado de manera similar: especifique el elemento con una posición absoluta, ya que desea que se desfigure en relación con el ángulo superior derecho del elemento padre (por ejemplo, como un pequeño botón de cierre de la ventana del modelo, o algo similar)

Elemento (posición: absoluta; arriba: 0; izquierda: 0;)

... y se muestra en la esquina superior derecha de la ventana. Y crees: "¿Qué Fig?". De hecho, es un comportamiento predeterminado del navegador. Palabra clave aquí - contexto.

El código anterior en realidad significa: " quiero que mi elemento se coloque en la esquina superior derecha en relación con su contexto". Entonces que es " contexto”? Este es el primer ancestro no estático.. Puede ser un elemento principal directo. O elemento padre principal. O padre padre de los padres ... y así será una búsqueda al primer elemento, cuyo posicionamiento no se especifica como estático..

Puede ser algo difícil de comprensión, especialmente para principiantes, pero si una vez aprendió esto, puede controlar de manera muy flexible el posicionamiento absoluto.

Aquí hay un ejemplo simple que muestra de qué acabamos de hablar. Dos elementos principales, cada uno dentro de un elemento secundario, que se propone en absolutamente valores. tOP: 0. y derecha: 0. A la izquierda, el elemento padre se posiciona relativamente (comportamiento esperado). El elemento padre derecho se queda estático (incorrecto).

¿Cuándo usar una altura / ancho del 100%?

100% altura

Vamos a resolverlo primero con un ejemplo menos complejo. Cuándo usar altura: 100%? De hecho, muchos de nosotros al menos una vez nos preguntamos por la pregunta de "¿Qué demonios? ¡Esperaba que mi página fuera al menos para ocupar toda la altura de la pantalla! " ¿Estoy en lo cierto?

Para responder a esta pregunta, debe entender lo que realmente significa una propiedad. altura: 100%: Altura completa del elemento padre. No significa "toda la altura de la pantalla". Así que si desea que su contenedor ocupe toda la altura de la pantalla, altura: 100% No es suficiente.

¿Por qué? Porque el elemento padre de su contenedor ( cuerpo.) tiene la altura predeterminada aUTO.¿Qué significa que su tamaño está determinado por los contenidos? Para que puedas intentar poner altura: 100% Y para el elemento cuerpo. - Todavía no le dará el efecto deseado.

¿Por qué? Debido a la etiqueta del elemento padre cuerpo. (html) tiene la altura predeterminada aUTO.¿Qué significa que su tamaño depende del contenido? Y que si intentas preguntar un elemento altura HTML: 100%? ¡Obras!

¿Por qué? De hecho, porque el elemento raíz ( html) - Este no es el último bloque padre en la página, también hay una ventana de visualización. En pocas palabras, esta es una ventana de navegador. Así que si pides altura: 100% Elemento htmlLo harás una altura igual a la altitud del navegador. Eso es solo.

El resultado de nuestra historia se refleja en el siguiente código:

Html, cuerpo, .container (altura: 100%;)

¿Y qué pasaría si el elemento padre está configurado con altura mínima, pero no se le pregunta?

Roger Johansson recientemente reveló un problema con altura: 100% En el caso, cuando el elemento principal no tiene una altura designada, pero la altura mínima se establece para ella. No lo enfermaré en la descripción, pero como resultado, la decisión es que el elemento padre necesita establecer una altura de 1px, de modo que el elemento secundario pueda estirarlo para altura mínima.

Padre (Min-altura: 300px; Altura: 1px; / * Se nos necesita para que el elemento secundario revelado para toda la altura de la altura Min-altura * /) .Child (altura: 100%;)

100% ancho

Ahora vamos a tratar con el parámetro ancho: 100%. Inmediatamente le recuerda que, como con una altura, ajuste ancho: 100% - Esta es una indicación de que el elemento debe ser el mismo ancho que el elemento principal. No hay sorpresas aquí.

Y ahora compartiré un pequeño secreto. El ancho no es exactamente el nombre correcto para esta propiedad. Propiedad ancho. De hecho, no define todo el ancho del elemento, sino solo el ancho de su contenido, que es completamente diferente de la anchura completa del elemento.

Si agregamos un campo interno y bordes a su elemento al que se exhibe el ancho ancho: 100%Este elemento no encajará en el padre, irá más allá de sus límites. Todo esto se debe a campos y bordes. Y es por eso que la propiedad. ancho. Se llamaría ancho de contenido (ancho de contenido). Por favor, considere el siguiente ejemplo para entender lo que quiero decir:

El ancho del elemento padre es igual a 25EM.. El ancho del elemento secundario es 100% igual al 100% (de su elemento padre), pero también tiene un campo de 1EM (1EM, a la izquierda, 1EM a la derecha. En suma horizontalmente será 2EM), así como la frontera a 0.5EM (Solo 1EM horizontalmente), lo que conduce al hecho de que el ancho resultante del elemento secundario complementará 25.es (100%) + 2EM + 1EM \u003d 28EM. Hmm ... Houston parece tener un problema.

Hay cuatro formas de corregir el estado de cosas. Primero, y definitivamente lo mejor, evitar la instalación. ancho: 100%, especialmente si no hay uso en esto, como en este caso. Un elemento secundario es un elemento de bloque que se expande automáticamente al ancho del elemento principal (sin ese problema que vemos arriba). Desafortunadamente, si estamos tratando con elementos de bloqueo de tensión, puede usar la siguiente solución.

No se puede utilizar ancho: 100%, y establece un ancho específico para el elemento usted mismo. En nuestro caso, es 20 - (2 + 1) \u003d 22EM. Debe decirse que esta solución es mala, ya que es necesario calcular manualmente el ancho deseado del elemento. ¡PAGANDO OTRA MANERA!

La tercera opción utilizará calc ()Para automatizar los cálculos: ancho: Calc (100% - 3EM). Todo lo mismo malo. Primero, necesitamos calcular la suma de los campos horizontales + límites verticales. En segundo lugar, calc () No es compatible con el mejor mejor en los navegadores (no admite IE 8, Safari 5, Opera 12 y navegador estándar Android).

Cuarta opción - Usa la propiedad. tamaño de la caja: Border-Box. Esencialmente, cambia el comportamiento del modelo de contenedor para que la propiedad de ancho refleje el ancho total del elemento, se incluyen los límites y los campos. La buena noticia es que el apoyo a los navegadores de esta propiedad es bastante bueno (todo excepto IE 7 y Opera 9).

¿Cómo no cometer un error con Z-index?

Todos los elementos de la página se colocan en el espacio tridimensional: además de la posicionamiento vertical y horizontal, los elementos también se encuentran a lo largo del eje Z. A primera vista, este concepto parece ser bastante simple: los elementos con el índice Z más alto son Se muestra en la parte superior de los elementos con índice Z inferior.

Desafortunadamente, las cosas pueden ser más complicadas de lo que parecen a primera vista. En general, estoy seguro de que esta es la propiedad CSS más confusa. Estoy seguro de que los problemas con Z-Index son los más comunes y molestos, con los que solo puedes cumplir mientras trabajan con CSS. Pero intentaremos encontrar una solución.

Vamos a empezar desde el principio: la propiedad Z-Index no funciona con elementos estáticos. Para mover el elemento a lo largo del eje Z, debe determinar el posicionamiento para el artículo como relativo., absoluto. o reparado. Por lo tanto, lo primero que tenemos que hacer es asegurarse de que el artículo esté colocado correctamente antes de pensar en nombrarlo en Z-index.

Ahora, debe recordar que los elementos de la DOM no se encuentran en la misma capa. Esto significa que la Z-Index exhibe en un valor muy importante puede no ser suficiente para mostrarla sobre otros elementos. Se llama contexto de la superposición.

Al cambiar la posición a lo largo del eje Z, los elementos se pueden hacer superpuestos entre sí en el orden deseado. Así es como, según CSS, la especificación muestra elementos dentro de un contexto de un grupo:

1. fondo y fronteras del elemento que forma un contexto de grupo.
2. contextos de grupo hija con niveles negativos (los primeros son los más pequeños)
3. en la transmisión, no línea, no enfoques.
4. elementos flotantes no sociables
5. en la transmisión, línea, descendientes de la novisión, incluidas las tablas y los bloques más minúsculas
6. contextos de grupo hija con nivel 0 y descendientes socóticos con nivel 0
7. contextos de grupos hijos con niveles positivos (desde menos a más)

Cuando el resultado es terrible

Bueno, fue la información más básica sobre la propiedad Z-index. El conocimiento de esto puede ahorrarle mucho tiempo y reducir la cantidad de problemas, asegúrese de. Desafortunadamente, esto no es suficiente. ¡Estaban todavía flores!

El hecho es que cada contexto del grupo tiene su propia escala a lo largo del eje Z. Básicamente, el elemento A en el contexto 1 del grupo 1 y el elemento B en el contexto del grupo 2 no pueden interactuar con los índices Z. Esto significa que un elemento A es parte de un contexto de grupo que está en la parte inferior del grupo de agrupación, y no hay posibilidad de deducirla frente al elemento B, que está en otro contexto del grupo, que tiene un mayor Orden de grupo, incluso si lo configura muy alto Z -Index.

Pero espera, de hecho, sigue siendo peor. Elemento html Forma el contexto del grupo raíz. En este caso, cada bloque socotizado (no estático) con el valor del índice Z es mayor que aUTO. Crea un nuevo contexto de grupo. No hay nada nuevo en esto. Y aquí todo se vuelve bastante triste: algunas propiedades CSS que no están relacionadas con el posicionamiento crean nuevos contextos de grupo. Por ejemplo, opacidad.

Sí, sí - propiedad opacidad Crea un nuevo contexto de grupo. Las propiedades también se aplican transformar y perspectiva.. Pero no tiene sentido, ¿no es así? Significa que si tiene un elemento con transparencia, diferente de 1, o con una transformación que no sea ninguno - Tienes un problema potencial.

Desafortunadamente, cada problema con Z-Index es único, por lo que no es posible ofrecer ninguna solución universal para todos los problemas con Z-index. Al final, puedes retirar varias conclusiones:

• siempre verifique que sus artículos estén configurados en la posicionamiento antes de aplicarlos en Z-index
• no utilice el índice Z con valores grandes, es absolutamente sin sentido. En la mayoría de los casos, es suficiente. Índice Z: 10
• asegúrese de que los elementos que desee cambiar el pedido de visualización pertenecen a un contexto de un grupo
• si aún no ha resuelto el problema, asegúrese de no tener elementos transformados o translúcidos en el camino

¿Cuál es la unión de sangrías?

Creo que esta es una de las "Glitches" CSS, que tomó la mayor parte de mi tiempo. Creo que usted dirá que es tan extraño como el comportamiento del índice Z. En resumen, la unión de sangrías es cuando el sangrado superior e inferior de los dos elementos se fusiona en el mayor de los dos de estos guiones. En términos generales, la sangría vertical entre los dos bloques se calcula de la siguiente manera:

Aparentemente, esta es exactamente la razón por la que todo funciona exactamente como (según se define y se describe en la especificación CSS). Sé que, a veces, a veces no queremos unirnos verticales. Para entender cómo solucionarlo, primero considere la razón de este problema. La unión de sangrías ocurre en tres casos diferentes:

Bloques relacionados

Cuando dos bloques adyacentes tienen sangrías verticales, se combinan en el mayor guión desde el depósito inferior de un elemento y el retiro superior de la segunda. Esto se puede prevenir por varios caminos:

• bORRAR: Izquierda; Flotador izquierdo; Para bloques adyacentes (correctamente funciona)
• pantalla: bloque en línea En hermanos (también se desencadena la mesa en línea)

Elemento parental y el primer elemento de hija / la última hija

Por lo general, el sangrado principal principal y el guión superior del primer elemento secundario se combinan en el mayor guión. De manera similar, el sangrado inferior de los padres y el sangrado inferior del último elemento secundario se combina en el mayor. Este fenómeno también se conoce como la "Unión Ancestre". Hay varias soluciones para combatir dicho comportamiento. La mayoría de ellos consisten en agregar una de las siguientes propiedades al elemento principal:

• desbordamiento: oculto. (u otro otro que auto)
• relleno: 1px (o cualquier otro valor, más de 0); Algunos navegadores incluso apoyan los valores de subpíxeles)
• frontera: 1px sólido transparente (o cualquier borde)
• pantalla: bloque en línea (Mesas de lowering también funcionan - Mesa en línea)
• flotador izquierdo. (La derecha también encaja)

El siguiente ejemplo demuestra estas correcciones en acción:

Bloques vacíos

Cuando el bloque vacío no tiene bordes ni campos, ni altura, su límite superior e inferior se combinan en uno. En este caso, esto es adecuado para el primer o segundo caso, que se describen anteriormente, la combinación de bordes con el elemento padre / adyacente. Sin embargo, los elementos vacíos también son, en general, una mala idea, así que espero que no tenga que lidiar con ellos a menudo.

Resultados

Wow, muchas cosas, ¿verdad? Pero, desafortunadamente, es solo la parte superior de los errores, hacks y fallas del iceberg. Sólo describí los problemas más frecuentes con los que puedes encontrar mientras trabajaba con CSS, pero todavía hay muchas cosas similares como incompatibilidades de los navegadores, desastre en los fabricantes, especificidad de los selectores, cascadas y herencias, y mucho más.

En cualquier caso, espero que algunas soluciones le permitan ahorrar tiempo.

Presentamos la traducción del artículo "Por qué la cuadrícula CSS es mejor que el bootstrap para crear diseños" desde Pern Harald Borgen, publicado en el sitio web ru.hexlet.io.

CSS Grid es una nueva forma de crear diseños en Internet. Por primera vez, un sistema de capas completo está disponible directamente en el navegador, lo que da muchas ventajas.

Estas ventajas se están volviendo particularmente expresivas si comparas la cuadrícula CSS con el marco de bootstrap más popular. No solo puede crear diseños que antes eran imposibles sin JavaScript, pero su código se volverá más fácil de mantener y entenderá.

Veamos las tres razones principales por las que creo que CSS Grid es superior a Bootstrap.

Marcado será más fácil

Reemplazar el bootstrap en la cuadrícula CSS hará que HTML CLEANER. Aunque esta no es la ventaja más importante, es probable que sea el primero que notará.

Para mayor claridad, creé un diseño de sitio web ficticio para que pueda comparar el código requerido para dos versiones. Aquí:

Oreja

Primero consideremos el marcado necesario para crear este sitio en Bootstrap.

Aquí quiero que preste atención a qué:

1. Cada línea debe estar con una etiqueta separada
   .
2. Para designar un diseño, se deben usar nombres de clases (COL-XS-2).
3. Cuando esta plantilla es complicada, HTML también.

Si este es un sitio adaptativo, las etiquetas se ven como una regla aún peor:

CSS Grid.

Ahora veamos la manera de implementar lo mismo en la cuadrícula CSS. Aquí está HTML:

Podría usar elementos semánticos, pero decidí adherirse a DIV para que la comparación con Bootstrap se vea más clara.

Puedes ver inmediatamente que este marcado es más fácil. Nombres de clase feos y etiquetas DIV adicionales para cada línea: en el pasado. Esto es solo una computadora para la cuadrícula y la posición dentro de ella.

Y a diferencia de Bootstrap, este marcado no será demasiado complicado con la creciente complejidad del diseño de la página.

En el ejemplo con Bootstrap, no necesitaba agregar CSS, en la cuadrícula CSS, por supuesto, hay una necesidad. Si específicamente necesitas agregarlo:

Para algunos, puede ser un argumento a favor de Bootstrap: no necesita preocuparse por CSS para crear una cuadrícula simple: simplemente construya un diseño en HTML.

Pero, como entenderá desde el siguiente elemento, la conexión entre el marcado y el diseño es en realidad una vulnerabilidad, si estamos hablando de flexibilidad.

Mucho más flexibilidad.

Supongamos que desea cambiar el diseño dependiendo del tamaño de la pantalla. Por ejemplo, levante el menú a la fila superior para ver desde dispositivos móviles.

En otras palabras, cambie el diseño con esto:

en este:

CSS Grid.

Hazlo con la cuadrícula CSS es muy simple. Añadimos una solicitud de medios y mezclamos diferentes bloques como queremos:

La capacidad de crear un diseño de esta manera, sin preocuparse por la forma en que se escribe el HTML se llama independencia del pedido en el Código (independencia de orden de origen), y esta es una victoria gigante para los desarrolladores y diseñadores.

CSS Grid le permite convertir HTML a lo que debería haber sido. En el diseño del contenido, no la visualidad, que está destinada a CSS.

Oreja

Si queríamos hacer lo mismo en Bootstrap, tendríamos que cambiar HTML. Tendríamos que elevar la etiqueta del menú a la fila superior, además del encabezado, porque el menú está en el segundo rehén de fila.

Hacer esto con la presencia de una solicitud de medios no es una tarea trivial. Esto se puede verificar solo con HTML y CSS, y tendría que meterse con JavaScript.

Este ejemplo muestra la gran ventaja de la cuadrícula CSS, que experimenté.

No más restricciones 12 oradores

Este no es el problema más grande, pero ella sacó muchos de ellos mismos. Dado que Bootstrap Grid se divide en 12 columnas, tendrá problemas si desea un diseño de cinco. O siete. O nueve. O de un número que no es doce.

Con la cuadrícula CSS, todo está mal. Puede hacer su propio diseño de tantas columnas de cuántas desean. Aquí hay un diseño de siete columnas.

Esto se hace configurando el valor Repetir (7, 1FR) para las columnas de plantilla de cuadrícula, como esta:

Tal vez haya una forma de pirateo de hacer una forma similar en Bootstrap ... y sé que Bootstrap 4 usa FlexBox, lo que hace posible para tal flexibilidad, pero aún así no saldrá de Beta.

Antes de completar este artículo, naturalmente, debe hablar sobre el apoyo de los navegadores. En el momento de escribir este artículo, el 75% del tráfico web global admite la cuadrícula CSS.

Pero antes de rechazar completamente la idea de usar la red CSS, le aconsejo que escuches lo que Morten Rand-Hendrixen lo dice. Afirma que la cuadrícula CSS es la capacidad de repensar la forma en que presentamos la compatibilidad atrasada:

"CSS Grid es un módulo de marcado, nos permite cambiar la marcación del documento sin interferir con el orden del código fuente. En otras palabras, CSS Grid es una herramienta absolutamente visual, y si se usa correctamente, no afectará las conexiones internas del contenido en el documento. A partir de esto, debería ser simple, pero un hecho asombroso: la falta de apoyo de la red CSS en el navegador anterior no debe influir en la percepción del visitante del sitio, simplemente debería cambiar esta percepción ".

En otras palabras, tan pronto como separe los contenidos de la visualidad, todos los visitantes verán los contenidos, pero CSS Grid verá lo mejor para aquellos que tienen su apoyo con mejores marcas.

Conclusión

"Cuanto más uso CSS Grid, más convenció de que no hay ninguna ventaja en agregar una capa de abstracción sobre ella. CSS Grid es un marco de marcado, cosido directamente al navegador ".