집 > 기사 > 웹 프론트엔드 > HTML에서 다양한 유형의 상자 기준선을 결정하는 방법

HTML에서 다양한 유형의 상자 기준선을 결정하는 방법

이번에는 HTML에서 다양한 유형의 상자 기준선을 결정하는 방법을 보여 드리겠습니다. HTML에서 다양한 유형의 상자 기준선을 결정할 때 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

상자의 기준선 결정 규칙

1.1 인라인 블록의 기준선 결정

'인라인 블록'의 기준선은 둘 중 하나가 없는 한 일반 흐름의 마지막 줄 상자의 기준선입니다. 유입 라인 상자 또는 'overflow' 속성에 'visible' 이외의 계산된 값이 있는 경우 기준선은 bottom margin 가장자리입니다.

1.2 교체 기준선

하단을 결정합니다. margin edge

1.3 인라인 기준선 결정

은 포함된 텍스트의 기준선입니다

1.4 인라인 테이블의 기준선 결정

'인라인 테이블'의 기준선은 첫 번째 행의 기준선입니다. table

1.5 OK 블록의 기준선

각 블록에는 일반적으로 많은 요소 행이 포함되어 있으므로 각각 라인 상자에 해당하는 기준선도 많이 있습니다. 2장을 참조하세요.

1.6 Flex 결정 - 상자 각 줄의 기준선(향후 변경이 필요할 수 있음)

연속 가장 높은 Flex 항목의 텍스트 첫 번째 줄의 기준선을 현재의 기준선으로 사용합니다. line of the flex-box

1.7 line-box의 기준선 결정(더 복잡함)

우선, 다른 유형의 상자와 달리 CSS 2.1은 line-box 기준선의 위치를 정의하지 않습니다. 기준선은 불확실하며 인라인 요소의 내용이나 스타일이 변경되면 변경됩니다. 변경 방법에 대한 자세한 내용은 두 번째 섹션을 참조하세요

라인 박스의 기준선 위치에 영향을 미치는 요소는 무엇인가요

라인 박스와 같은 높이의 요소가 라인에 있는 경우

왜냐하면 요소는 이미 현재 줄과 높이가 동일하므로 elem에 설정된 vertical-align은 그 자체로는 시각적 효과가 없지만 현재 줄 상자의 기준선 위치에 영향을 미칩니다.

행에 서로 다른 수직 정렬 값을 가진 여러 요소가 있는 경우 이러한 모든 수직 정렬 값을 동시에 충족하기 위해 라인 상자 기준선의 위치도 적절한 위치로 이동됩니다. 위치에 따라 Zhejiang 라인박스의 높이가 자주 변경됩니다.

이 사례를 읽으신 후 방법을 마스터하셨다면 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 참고하세요. !