마스터해야 하는 CSS 속성--lineheight

1. 줄 높이의 정의

줄 높이란 줄 사이의 거리, 즉 기준선 사이의 거리를 의미합니다. 행. 기준선인데 왜 한 줄의 텍스트에 여전히 줄 높이가 있습니까? 우리는 이 질문을 염두에 두고 내려다봅니다.

2, 인라인 박스박스모델

이것 한 줄의 텍스트이며 콘텐츠 영역 태그가 있습니다.

그림 1

"콘텐츠 영역"(콘텐츠 영역 )는 텍스트를 둘러싸는 상자로, 마우스로 선택한 텍스트 영역의 크기라고 생각하면 됩니다. 그림 1의 텍스트는 마우스로 선택됩니다. 즉, "텍스트 한 줄" 영역이 선택됩니다.

"인라인 상자"

(인라인 상자)는 텍스트를 블록 단위로 표시하지 않고 행으로 표시합니다. 인라인 요소로 감싸인 텍스트, 예를 들어 span 태그로 감싸진 "콘텐츠 영역"은 "인라인 상자"라고 할 수 있고, 인라인 요소로 감싸지 않은 부분은 "익명 콘텐츠"로 간주할 수 있습니다. "링크된 상자". "인라인 박스"는 그림 1의 스팬 태그 내 "콘텐츠 영역" 영역으로 볼 수 있으며, "익명 인라인 박스"는 빨간색 점선으로 둘러싸인 콘텐츠로 볼 수 있습니다.

"라인 박스 박스"

(라인 박스), 각 라인은 "라인 박스 박스"이며, 라인 박스 박스는 익명과 비익명 인라인 박스로 구성됩니다. 그림 1에서 가장 바깥쪽 빨간색 실선으로 둘러싸인 영역으로 볼 수 있습니다.

"포함 상자"

(포함 상자), 이 상자는 "라인 상자 상자"로 구성됩니다.

3. 줄 높이의 높이 메커니즘

줄 높이의 영향은 어디에나 있으며, 한 줄의 텍스트도 예외는 아닙니다.

한 줄 텍스트의 높이 성능은

줄 높이

에만 영향을 받지만 주로 내용 영역과 줄 간격의 영향을 받습니다. 한 줄 텍스트 줄 높이:

줄 높이 = 콘텐츠 영역 높이 + 줄 간격 높이

다음:

줄 간격 = 줄 높이 - content 영역 높이

텍스트 상단과 우리가 흔히 보는 '줄 상자' 상단 사이의 거리가 반줄 간격입니다.

4, 줄 높이 단위

(1), 숫자

예:

line-height:2;
font-size:20px;

그러면 텍스트가 차지합니다. 이때 높이는 20*2=40px

(2), 길이

입니다. 예:

font-size:20px;
line-height:20px;
line-height:2em;
line-height:3rem;
line-height:3pt;

는 px 단위로 고정된 값을 가지며 나머지는 브라우저와 결합됩니다. 기본 크기는 본문의 글꼴 크기

속성

을 사용하여 변환되거나 계산됩니다. (3)

<p>
    文字文字
    <p>这是p标签</p>
</p>
p{
font-size:20px;
line-height:150%;
}
p{
font-size:50px;
}

그러면 자식을 기준으로 줄 높이를 다시 계산하지 않고 "text text"의 줄 높이가 30px이고 내부 p 태그의 줄 높이도 30px입니다. 강요.

은 줄 높이가 백분율로 설정되면 글꼴 크기를 기준으로 계산된 상위 요소의 줄 높이

가 하위 요소에

를 상속하고 하위 요소는 글꼴 크기를 기준으로 다시 계산되지 않음을 의미합니다. 글꼴 크기에 따라 행 높이가 일반적으로 사용되지 않습니다. (4), Normal

은 브라우저의 기본 line-height 속성에 따라 줄 높이를 설정합니다.

(5), 상속

줄 높이 상속 IE8+

는 일반적으로 일부 입력 및 버튼 태그에 적용되는 상위 요소의 줄 높이 설정을 상속합니다.

5, line-height 적용

(1),

그림

과 컨테이너 바닥 사이의 간격을 제거합니다.

그림 2

원인:

인라인 요소는 기본적으로 기준선 정렬되어 있으며, 빈 태그에는 빈 고스트 노드가 포함되어 있습니다.

vertical-align

:baseline에 따라 그림을 텍스트와 정렬하므로 이미지 하단에 간격이 있습니다. 여기서 고스트 공백 노드는 문자 c로 이해할 수 있습니다. 기준선이 정렬되어 있고 상위 요소의 높이가 고정되어 있지 않기 때문에 c가 필요하므로 상위 요소의 높이가 채워집니다. 이미지의 기준선에 맞춰 정렬되므로 아래쪽 가장자리에 있게 됩니다.

상위 요소가 고정 높이로 설정되면 간단한 p에는 그림과 문자 c가 포함됩니다. 기본적으로 그림 3에서 c는 고스트에 해당합니다. 빈 노드.

사진 3

제거 방법

1, 사진을 뭉툭하게 만든다

2, 그림 세로 정렬:

하단

3，让匿名空白节点line-height:0

(2)，小图标大文字

<i class=&#39;icon&#39;></i>
<span>这是span标签内的文字</span>
span{
line-height:30px;
vertical-align:middle;
}
i{
vertical-align:middle;
}

(3)，图片水平垂直居中

图三

图四

原理：

空白p内存在空白幽灵节点(看不见摸不着但存在空白元素中，例如图四中的)。

当设置text-align的时候，内联元素文字和图片会居中显示，我们让空白幽灵节点的行高与p高度一致，这样就可以实现垂直居中，图片和幽灵空白节点默认基线对齐，这时图片将偏上显示，我们设置图片的vertical-align为middle就可以实现图片近似居中的效果了。

如果想让图片完全垂直居中，我们可以让p的font-size:0，原因是不同字体的显示效果不同，有的下沉，有的刚好中线对齐，当font-size:0的时候，文字就变成一个点了，也就不存在不同字体的差异了。

(4)，多行文本垂直居中

图五

图六

原理：

我们可以把span看做是图片，这样原理就和图片垂直居中原理大同小异了。就是需要将span的元素display设置成inline-block，并且重置line-height和text-align。

为何display不能是inline属性，个人观点，如果还是inline元素的话，由于此时父元素的line-height过高，子元素设置的行高很小就没有作用（因为line-height达不到父元素行高的高度，所以看上去好像是无效的），类似于margin中的由于浮动或者绝对定位的无效的原因，我在另外margin篇有介绍，css中margin的深入了解，如果有兴趣可以去看看，如果设置子元素line-height设置很大的话是有作用的，所以只能让span元素为inline-block元素，inline-block具有包裹性,所以呈现出图六效果。

如果容器是自适应高度的，无法获得高度，那么我们可以让外部容器为表格元素居中。

【相关推荐】

1. 免费css在线视频教程

2. css在线手册

3. php.cn独孤九贱（2）－css视频教程

위 내용은 마스터해야 하는 CSS 속성--lineheight의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!