CSS에서 백분율 여백 계산에 대해 잘 모르는 부분
대부분의 웹 디자이너들은 CSS를 꽤 잘 알고 있다고 생각합니다. 어쨌든 그다지 그다지 중요하지 않습니다. 셀렉트 타입 몇 개, 속성 12 개, 그리고 캐스 케이 딩 규칙은 상식을 고수하기 때문에 간신히 기억해야합니다. 그러나 당신이 핵심적인 수준으로 내려 가면 디자이너들이 진정으로 이해할 수있는 많은 명확하지 않은 세부 사항들이 있습니다..
지난 6 개월 동안 온라인으로 제공 한 무료 CSS 테스트의 결과를 검토 한 결과, 하나의 질문은 거의 아무도 권리가있어.. 시험에 응시 한 수천 명의 사람들 중에서, 14 % 미만이 맞다..
이 질문은 다음과 같이 요약됩니다. 백분율 마진은 어떻게 계산합니까??
질문
사이트에 컨테이너가 있다고 가정 해 보겠습니다. div, 그 안에 콘텐츠 div:
이제 그 내용을 알려 드리겠습니다. div 상단 여백 :
.콘텐츠 margin-top : 10 %;
좋아, 그럼 10 % ...하지만 10 % 뭐? 그 질문입니다. 사람들의 13.8 % 만 제대로 대답 할 수 있습니다.. 그리고이 사용자는 Google에 액세스 할 수 있습니다.!
이 질문에 대해 내가 좋아하는 것은 대답이 분명해야하는 것처럼 보입니다.. 너무나 많은 사람들이 대부분의 사람들이 추측을하고 있다고 생각합니다. 하지만 어쩌면 하지 않는다 너에게 분명해 보인다. 제 말은, 당신이 정말로 당신의 상상력을 사용한다면, 브라우저가 이것과 같은 마진을 계산할 수있는 많은 방법이 있다는 것입니다..
테스트의 질문이 실제로 객관식이기 때문에 내가 당신을 위해 그것을 좁히면 어떻습니까? 옵션은 다음과 같습니다.
- 콘텐츠 div의 높이의 10 %
- 컨테이너 div의 높이의 10 %
- 콘텐츠 div의 너비의 10 %
- 컨테이너 div의 너비의 10 %
이 목록에서 올바른 응답을 선택할 수있는 사람은 13.8 %뿐입니다. 그게 기회보다 나쁜거야.!
대답을 자세히 살펴보십시오. 정말로 알아야 할 두 가지 사항 만 있습니다.
컨테이너 또는 내용?
첫째, 콘텐츠 div 자체의 크기 또는 컨테이너 div의 크기에 기반한 여백의 크기?
이제 이것은 내놔는 아니지만, 당신은 아마 당신의 본능을 믿을 수 있습니다. div를 컨테이너 너비의 50 %로 설정 한 다음 왼쪽 여백과 오른쪽 여백을 나머지 여백에 채우려면 자연스럽게 각 여백을 25 %로 설정해야합니다 (백분율이 100 %). 이를 위해 비율 마진은 컨테이너의 크기를 기반으로해야합니다.
시험을 치르는 사람들의 2/3가 바로이 부분을 얻습니다..
너비 또는 높이?
둘째, 해당 요소의 너비 또는 높이를 기준으로 여백 상단의 크기입니다.?
당신이주의를 기울 였다면, 아마 당신은 이미 경계 중입니다. 소수의 사람들이 옳은 대답을 선택하기 위해서는 이것이 바로 트릭 질문이되어야합니다.?
그럼에도 불구하고 나는 당신이 간신히 그것을 믿을 수 있다고 확신합니다. 대답 있지 않다. 신장. 음, 그렇지 않습니다..
그렇습니다, 우리는 여기에 최고의 마진을 말하고 있습니다. 예, 여백의 크기는 수직 측정입니다. 예, 블록 높이가 컨테이너 높이의 50 %이고 위쪽 여백을 25 %로 설정하면 컨테이너 높이의 25 %가됩니다.. 그리고 네가 틀렸어..
높이가되어야한다고 생각한다면 나쁘다고 생각하지 마십시오. 테스트를받는 사람들 중 거의 80 %가 당신과 동의합니다 :
그것은 감각을 만든다. .. No, Really!
아직도 그것을 믿지 않아? W3C CSS 스펙의 인용문은 다음과 같습니다.
백분율은 생성 된 상자의 포함 블록의 너비와 관련하여 계산됩니다. margin-top과 margin-bottom에서도 마찬가지입니다..
당신이 궁금해하는 경우에 대비하여, 위쪽 및 아래쪽 패딩에 대해서도 마찬가지입니다. 테두리의 경우 너비를 백분율로 지정하는 것은 불법입니다..
따라서 지금 시점에서 CSS 작성자는 단골 손님, 또는 그들은 방금 정말로 바보 같은 실수를했다. 그러나 여기에 포함 된 블록의 너비에 수직 여백을 설정해야하는 두 가지 이유가 있습니다.
수평 및 수직 일관성
물론 블록의 네면에 대한 여백을 지정할 수있는 속기 속성이 있습니다.
마진 : 10 %;
다음과 같이 확장됩니다.
margin-top : 10 %; margin-right : 10 %; margin-bottom : 10 %; margin-left : 10 %;
자, 만약 당신이 위의 두 가지 중 하나를 썼다면 아마도 블록의 네면의 여백이 같은 크기가 될 것이라고 생각할 것입니다. 그렇지 않습니까? 그러나 margin-left와 margin-right가 컨테이너의 너비를 기반으로하고 margin-top과 margin-bottom이 높이를 기반으로한다면, 그들은 보통 다르다.!
순환 의존성 피하기
CSS는 페이지 아래쪽에 세로로 쌓인 블록으로 내용을 배치하므로 일반적으로 블록 너비는 부모의 너비에 따라 결정됩니다. 즉, 무엇에 관한 걱정없이 블록의 너비를 계산하십시오. 내부 그 블록.
블록 높이는 다른 문제입니다. 보통, 높이 그 내용의 높이를 합한 것에 달려있다.. 내용의 높이를 변경하면 블록 높이가 변경됩니다. 문제보기?
내용의 높이를 얻으려면 내용의 위쪽과 아래쪽 여백을 알아야합니다. 그리고 그 마진이 상위 블록의 높이에 달려 있다면 다른 블록을 모른 채 계산할 수 없으므로 문제가 발생합니다.!
수직 마진을 폭 컨테이너의 둥근 종속성이 순환 종속성을 깨고 페이지를 배치 할 수있게합니다..
에이스 클래스
시험에 대해 가장 어려운 질문이 있습니다. 이제 대답 할 수 있습니다. 나머지 테스트에서 어떻게 할 지 알고 싶습니까? 직접 해보십시오. 약속 할게, 대부분의 질문은 이것보다 훨씬 쉽습니다..
한편, 나는 가장 힘든 질문을 찾고 있습니다! 아무도 모른다 고 생각하는 CSS의 세부 사항?
편집자 주 : 이것은 Hongkiat.com을 위해 작성되었습니다. 케빈 얀크. Kevin은 1999 년 이래로 PHP, CSS 및 JavaScript에 대한 책을 저술 한 웹 사이트에 대해 작성했습니다. 그는 또한 팟 캐스트를 주최하고 회의에서 말하고 웹에 관한 비디오 교육을 제작했습니다. 그는 현재 온라인 테스트를 만들고 입수 할 수있는 웹 애플리케이션 인 Sit the Test의 개발 팀을 이끌고 있습니다..
Hongkiat에 대한 추가 정보 :
- 웹 디자인 : CSS로 칼럼 높이 동일
- 콘텐츠를 수직 정렬하는 6 가지 CSS 트릭
- CSS 단위로보기 : 픽셀, EM 및 비율
- 둘러보기 : CSS3 상자 크기 조정
지금 읽기 : 숨겨진 CSS3 속성 알아야 할 10 가지
