숙련된 운전기사가 CSS가 왜 가장 어려운지에 대해 이야기해 드립니다! !

이전 소개해드린 글은 "CSS에서 버튼에 배경 이미지 추가하는 방법(자세한 설명 및 예시)"이라는 아트 디자인 관련 글입니다. 이 기사에서는 CSS는 과학이 아니라 예술이라고 말합니다. 친구들이여, 와서 한번 보세요.

CSS를 배우기 어려운 이유는 무엇인가요?

지난 6개월 동안 Zhihu에서 좋은 프런트엔드 문제를 본 적이 없는데 이 질문이 마음에 와 닿았습니다. 지난 1년간 학생들은 CSS를 합리적으로 이해하려고 끊임없이 노력했지만 모두 실패했습니다. 나는 그들에게 CSS에는 논리가 없다고 말했습니다! 그들은 그것을 믿지 않습니다. 이 질문과 답변은 제가 이해한 내용을 아주 잘 설명할 수 있습니다.

내 답변은 다음과 같습니다.

짧은 답변: CSS는 직교하지 않기 때문입니다.

긴 답변:

먼저 직교성이 무엇인지 설명하겠습니다.

모니터의 "밝기", "색조", "채도"를 조정하세요.

• "밝기"는 밝기와 어둠의 정도입니다. 값이 클수록 화면이 밝아집니다.
• "색조"는 색상을 조정하여 빨간색을 녹색으로 바꿀 수 있습니다.
• "채도"는 선명도의 정도입니다. 값이 클수록 선명해집니다.

"직교"는 세 가지 중 하나를 조정해도 다른 두 가지의 효과에 영향을 주지 않는다는 의미입니다.

• "밝기"를 조정해도 "색조" 및 "채도"는 변경되지 않습니다.
• "색조"를 조정해도 "밝기"와 "채도"는 변경되지 않습니다.
• "채도", "밝기" 및 "색조"를 조정해도 변경되지 않습니다.

'직교'는 당연할 것 같죠?

"비직교" 상황을 상상해 보세요. "밝기"를 조정하면 "색조"와 "채도"가 불규칙하게 변경됩니다. 이 경우 원하는 효과로 조정하기가 어렵기 때문에 조정하고 싶을 것입니다.

그리고 CSS는 "직교"가 아닙니다.

예를 들어 margin-left에 너비 효과를 적용했습니다.

. .parent의 .child 너비는 300px입니다. 이제 다음을 추가합니다. margin-left: -10px ,

전체 .child가 왼쪽으로 10픽셀 이동한 것을 알 수 있습니다

좋아, margin-left: -10px가 왼쪽으로 이동한다는 것을 알 수 있습니다. 전체 요소를 왼쪽으로 이동합니다. 이것이 정말로 사실입니까? 이때 width를 제거하고 다시 실험해 보세요. margin-left를 추가하기 전:

요약하자면:

너비가 지정되면 margin-left: 10px는 요소를 전체적으로 왼쪽으로 이동합니다.

• 너비가 지정되지 않으면 margin-left: 10px만 이동합니다. 가장자리를 왼쪽으로 (즉, 너비가 확장됨)

• 이를 보면 CSS가 특히 비직교적이라는 것을 느낄 수 있습니다.

왜 너비의 존재가 margin-left 기능에 영향을 줍니까?

• 여백 왼쪽 기능에 영향을 미치는 너비 외에 다른 속성이 있나요? 당신이 모를까 봐 걱정됩니다.

• 이것은 비직교성의 공포입니다. 모든 속성을 margin-left와 함께 사용해야만 margin-left의 실제 규칙을 알 수 있습니다.

이것은 단지 두 가지 속성의 영향일 뿐입니다. 세 가지 속성이 서로에게 미치는 영향을 상상할 수 있습니까?

두 번째 예를 들어보겠습니다. 모두가 그 위치를 알고 있습니다. 고정은 뷰포트를 기준으로 배치됩니다.

하지만 이 "진실"은 또 다른 요소의 영향을 받게 됩니다... 예, 충격을 받으신 건 압니다...

먼저 일반적인 상황을 살펴보겠습니다.

웹페이지 오른쪽에는 iframe이 있습니다. 빨간색 .fixed 요소는 iframe 뷰포트의 왼쪽 상단을 기준으로 위치하며 이는 우리의 기대와 일치합니다.

다음으로 .box에 CSS3 속성을 추가하면 인식이 바뀔 것입니다.

상위 컨테이너에 변환을 추가한 후 고정 위치 요소는 실제로 상위 컨테이너를 기준으로 배치됩니다.

내가 이미 진실이라고 믿는 것에 영향을 미치기 위해 앞으로 CSS에 더 많은 요소가 추가될지 누가 알겠습니까?

이것이 "비직교"의 역겨운 점입니다.

또 다른 예를 들어보겠습니다. 고정 너비 p에 margin: 0 auto를 추가하면 수평으로 중앙에 배치될 수 있다는 사실을 많은 사람들이 묻습니다. 왜 margin: auto 0을 사용할 수 없는지요(auto와 0의 위치에 유의하세요). 반대) 수직 센터링은 어떻습니까?

사실 가능합니다.

그러나 현재 요소의 위치가 top: 0;이면 수직으로 중앙에 배치되어야 합니다. 이것은 매우 "비직교"입니다.

"비직교"를 배우는 방법은 무엇입니까?

방법은 한 가지뿐입니다. 시도해 보세요.

더 많은 조합을 시도할수록 다양한 이상한 현상을 더 잘 이해할 수 있습니다.

다른 방법은 없습니다.

현재 CSS에서 흔히 사용되는 속성은 50개로 집계됩니다. 두 가지 속성 조합의 경우 총 50*49/2 = 1225 상황이 있고, 세 가지 속성 조합의 경우 총 50*49*48/6 = 19600 상황이 발생합니다. 상황. 여기에는 상위 요소와 하위 요소 간의 상호 작용이 포함되지 않습니다.

젊은이여, 평생 천천히 해보세요.

현재 우리는

• 다른 속성의 조합이 다른 효과를 갖는다는 것을 알고 있습니다.

• 새로운 속성은 학습한 지식에 영향을 미칩니다.

• 이 규칙에는 논리가 전혀 없습니다. 시도해 보기만 하면 됩니다. 밖으로.

이것이 CSS가 배우기 어려운 이유입니다.

내 경험상 사람이 이성적일수록 CSS를 이해하기가 더 어렵습니다. 사람이 감정적일수록 CSS를 이해하기가 더 쉽습니다.

이것이 대부분의 백엔드 프로그래머가 JS를 배울 수 있지만 CSS는 배울 수 없는 이유입니다. 그들은 너무 합리적입니다.

프로그래밍을 배우는 것과 같은 방식으로 CSS를 배우고 싶나요? 포기하다!

그림 그리는 법을 배우는 것과 같은 방식으로 CSS를 배워야 합니다. 매일 계속 그림을 그리고 다양한 방법으로 계란을 천 번 그리면 끝납니다.

그래서 제가 수업 시간에 이렇게 말했습니다.

CSS는 과학이 아니고 CSS는 예술입니다.

P.S. "The Art of Unix 프로그래밍"에서 "직교" 개념을 배웠습니다. Zhihu에 시간을 덜 투자해서 더 읽어보세요.

추천 학습: CSS 비디오 튜토리얼

위 내용은 숙련된 운전기사가 CSS가 왜 가장 어려운지에 대해 이야기해 드립니다! !의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!