line-height和vertical-align
line-height
在开发时，我们经常用到line-height，如设定height和line-height同样的值实现位置垂直居中；但是line-height有一些很奇特的地方需要我们注意，本文加以总结：
1. line-height的默认值
不同的浏览器不同，但是在chrome和firefox下测到的结果是1.2。
文章图片
Paste_Image.png 2. line-height的继承特性：
line-height可以有6种值：120%、1.2、20px、inherit、normal、initial。
line-height可以在font进行同font-size一同设置： font： 120px/1.2。
line-height的继承特性比较坑，首先要指出的其具有继承特性，和font-size类似；但是它的继承计算方法因其值的设定不同而大不同。
- 百分比:
如： 120%。 子元素继承的是父元素的fontSize*line-height，而不是120%。
body{font-size: 16px;
line-height: 120%;
}
h1{width: 400px;
font-size: 32px;
}
p{width: 400px;
font-size: 16px;
}
What does the size of the font translate to exactly?【line-height和vertical-align】What does the size of the font translate to exactly? What does the size of the font translate to exactly?
结果：
文章图片
Paste_Image.png h1比较拥挤，说明其line-height是16*1.2，而不是120%。
2.数值：
如 1.2， 那么子元素继承的1.2。
把上述代码的120%改成1.2， 得到如下图所示：
文章图片
Paste_Image.png h1显示正常，说明h1的line-height为1.2.
3.像素值
如： 20px; 这种情况下和1相同，就不多说了。
vertical-align 对vertical-align一直不是很明白，在使用的时候心里没底，经常出错。今天抽空看了几篇讲解的文章，自己做了个demo，算是初步了解。后续有更加深刻的了解，再补充上。
什么条件下vertical-align生效
- 原生就具有inline或者inline-block属性的元素（table-cell也算），如：图片、按钮、单复按钮、单行/多行文本框等。
- 手动设置为inline-block属性。
- 父元素的行高足够（如果不够，没法正确显示）
| 值 | 描述 |
|---|---|
| 长度 | 通过距离升高（正值）或降低（负值）元素。'0cm'等同于'baseline' |
| 百分值 – % | 通过距离（相对于line-height值的百分大小）升高（正值）或降低（负值）元素。'0%'等同于'baseline' |
| baseline | 默认。元素的基线与父元素的基线对齐。 |
| sub | 降低元素的基线到父元素合适的下标位置。 |
| super | 升高元素的基线到父元素合适的上标位置。 |
| top | 把对齐的子元素的顶端与line box顶端对齐。 |
| text-top | 把元素的顶端与父元素内容区域的顶端对齐。 |
| middle | 元素的中垂点与 父元素的基线加1/2父元素中字母x的高度对齐。 |
| bottom | 把对齐的子元素的底端与line box底端对齐 |
| text-bottom | 把元素的底端与父元素内容区域的底端对齐。 |
| inherit | 采用父元素相关属性的相同的指定值。 |
文章图片
base_line
文章图片
base_line_test
上图中的蓝线就是baseline；黄线是vertical-align为middle是的中间线，其高度为：baseline+1/2(小写x的高度)；红线是text-top对应的top line；橙色为text-bottom对应的botton line。 程序为：
vertical align .line{
position: absolute;
height: 0;
width: 100%;
left: 27px;
border: none;
line-height: 0;
margin: 0;
padding: 0;
}
.line.top{border: 1px solid red;
top: 20px;
}
.line.middle{border: 1px solid yellow;
top: 42px;
}
.line.base{border: 1px solid blue;
top: 54px;
}
.line.bottom{border: 1px solid orange;
top: 60px;
}
hgaXx你好
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 14/70|14/70 限时书写
- 海尔|海尔徐萌：Leader和Z世代共同成长 | 品牌
- 如何使用pyinstaller打包多个和单个python文件详解
- VUE使用localstorage和sessionstorage实现登录示例详解
- 字节跳动|字节豪掷百亿收购美中宜和，仅仅是互联网的财大气粗？
- mysql和oceanbase区别|mysql和oceanbase区别,OceanBase基本概念
- 幸福感恩日记第36篇——|幸福感恩日记第36篇—— 和宝贝共同学习
- Python从零到壹|[Python从零到壹] 五十.图像增强及运算篇之图像直方图理论知识和绘制实现
- 推荐信在大学生社会实践和勤工俭学中的价值
- 使用和避免null