Michelle Barker가 제가 가장 좋아하는 블로그 게시물을 작성했습니다. 짧고 실용적이며 시간을 위한 귀중한 정보를 남깁니다. 여기, 그녀는 CSS의 논리적 속성 속기법에 대해 알아봅니다., 특히 단일 축에만 길이를 설정하는 경우, 블록(수직) 축 또는 인라인(수평) 축만 말합니다.
내가 "블록"과 "인라인"이라고 말하는 이유는 논리적 속성에 관한 한 x축이 현재의 흐름에 따라 수직축처럼 동작할 수 있기 때문입니다. writing-mode.
그래서, 우리가 항상 가지고 있었던 곳 padding, margin및 border 다중 값 구문을 지원할 수 있는 속기에는 다른 축의 길이를 설정하지 않고 특정 축의 길이를 선언할 수 없습니다.
예 :
/* This gives us margin on the inline axis */
margin: 0 3rem;...하지만 우리는 거기에 도달하기 위해 다른 축을 설정해야 했습니다. 그러나 논리적 속성을 사용하면 각 축에 대한 추가 속기가 있습니다. margin-inline 인라인 축에서 특별히 작업하기 위한 속기:
margin-inline: 3rem;Michelle은 전달에서 내가 가장 좋아하는 논리적 속성 속기를 언급합니다. 이런 종류의 곡에 몇 번이나 위치를 지정합니까?
.position-me {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}우리는 그 네 줄을 inset: 0. 또는 다음을 사용하여 블록과 인라인 축을 직접 대상으로 지정할 수 있습니다. inset-block 와 inset-inline각각.
우리가 속기로 이야기하는 동안, 나는 항상 주의할 점을 말씀드리고 싶습니다. "우연한" CSS 재설정. 단 하나의 내가 저지르는 흔한 CSS 실수.
