简介
image.png
1 .两行文字之间基线的距离,倒数第二根
2 .vertical-align中有top,middle,baseline,bottom与之是由关联的.这些就是文字对应的四根线哪一根的css样式
line-height与line boxes高度
1 .如果一个标签没有定义height属性，包括百分比高度，那么最终的高度表现一定是来自line-height起了作用.
1 .一个空的div，如果里面没有设置至少大于1px高度height值时，该div的高度就是0.
2 .但是如果div里面打入一个空格或者文字，此时div就会有一个高度.这并不是文字撑开了div的高度，而是line-height
2 .那width是怎么来的
3 .line-height产生高度的原因：在inline box模型中，有一个line boxes，他会包裹每一行文字。line boxs也不是直接的生产者，而是中层干部。真正决定高度的是手下的一堆inline标签，line boxes会考察手下元素的line-height值，谁的值高，就会用谁的值，向上汇报，最后形成全部高度
4 .line-height可以和height互换，因为实现的效果一样。都能撑开一个高度，然而这两个CSS属性有一个较隐蔽的差异，就是使用height会使标签haslayout，而使用line-height则不会
5 .行高在文章显示中的应用 line-hheight:1.5 .不能写死，不然不会自动适配文字的大小
内容区域，行内框和行框
1 .首先，一行中的每个元素都有一个各自的内容区域。这个是由字体尺寸决定的
image.png
2 .行内元素会生成一个行内框inline box。没有其他因素影响的时候，行内狂等于内容区域，设定行高可以增加或减少行内框的高度
3 .由于行高可以应用在任何元素上，所以同一行内的若干元素都有可能有不同的行高和行内框高
4 .行框：是指本行的一个虚拟的矩形框，高度是本行内所有元素行框中的最大值
image.png
image.png
垂直对齐Vertical-align属性
1 .只对行内元素奇效。默认是baseline参数基线对齐
2 .属性值
baseline：基线对齐；
sub：下标；上标（vertical-align:super）使元素的基线（替换元素的底端）相对于父元素的基线升高
super：上标；
top：顶端对齐；将元素的行内框的顶端和行框的顶端对齐
text-top：与文本的顶端对齐；将元素行内狂的顶端同文本行的顶线对齐
middle：中部对齐；
bottom：底端对齐；
text-bottom：文本的底端对齐；
在次深入了解
1 .设置行间的距离
2 .line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
内联元素的高度决定之本line-height
1 .一个div如果没有设置高度，这时我们在div里面添加文字，盒子会有高度。这个高度是由line-height支撑起来的，而不是font-size
2 .对于非替换的内联元素，他的可视高度“完全”由line-height决定。和padding，border完全没有影响
3 .line-height作用于内联元素的谢姐
1 .line-height的高度作用是使用“行距”和“半行距”来决定的
2 .行距：分散在当前文字的上方和下方。即使是第一行元素.行距的高度是完整行距的“一半”，所以也叫半行距。真实的行距计算=line-heigt-font-size。这样一个内联文字所占的位置，应该是2个font-size
3 .
4 .问题1：按理说，如果line-height是1，那么就是没有间距,但是为啥是这样的结果呢，看起来上面的被覆盖了8px的像素,上面的是20，下面的是28px.为啥normal才是这个效果
image.png
image.png
//这样的默认感觉才是对的，但是为啥加了默认值反而覆盖了呢。
1 .默认的line-height是normal，line-height:1反而会缩小.首先这里好像有点问题，行高是用来实现一个p之间换行的时候的操作。并不是两个span之间的间距.
2 .也就是line-height:2的时候是两行字中间间距是字体的高度
3 .line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框
image.png
1 .这里行高是25px，则么感觉对不上啊
2 .需要是两行，而且并不是中间的黄色，而是两条红线的距离，那就是说白色的背景其实是另一个东西，不算在行高里面，应该算是选择的区域吧
image.png
4 .当line-height设置为2的时候，半行距是大小1倍文字的大小，两行文字中间的间距的间隙差不多是一个文字尺寸大小。如果line-height值值大小是1倍文字大小，那么半行间距是哦，两行文字会挨在一起。如果间距是负值，两行文字就会重叠纠缠在一起
5 .纯文本，line-height会决定最终的高度
line-height和替换元素
1 .首先line-height不会影响替换元素的高度，比如图片.但是如果添加line-height值的话，实际表现是会有影响的，因为图片构成的内联元素，会构成一个内联盒子,而每一个内联盒子前面都有一个宽度为0的幽灵空白节点，其内联特性表现和一个正常的字符一模一样，于是这个字符使用了行高，所以最后的表现就是行高的高度
2 .图文混合的时候，内联替换元素和内联非替换元素一起的时候
1 .由于他们是内联元素，所以会形成行框盒子，line-heioght在这里决定的是最小高度
2 .主要原因如下，替换元素不受line-height影响，vertical-align元素有影响
3 .如果想要有影响，line-height必须设置足够大的值.
line-height和块级元素
1 .对于块级元素，line-height没有任何用，我们平时改变line-height，块级元素的高度跟着变化实际上是通过改变块级元素里面内联级别元素占据的高度实现的
line-height内联元素垂直居中的原因
1 .错误的说法：想要让的单行,垂直居中，只要设置line-height大小和height高度一样就可以了
height:24px;
line-height:24px;
1 .误区1，想要垂直居中，只需要设置一个比当前font-size大的line-height就可以
2 .误区2，这种实现的是近似居中,多行文字居中也是可以实现。但是这个我试不出来。所以去网上搜了下实现方法
2 .实现原因：行高的实现机制是上下平分line-height值
3 .多行文本实现垂直居中的3种方式
1 .首先单个文本内实现是没戏了，哎好像是可以的啊，甚至高度不确定也是可以的
div{
background-color: thistle;
font-family: simsun;
font-size: 20px;
height: 200px;
width:200px;
display: inline-flex;
align-items: center;
}
div {
background-color: thistle;
font-family: simsun;
font-size: 20px;
/* height: 200px; */
width: 200px;
line-height: 1.5;
padding: 20px 0px;
display: inline-flex;
align-items: center;
}
//没有高度也可以
2 .table，table-cell模拟表格，子元素设置vertical:middle可以垂直居中
3 .脱离文档流，div固定宽高，top50%，margin-top负高度的一半
4 .先让p变成一个内联元素，父元素的line-height决定了内联元素的高度。这里line-height作用的是幽灵节点。其实子元素也有自己的行高，然后子元素使用vertical-align来实现居中对齐
image.png
深入了解line-height的各类属性值
1 .normal
1 .normal是个变量，和font-size有关系，但是想象又不可能，实际上是和font-family有关系
2 .关键是，不同浏览器的默认中英文字体并不一样，不同操作系统的默认字体也不一样
2 .数值
3 .百分比
4 .长度值
5 .最关键的区别：继承的时候不一样。数值作为line-height，那么最后继承的是都是1.5或者2这个值，但是如果是百分数，或者长度值，那么继承出来的是最后算出来的值。所以属性重置的时候要用下面这种写法
*{
line-height:1.5
//
}
6 .css计算行高的时候，不是向下取整，而是向上取整。
网友评论