Lleva tus conocimientos de CSS a otro nivel

1

Tips para llevar tu conocimiento de CSS a otro nivel + Quices

¿De dónde venimos y en dónde estamos?

2

¿Cómo fue pensado CSS cuando se creó?

3

Limitaciones de CSS y el problema de los elementos flotantes

4

Herramientas que nos han facilitado el camino

¿Cómo se llegó al concepto de CSS Grid?

5

¿CSS Grid es una idea nueva? La evolución de la especificación

6

¿Qué significa Grid para CSS?

Control de alineamiento

7

Técnicas de alineamiento antes de CSS Grid: margin y line-height

8

Técnicas de alineamiento antes de CSS Grid: table-cell y positions

9

Técnicas de alineamiento antes de CSS Grid: pros y contras

10

Modos de escritura y ejes de alineamiento + Reto

11

Propiedades físicas y lógicas en CSS + Quiz

12

Técnicas de alineamiento con Flexbox

13

Dibujemos con CSS + Reto

Conceptos generales para comenzar a trabajar con CSS Grid

14

Grid y las relaciones padre e hijos inmediatos + Quíz

15

Lines, tracks, cell, area, gutters, grid axis, grid row, grid column + Reto

16

¡Iniciemos nuestro proyecto! Fase de creatividad e identificación de elementos

Propiedades y valores para el elemento padre

17

Creando nuestro contenedor: ¿display: grid o display: inline-grid?

18

Creando filas, columnas y espaciado + Reto

19

Alineamiento en el elemento contenedor + Quiz

20

Generación automática de tracks + Quíz

21

Funciones: repeat(), minmax() y fit-content()

Propiedades y valores para los elementos hijos

22

¡Manos al código! Fase de construcción de la grid principal de nuestro proyecto

23

Ubicación + Reto

24

Alineamiento en los elementos hijos + Quiz

25

¡Manos al código! Fase de ubicación y alineamiento

26

Continuando con la fase de ubicación y alineamiento

Lo que podemos lograr adicionalmente con CSS Grid

27

Responsive y CSS Grid

28

Continúa con el Curso de Diseño Web con CSS Grid y Flexbox

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Propiedades físicas y lógicas en CSS + Quiz

11/28
Recursos

Aportes 255

Preguntas 16

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Como comento Estefany no es importante aprenderse de memoria las propiedades debido a la gran cantidad que existe, por mi lado soy bastante malo memorizando, por lo que constantemente busco estrategias que me ayuden con este problema, la principal es darles sentido a las propiedades, estas no se crean aleatoriamente si no que cada una tiene un nombre lógico dependiente de su función, por lo que acordarse de ellas lo hace más fácil.

Para este caso, solo basta con considerar tres cosas:

  1. Seleccionar la sección del modelo de caja que necesitamos (padding, border, margin).
  2. Todas las distancias verticales son con block y las distancias horizontales con inline.
  3. Considerar nuestro modo de escritura, para start y end, donde start es donde empezamos a escribir y end donde terminamos.

Con estas tres consideraciones puedes armar la propiedad que quieras sin necesidad de aprendértelas.

Border-block-start ?

Que brutal el modelo caja lógico!!! 😱😱😱, me explotó la cabeza… aquí les dejo la diapositiva de los dos modelos de caja:

Es la Opción “B” border-block-start

Aqui estan las tablas del curso que estoy seguro que las debemos de tener muy en cuenta

¡Sí!, quiceeeeees, sería la B. border-block-start, por lo que veo, la nomenclatura es border-<alignment-type>-<alignmen-position> (tipo de alineación (block o inline) y posición de alineación (start o end)), por lo que block hace referencia al alineamiento vertical y inline hace referencia al alineamiento horizontal. Es más, repítelo cuando te vayas a dormir:
.
“Block es vertical, Inline es horizontal”
.
Jaja, yo sugeriría algo tipo border: vertical start 1px dotted #ccc, acaba siendo igual larga pero… habría que pensar en mejores alternativas 🤔.

<h3>MODELOS DE CAJA (Físicas - Lógicas)</h3>
  1. Propiedades físicas

  • MARGIN: margin-top | Margin-left | Margin-right | Margin-bottom

  • PADDING: padding-top | paddding-left | padding-right | padding-bottom

  • BORDER (-size-style-color): border-top | border-left | border-right | border-bottom

  • POSITIONS top | left | right | bottom.


  1. - Propiedades Lógicas

  • MARGIN: Margin-block-start | Margin-inline-start | Margin-inline-end | Margin-block-end

  • PADDING padding-block-start | paddding-inline-start | padding-inline-end | padding-block-end

  • BORDER(-size-style-color): border-block-start | border-inline-start | border-inline-end | border-block-end.

  • POSITIONS: inset-block-start | inset-inline-start | inset-inline-end | inset-block-end

No tenia ni idea del modelo de caja lógico!! hay mucho por aprender

Las propiedades lógicas me dejaron igual que la primera vez que ví el asincronismo en JavaScript 😱

Esto nunca lo había visto 😯 pero entonces el modelo de caja lógico es principalmente para accesibilidad?

Una representación grafica para que sea mas legible:

Yo llevo años trabajando con CSS, me gusta mucho el código y el front-end y quiero decirles que estoy sorprendido del significado real de trabajarcon start, end,block o inline, en propiedades donde normalmente se trabajabacon left, center, right, etc.

Esta información vale oro… apreciala, apunta, degústala!

Dos años despues del curso, las propiedades lógicas que nos enseña la profe, aun son una tecnología experimental, pero la buena noticia es que ya tiene un soporte global del 95% arpyx.

https://caniuse.com/?search=border-block-start

La respuesta al Quiz sería la opción B.
border-top = border-block-start

border-block-start

muchas diapositivas y poco codigo

**R: ** border-block-start

Esto se está tornando un poco místico,
“el flujo”
“donde comienza todo”
"a dónde llega"
estás en inline?
o eres un bloque?
que pesado 😦

Quiero llorar! mi cabeza aún no asimila esto pero ya hasta imprimí una hoja para tenerlos presente y empezar a reemplazar poco a poco

Buenas noches

B. Border-block-start

Me ayudó bastante a entenderle mejor a writing mode y box model logical en este artículo, Aquí la página.

https://angrytools.com/css-grid/ una página para practicar el uso de grid

Respuesta: B. Después de que la profe Estefany explicó cómo se acomodan los elementos en block y en inline, es fácil entender a que equivale (para nosotros, de mentalidad latina) top, left, right, bottom

R: border-block-start
B---border-block-start
Mi respuesta al Quiz: **B**
TIP: Si se les complica memorizar las propiedades pueden crear un ":root" en su hoja de estilos y ponerles nombres fáciles y cortos a sus atajos. Aquí pueden consultar como crearlo: <https://developer.mozilla.org/es/docs/Web/CSS/:root>

May I have your attention, please?

 

  • si el writting-mode es horizontal, entonces el “block” coincide con el eje top / bottom y el “inline” coincide con el eje left / right;
  • si el writting-mode es vertical o sideways, entonces el “block” coincide con el eje left / right y deducirán el resto…

 
inline no es horizontal y block no es vertical.
inline es en linea a la dirección del texto.
block es perpendicular a la dirección del texto.

Border-block-start
Estas imagenes me ayudaron a entender un poco más este tema: ![]()![](https://static.platzi.com/media/user_upload/image-932cf4f7-097e-4cfb-b54f-47060687b5e6.jpg) ![](https://static.platzi.com/media/user_upload/image-bd352677-7ce6-4fcb-91ad-cd71c97eb8c5.jpg) El equivalente de border-top sería: **border-block-start**
RP// border-block-start

Manejar block como “y”, manejar inline como “x”

inset-block-start -> inset-y-start

Pienso que la respuesta es la B “border-block-start”

border-block-start

Interesante, si se le pone un poquito de lógica, se entiende un poco mas y seria mas intuitivo:

margin-block-start
margin-block-end
margin-inline-start
margin-inline-end

border-block-start
border-block-end
border-inline-start
border-inline-end

padding-block-star
padding-block-end
padding-inline-start
padding-inline-end

Diferencias entre propiedades físicas vs propiedades lógicas









B

La C

B

La Respuesta al Quiz!

Es la B border-block-start

La respuesta es Border-Block-Start, deacuerdo a nuestro tipo de escritura segun entendi.

La respuesta es border-block-start 😃

css quiz: border-block-start

Answer: border-block-start

Es asombroso esa nueva medida que se esta tomando para general una compatibilidad alrededor del mundo, para los que se preguntan el link de las historia de versiones es https://caniuse.com/

writing-mode

💡 Permite cambiar la forma en como se muestra el texto dentro del sitio web

Valores

horizontal-tb

Valor por defecto que muestra el texto de manera horizontal y de arriba → abajo [tb] (top - bottom)

.card{
	writing-mode: horizontal-tb;
}

De arriba hacía abajo

vertical-lr

Muestra el texto de manera vertical y de lr (izquierda → derecha) [left-right]

.card{
	writing-mode: vertical-lr;
}

Izquierda a derecha

horizontal-rl

Muestra el texto de manera vertical y de rl (derecha → izquierda) [right-left]

.card{
	writing-mode: vertical-rl;
}

Derecha a izquierda

direction

<aside>
💡 Permite cambiar la dirección en la cual el texto realiza los saltos de línea cuando este se queda sin espacio para mostrar su contenido.

</aside>

Valores


Este tipo de propiedades se define en el padre de los elementos con texto o en el propio elemento HTML que contiene al texto

ltr

Valor por defecto que muestra el texto de izquierda a derecha (Left → Right).

Y es el esquema común para la creación de contenido en el conteniente latino, americano

Ejemplo

.card{
	direction: ltr;
}

rtl

Muestra el texto de derecha a izquierda (Right→ Left).

Y es el esquema común para la creación de contenido en otros contenientes.

Ejemplo

.card{
	direction: rlt;
}

Opcion B, block-block-start

La respuesta al Quiz es:

B. Border - block - start

border-block-start ;

reply to your quiz : The correct answer Is

  • B : border-block-start

Hermoso, conocimiento hermoso.

¿Cómo que border top? jajaja…sí, border-block-start

Temas increíblemente interesantes.

En principio pareciera que no son necesarios pues gran parte nosotros como hispanos trabajaremos en el mejor de los casos con sitios que usan horizontal izquierda a derecha.

Pero con electron y webassembly junto a la tendencia de que la aplicacion de escritorio sea básicamente una aplicacion web o que el programa en un lenguaje determinado sea compilado a js abre la necesidad de adaptar el layout y la direccion del contenido.

Si bien puede que nosotros mismos al ser responsables de una app no seamos quienes modifiquemos estos elementos en un nuevo mercado con un método de escritura diferente, lo cierto es que a quien lo modifique se le ahorra mucho tiempo pues es solo una modificación y no un nuevo port. Además no sería la primera vez que en occidente utilizamos sitios realizados con otros métodos de escritura, por lo que modificarlos y hacerlos utiles a nuestras necesidades es mucho mas fácil que clonarlos.

border-block.start

border-block-start

Una forma que uso para memorizas estas cosas es pensar en hacer una cruz.
Yo realizo la cruz comenzando con la linea vertical de arriba a abajo y luego la horizontal de izquierda a derecha.
Entonces uso la linea vertical para asociarla con el block. y como comienzo de arriba abajo lo asocio con el start y end.
Lo mismo con la linea horizontal, de izquierda a derecha.
start y end. y asimilarlo con inline.
Entonces luego solo para hacer memoria pienzo en la cruz.

Use ese metodo para recordar el justify-content y aling-items y me funciono muy bien, espero que a alguien le sirva.

¿Saben si el colapso de márgenes desaparece o sigo usando la norma de solo usar margin-bottom para espaciar objetos? Claro en este caso sería margin-block-end.

Esto se aplica tanto para Margin, Border, Padding

TOP = Block-Start
RIGHT = Inline-End
BOTTOM = Block-End
LEFT = Inline-Start

Por lo que el pequeño Quiz es: border-block-start

border-block-start…

Border block start

Quiz!!!
B: border-block-start

border block star

Por lo que explica, la opcion es “B”

Facilito el tuto

La respuesta del Quiz es la B

respuesta para el Quiz: B= Border-block-start

boder top = B border-block-start

Border-block-start

La respuesta es la “b” border-block-start

La respuesta es B) border-block-start, como ejemplo dejo la imagen.

La respuesta sería:

border-block-start

quiz: desde mi punto de vista, < border-block-start >

border-top-start ?

La respuesta al Quizz: el border-top es equivalente a
Border-block-start

La respuesta desde mi entendimiento es la B, que obedece a

Border - Block - Start

Guiandose del elemento Block que se orienta de manera vertical, y start marcando el inicio de su cobertura.

Me sorprendió este nuevo modelo de caja lógico, los veía en el editor de código pero nunca pensé que fueran la alternativa al modelo de caja físico. A mi parecer es solo cuestión de asimilarlo con los display block e inline. Display block te acomoda los elementos en bloque (verticalmente) y display inline te acomoda los elementos en línea (horizontalmente).

Lo mejor que se me ocurre para una mejor sintáxis es:

border: block-start inline-end 1px solid #ffffff;

O si se quiere aplicar estilo para todo el box-model

border: block inline 1px solid #ffffff;

Jaja si es complicado

Nunca habia pensado en los arabes en mis proyectos, sinceramente, jaja

me siento perdido sin dirección, pero algún lugar nos debe llevar 💪

Entendiendo que “start” representa el punto de inicio de derecha a izquierda y “Block” representa el punto de inicio de Arriba hacia abajo.
“End” es el punto final a la derecha y “Inline” representa la alineacion horizontal
Respuesta al Quiz: Border-Top = Border-block-start

B. border-block-start

La respuesta del quiz es la -B) border-block-start

Revisando caniuse.com, hoy en Marzo-2022 las propiedades lógicas de CSS ya han llegado al 95.92% de compatibilidad global!!

Es curioso, pero el cambio de nombre para las logical properties no me costo trabajo entenderlo, de paso para reafirmarlo, hice de nuevo el ejercicio con margin de la clase 7 usando los logical properties .

@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px;
  font-family: 'Lato', sans-serif;
  width: 550px;
}

.container {
  background: turquoise;
  display: block;
  width: 180px;
  height: 180px;
}

.element {
  width: 60px;
  height: 60px;
  text-align: center;
  padding-top: 10px;
  box-sizing: border-box;
}

.element1 {
  @extend .element;
  background: papayawhip;
  margin-block-start: 0;
}

.element2 {
  @extend .element;
  background: papayawhip;
  margin-block-start: 60px;
}

.element3 {
  @extend .element;
  background: papayawhip;
  margin-block-start: 120px;
}

.element4 {
  @extend .element;
  background: pink;
  margin-block-start: 0;
  margin-inline-start: 60px;
}

.element5 {
  @extend .element;
  background: pink;
  margin-block-start: 60px;
  margin-inline-start: 60px;
}

.element6 {
  @extend .element;
  background: pink;
  margin-block-start: 120px;
  margin-inline-start: 120px;
}

.element7 {
  @extend .element;
  background: lightcyan;
  margin-block-start: 0;
  margin-inline-start: 120px;
}

.element8 {
  @extend .element;
  background: lightcyan;
  margin-inline-start: 120px;
  margin-block-start: 60px;
}

.element9 {
  @extend .element;
  background: lightcyan;
  margin-block-start: 120px;
  margin-inline-start: 120px;
}

La respuesta es:

border-block-start

Rpta. B

quiz answer: border block start

Voy a tener que cambiar todos mis proyectos : (

B. Border-block-start

La respuesta sería Border-block-start, ya que según comprendí, las propiedades con el block aplican para el top y el bottom, y las de Inline para left y right, y start por el sistema en que leemos nosotros que es de izquierda a derecha y arriba hacia baja, arriba aplicaría como el inicio de todo junto con el left.

es la B: block star

Ese modelo de caja lógico me voló la cabeza… Wow ya tenia algo de noción pero aun así fue brutal!

La respuesta al Quiz seria opción B)

La respuesta del Quiz seria B
border-block-start

No tenia ni idea de esto, ni siquiera lo había escuchado antes 🤯

Border-block-start

Me gusta usar mas las propiedades lógicas si deseo hacer un margin en el eje X o Y es cuestión de escribir:

margin-block: 1rem 2rem; // top , bottom
margin-block-start: 1rem;
margin-block-end: 2rem

La respuesta es la opción B