수년간 CSS를 작성한 후에도, 백분율을 픽셀로 계산하는 방법에 대한 설명을 찾을 수 없었습니다 (간단한 관찰 후에 직접 이해할 수 없음). 추가 설명 :CSS의 백분율 : 내부적으로 어떻게 계산됩니까?
한 div의 2 % 왼쪽 여백이 20 픽셀이되고 다른 30 픽셀이되는 이유는 무엇입니까? 너비가 역할을합니까? 이 경우 더 넓은 div가 더 큰 마진을 갖겠다는 것을 의미 할 것이다. 그러나 나의 관측으로부터 그것은 그렇지 않다!
확인 : http://JSNAIL.IT/uLjeYSHx/. div 클래스는 다른 클래스보다 크지 만 동일한 margin-right를 계산합니다. (11px)는
비율 내부 요소의 비율은 외부 컨테이너의 크기에 따라 다릅니다. 예를 들어 내부 div의 왼쪽 여백은 두 예제 모두에 대해 20 %로 설정됩니다.
_______________
| ___ |
|20%| | |
| |___| |
|_______________|
_______________________
| ___ |
|20% | | |
| |___| |
|_______________________|
다음을 확인하십시오 : http://JSNAIL.IT/uLjeYSHx/. div 클래스는 다른 클래스보다 크지 만 동일한 margin-right를 계산합니다. (11px) –
링크에있는 케이스. 컨테이너는 문서의 '
'이며 결과는 예상대로입니다.위의 대답에서 설명한 것처럼 마진은 외부 컨테이너의 크기에 따라 결정되기 때문입니다. 그래서 자신의 크기에 관계없이 모든 안쪽 상자의 여백은 동일합니다. – Rab알았습니다! 그것은 컨테이너의 크기에 달려 있습니다 .. (이상하지만!) –
마진의 비율은 스케일링에 상대적 상자의 따라 달라집니다. 그래서
당신이 상자에 걸릴 경우 그 다음 더있을 것입니다 전체 페이지에 걸쳐 비율을 가지고가는 경우 말의 너비는 200 픽셀입니다.
마지막 사례의 20 %는 40px가됩니다.
이것을 확인하십시오 : http://JSNAIL.IT/uLjeYSHx/. div 클래스는 다른 클래스보다 크지 만 동일한 margin-right를 계산합니다. (11px) –
에 따라 다릅니다. 백분율 값은 표준 (CSS2.1: 4.3.3 Percentages)에있어서, 각 속성에 대해 서로 다른 의미를 가질 수
(본 명세서에서
<percentage>붙이고) 비율 값의 형식은 즉시 '%'뒤에<number>이다.백분율 값은 항상 다른 값과 관련이 있습니다 (예 : 길이). 백분율을 허용하는 각 속성은 백분율이 참조하는 값도 정의합니다. 이 값은 동일한 요소에 대한 다른 속성, 조상 요소에 대한 속성 또는 서식 지정 컨텍스트의 값 (예 : 포함하는 블록의 너비) 일 수 있습니다. 루트 요소의 속성에 대한 백분율 값이 설정되고 백분율이 일부 속성의 상속 된 값을 참조하는 것으로 정의되는 경우 결과 값은 해당 속성의 초기 값에 대한 백분율입니다. 비율이 생성 된 박스의 함유 블록의 폭에 대하여 계산된다
예 마진
그들의 함유 블록 (CSS2.1: Margin properties)의 폭에 의해 계산된다. 이것은 'margin-top'과 'margin-bottom'에 대해서도 마찬가지입니다. 포함 블럭의 너비가이 요소에 의존하면 결과 레이아웃은 CSS 2.1에서 정의되지 않습니다.
quirksmode은 잘못된 상자 모델이 사용되므로 IE에서 많은 것을 망칠 것입니다.
좋은 기사는 아니며 w3schools입니다. – BiAiB