CSS의 A부터 Z까지

부모님과 조카가 자동차에 대해 A부터 Z까지 다 하려고 방에 들어가는 모습에서 영감을 얻었습니다.

접근성

많은 사람들이 잊어버리는 것이 있지만 대응만큼 중요하다고 생각합니다.

B 블록

글쓰기 방향에 수직입니다.

C 계산

CSS에서 계산을 수행합니다. 매우 편리합니다.

D 디스플레이

블록, 인라인, 인라인 블록, 플렉스, 인라인 플렉스, 그리드, 인라인 그리드, 없음 등

E : 비어 있음

자식 없이 요소를 스타일링하는 데 유용한 의사 클래스입니다. 공백이 없어야 합니다.

F 플렉스박스

처음 CSS를 시작했을 때 Inspector를 보고 이것저것 가지고 놀면서 배웠습니다. 그런 다음 플로트를 사용하여 레이아웃을 만든 사람을 복사했습니다. 그리고 물건을 배치하는 것이 너무 어려웠습니다. Flexbox에 대해 배운 것이 큰 변화를 가져왔습니다.

G 그리드

아직도 Flexbox의 더 복잡하고 강력한 형제처럼 느껴지는 것이 있습니다.

H 높이

가로로 차지하는 공간

나는 인라인

글쓰기 방향. margin-inline: auto를 사용할 수 있는 센터링에 매우 유용합니다.

J 정당화

Flexbox Zombies에서는 정당화 레이저를 사용하여 발사 방향에 있는 좀비를 타겟팅합니다.

K @키프레임

애니메이션 단계.

L 선 높이

텍스트가 너무 크거나 작으면 읽을 수 없게 보일 수 있습니다.

M마진

요소를 더 크게 만들지 않는 요소 주변의 공간

없음

무언가 표시를 중지하거나 테두리를 제거하는 데 유용합니다.

아 객체핏

이런 일이 예전부터 있었던 것 같지만, 얼마 전 비교적 획기적인 사실을 발견했습니다. 여기에는 object-fit이 새롭고 아직 모든 브라우저에서 작동하지 않는 문제에 대처하기 위해 누군가가 작성한 일부 JavaScript가 포함되어 있습니다.

P 패딩

요소 주위의 간격으로 인해 요소가 더 커집니다. 네거티브 패딩은 네거티브 마진과는 다릅니다.

Q 쿼리

반응형 디자인과 접근성을 위해 사용되는 미디어 쿼리와 컨테이너 쿼리

R 반응성

사이트가 모든 화면에 맞는지 확인하는 것이 중요합니다. 꽤 기본적인 것 같지만 일부 크기에 맞지 않는 사이트가 많이 있습니다.

S 특이성

제3자의 스타일을 재정의하려고 할 때 이것이 고통스럽습니다. 최근에 :where를 사용하는 일부 CMS 플러그인을 본 적이 있는데, 이는 많은 도움이 됩니다.

T텍스트

때때로 글꼴 스타일링에 사용됩니다. 그리고 때로는 글꼴을 사용합니다. 단, 텍스트 색상을 변경하려는 경우에는 둘 다 불가능합니다.

U 단위

가장 많이 사용되는 것은 %, px, em 및 rem입니다. 또한 그리드의 fr과 전환 및 애니메이션의 s 및 ms도 있습니다.

V 가시성

흥미롭게도 보이는 것의 반대는 숨겨져 있습니다. 논리적으로 생각하는 것과는 다릅니다.

W폭

가로로 차지하는 공간

X 오버플로-x

x에 대한 약간의 치트이지만 x로 시작하는 것은 없습니다. 이는 수평 오버플로를 제어합니다. x는 Tailwind에도 사용됩니다. 예를 들어 mx는 가로 여백입니다.

Y 오버플로-y

x와 마찬가지로 수직 오버플로를 제어합니다. 그리고 y는 일반적으로 Tailwind에서 수직을 나타냅니다.

Z z-인덱스

사용할 수 있는 최고/최저 Z-지수는 (-)2,147,483,647입니다. 아니면 무한대가 당신에게 똑같은 것을 줄 것입니다. 하지만 9를 입력한 다음 왜 작동하지 않는지 궁금해하는 것이 훨씬 간단한 방법입니다.

위 내용은 CSS의 A부터 Z까지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!