CSS의 폭과 높이의 복잡성을 탐색합니다

Uri Shaked와 Michal Porag가 공동 저술 한이 기사는 CSS 폭과 높이 계산의 복잡성을 탐구합니다. CSS 사양의 광범위한 디버깅 및 분석을 바탕으로 요소 차원의 자주 예측되지 않은 동작을 풀어줍니다.

기본 개념 :

width: 640px; 및 height: 360px; 결과 640x360 픽셀 요소가 나타납니다. 그러나 패딩을 추가하면 이것을 변경합니다. padding: 10px; , 기본 content-box box-sizing 로 인해 렌더링 된 크기가 660x380px가됩니다. 박스 모델은 다음과 같이 너비와 높이를 계산합니다.

• 너비 : width padding-left padding-right border-left border-right
• 높이 : height padding-top padding-bottom border-top border-bottom

이것은 블록 레벨 요소에 적용됩니다 (예 :<div> ,,,<code><p> ,,,<code><main></main> ), 사용 가능한 너비를 채우도록 자연스럽게 확장됩니다. 인라인 요소는 다르게 행동합니다.

인라인 요소 뉘앙스 :

인라인 요소의 경우 (예 :<span></span> ), width 와 height 크게 무시됩니다. 치수는 내용에 따라 결정됩니다. 인라인 요소 내에서 블록 요소를 중첩하면 인라인 흐름이 방해되어 이러한 구별이 강조됩니다. 인라인 요소는 또한 top 및 bottom 마진을 무시합니다.

부모-자식 상호 작용 :

부모-자식 관계는 차원 계산에 크게 영향을 미칩니다.

• 상대 단위 : 백분율은 부모 요소의 차원과 관련이 있습니다. width: 100%; 부모의 너비를 채택합니다. 높이도 비슷하게 동작합니다.

• 패딩 및 마진 : 백분율 기반 패딩 및 마진은 수직 값에 대해서도 항상 부모의 너비 와 관련이 있습니다. 이 "패딩 핵"은 종횡비 속성이 선호되지만 aspect-ratio 상자를 생성하는 데 사용됩니다.

• display: inline 및 inline-block : display: inline; display: inline-block; 인라인 동작과 블록 레벨 박스 모델 계산, margin , width 및 height 결합합니다.

주기적 비율 크기 :

선언 된 폭이없는 부모 내에서 상대 너비 (예 : 33% )를 가진 아동 요소는 "순환 비율 크기 크기"시나리오를 만듭니다. 브라우저는 자녀의 내용에 따라 부모의 너비를 반복적으로 계산 한 다음 새로 계산 된 부모 너비에 비해 자녀의 비율 너비를 적용합니다.

min-width , min-height , max-width , max-height :

이 속성은 최소 및 최대 크기 제한을 정의합니다. 명시적인 너비 (예 : 100% )에도 max-width 요소의 크기를 제한 할 수 있습니다. 학부모 요소가 관련 될 때, 특히 디스플레이와 관련된 결과를 스와핑하는 width 과 max-width 생성 할 수 있습니다 display: inline-block; .

min() , max() 및 clamp() :

이러한 기능은 미디어 쿼리없이 반응 형 크기를 제공합니다.

• min() : 인수의 최소값을 반환합니다.
• max() : 인수의 최대 값을 반환합니다.
• clamp() : min() 과 max() 의 조합.

이러한 기능은 반응 형 요소 차원을 정의하는 간결한 방법을 제공합니다.

결론:

CSS 폭과 높이 계산은 놀랍게도 복잡합니다. 명시 적 값이 지정되지만 렌더링 된 치수는 박스 모델, 요소 유형 (블록 대 인라인), 부모-자녀 관계, 상대 단위 및 기타 요인의 영향을받습니다. 이러한 복잡성을 이해하는 것은 정확한 레이아웃 제어에 중요합니다.

저자 : Uri Shaked와 Michal Porag

위 내용은 CSS의 폭과 높이의 복잡성을 탐색합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!