• 深入理解css之line-height（css的line-height）
• CSS height 与 max-height min-height
• css line-height
• css – height如何自动与line-height交互：0和不同的font-size
• css———详解height与line_height

深入理解css之line-height（css的line-height）

CSS height 与 max-height min-height

[height]

解释： 属性设置元素的高度。

支持： 所有主流浏览器都支持 max-height 属性。

说明： 这个属性定义元素内容区的高度，在内容区外面可以增加内边距、边框和外边距。

注释： 行内非替换元素会忽略这个属性。

[max-height]

解释： 属性设置元素的最大高度。

支持： 所有主流浏览器都支持 max-height 属性。

说明： 元素可以比指定值矮，但不能比其高。不允许指定负值。

注释：max-height 属性不包括外边距、边框和内边距

[max-height]

解释： 属性设置元素的最小高度。

支持： 所有主流浏览器都支持 max-height 属性。

说明： 素可以比指定值高，但不能比其矮。不允许指定负值。

【example】

 1 #box {
 2     width: 100px;
 3     height: 100px;
 4     border: 1px solid red;
 5 }
 6 #test {
 7     width: 100%;
 8     max-height: 100%;
 9     background-color: blue;
10     /* height: 100%; */
11 }

#box {
    width: 100px;
    height: 100px;
    border: 1px solid red;
}
#test {
    width: 100%;
    max-height: 100%;
    background-color: blue;
    height: 100%;
}

css line-height

对行高一直都是一知半解的，所以在工作中经常会遇到这样那样的问题，与其每次都踩坑，不如了解下它到底是什么。

行高 行距

要了解行高，先了解下字体的结构：顶线，中线，基线，底线

这里要注意基线和底线，在vertical-align中默认的属性是baseline基线，说的就是这里的基线。

行高: 文本基线之间的距离。

行距: 文本底线和顶线之间的距离。

通过图我们可以看出行高还是等于字体大小加上行距，即

line-height = font-size + 行距

行内框 行框 内容区

行内框：行内框的高度等于字体的高度，当设置行高时，行内框不变，改变的是行距，当设置padding的时候，行内高不变，改变的是内容区域。

行框：一行文本中，可能有多种不同的文本，但是他们的基线baseline是对其的，即在一条水平线上，此时不同的文本有不同的行内框，但是改行的行框是以本行最大的为准。

内容区域：内容区域是font-size+padding

居中

上面我们了解到line-height = font-size + 行距，那么也就是line-height = 半行距 + font-size + 半行距，所以我们经常在文本居中中会使用到height = line-height = xx px。

css – height如何自动与line-height交互：0和不同的font-size

<div>
  <span>Some text here...</span>
</div>

div {
    line-height: 0;
}

span {
    font-size: 100px;
}

css———详解height与line_height

定义

height指的是块级别元素的高度；

line-height指的是元素内容的高度。

height和line-height的联系

CSS中起高度作用的应该就是height以及line-height。height是用来设置元素的高度，比如img的高度、div的高度等。

如果不设置div的高度时，是div的font-size决定了div的高度还是line-weight的值？

测试一

CSS:
    .test1{font-size:20px; text-align:center;line-height:0; border:1px solid black; background: red;} 
html:
    <div class="test1">测试</div>

结果：

测试二

CSS:
    .test2{font-size:1px; text-align:center;line-height:20px; border:1px solid black; background:red;}
html:
      <div class="test2">测试</div>

结果：

结论：在没有设置div的height属性时，div的高度根据line-height的大小而变化，且文字垂直居中。

div的height与line-height的大小关系不同时，会有什么显示结果呢？

（1）height = line-height时

（2）height>line-height时

（3）height<line-height时

今天关于深入理解css之line-height和css的line-height的讲解已经结束，谢谢您的阅读，如果想了解更多关于CSS height 与 max-height min-height、css line-height、css – height如何自动与line-height交互：0和不同的font-size、css———详解height与line_height的相关知识，请在本站搜索。