인라인 요소의 형식 지정 순서: 글꼴 크기-->em 상자-->콘텐츠 영역-->인라인 상자-->기준선을 기준으로 인라인 상자 배치-->라인 상자의 높이 결정
관련 개념 :
leading(줄 간격): 텍스트의 두 줄 사이를 채우는 리드 바를 의미하며, 이는 행 높이와 글꼴 크기의 차이와 동일합니다. 텍스트 위에 나머지 절반은 텍스트 아래에 추가되며 대체되지 않은 요소에만 사용됩니다.
emBox: em 상자는 줄 간격 없이 기준선 사이의 거리를 나타냅니다. 문자 사이의 경계는 지정되지 않습니다. 실제 문자 모양은 em 상자보다 크거나 짧을 수 있습니다.
font-size : 주어진 글꼴에 대한 em 상자의 높이를 결정하지만 실제 표시되는 문자가 이 크기일 것이라는 보장은 없습니다. 글꼴 크기 속성과 실제 글꼴 크기 간의 특정 대응 관계는 글꼴 디자이너에 의해 결정됩니다.
기준선: 대부분의 문자가 "앉는" 선과 그 아래로 디센더가 확장되는 선은 한자의 아래쪽 가장자리가 아니라 영문자 "x"의 아래쪽 가장자리입니다.
콘텐츠 영역(콘텐츠 영역): 비대체 요소는 글꼴 크기에 의해 간접적으로 결정되는 em 상자로 구성된 상자입니다. 요소의 고유 높이와 가능한 여백 및 상자가 포함됩니다.
인라인 상자(inline box): 가상 직사각형 상자, 표시할 수 없으며 크기는 콘텐츠 영역에 행간을 더한 값입니다. 대체되지 않은 요소의 경우 줄 높이 값과 같고, 대체된 요소의 경우 콘텐츠 영역의 높이와 같습니다. 동일한 줄 내의 여러 요소는 줄 높이와 인라인 상자 높이가 다를 수 있습니다.
라인 상자(line box): 라인의 모든 인라인 상자 중 가장 높은 점과 가장 낮은 점을 포함하는 가장 작은 상자입니다. 이 줄의 요소 및 line- 높이는 직접적인 관계가 없으며 상위 요소의 높이와도 관련이 없습니다. 인라인 상자는 수직 정렬 속성 값에 따라 줄 내에서 수직으로 정렬됩니다.
익명 텍스트: 는 인라인 요소에 포함되지 않은 모든 문자열을 나타냅니다.
line-height: 각 요소 상자의 증가 또는 감소 정도를 결정하는 텍스트 줄의 기준선 사이의 거리를 나타냅니다. 기본값은 요소 자체의 글꼴 크기의 1.2배입니다.
line-height 값이 상위 요소에서 상속되면 하위 요소(em 등)에서 계산된 값이 아닌 상위 요소에서 계산된 값을 상속받습니다. 배율 인수(단위가 없는 순수한 숫자 값)인 경우 배율 인수와 하위 요소의 글꼴 크기의 곱이 계산되는 것이 아니라 배율 인수가 상속됩니다.
그림 1:
그림 2: CSS의 줄
그림 3: 줄 상자 높이 결정
요소 교체
여백과 테두리 교체된 요소가 영향을 미칩니다. 해당 요소는 라인 상자의 높이에 영향을 미치는 인라인 상자입니다.
, ,
교체되지 않은 요소
교체된 요소를 제외한 다른 모든 요소는 대체되지 않은 요소입니다. 실제 콘텐츠는 문서 흐름에 있으며 CSS의 시각적 서식 모델은 대체되지 않은 요소의 렌더링을 담당합니다.
대체되지 않은 요소의 여백과 테두리는 선 요소의 인라인 상자 높이에 영향을 주지 않습니다.
vertical-align: 세로 정렬, 인라인 요소, 대체 요소 및 테이블 셀에만 적용 가능하며 상속될 수 없습니다.
기본값은 인라인 요소의 기준선을 줄의 기준선에 맞춰 정렬하는 기준선입니다. 이미지, 양식 입력 요소 또는 기타 대체 요소와 같이 수직으로 정렬된 요소에 기준선이 없는 경우 요소의 아래쪽 가장자리 를 상위 요소의 기준선과 정렬합니다.
해당 줄 아래에는 찾을 수 있는 디센더를 위한 공간이 있습니다. f, j, p 및 q와 같은 문자 수정 방법: 이미지의 수직 정렬 속성 값을 설정하거나 디스플레이:블록을 변경하거나 상위 요소의 글꼴 크기/줄 높이를 수정하여 인라인 높이를 만듭니다. 이미지보다 상자가 작습니다. 부모 요소의 글꼴 크기:0;의 극단적인 경우에는 중심선과 기준선이 일치합니다. 하단: 요소의 인라인 상자 하단을 라인 상자 하단과 정렬합니다.
중간: 인라인 요소 상자의 중심선을 기준선 위 0.25em 지점에 정렬합니다. 이는 기준선으로부터의 거리가 소문자 x 높이의 절반(예: 0.5ex)인 것과 같습니다. x 문자의 중간점은 컨텐츠 영역의 절대 중심선이 아닙니다. x 문자가 다소 가라앉기 때문입니다. 퍼센트: 요소의
줄 높이
를 기준으로 계산합니다. 인라인 교체 가능 요소의 줄 높이 기능은 수직 정렬 계산을 돕는 것입니다. 특정 길이 값: 상위 요소의 기준선을 기준으로 지정된 거리만큼 요소를 올리거나 내립니다. 수직으로 정렬된 텍스트는 다른 줄의 텍스트를 덮지 않습니다. 현재 줄의 줄 높이에만 영향을 미치므로 가장 높은 인라인 상자의 위쪽과 가장 낮은 인라인 상자의 아래쪽을 포함할 수 있을 만큼 커집니다.
Inline-block: inline-block
인라인 블록은 기본적으로 기준선 정렬이 되어 있지만 기준선 결정에는 특별한 규정이 있습니다. 그만큼 '인라인 블록'의 기준선은 블록의 마지막 줄 상자의 기준선입니다. 유입 라인 상자가 없거나 '오버플로'된 경우를 제외하고 정상적인 흐름 속성에 'visible' 이외의 계산된 값이 있습니다. 이 경우 기준선은 아래쪽 여백 가장자리이므로 아래에 표시된 레이아웃이 나타나며, 이는 Vertical-align:top;을 변경하여 수정할 수 있습니다.
위 내용은 CSS의 선 및 수직 정렬 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!