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;
}![](http://upload-images.jianshu.io/upload_images/1975863-895b73c88e218a66.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
hgaXx你好
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 14/70|14/70 限时书写
- 海尔|海尔徐萌:Leader和Z世代共同成长 | 品牌
- 如何使用pyinstaller打包多个和单个python文件详解
- VUE使用localstorage和sessionstorage实现登录示例详解
- 字节跳动|字节豪掷百亿收购美中宜和,仅仅是互联网的财大气粗?
- mysql和oceanbase区别|mysql和oceanbase区别,OceanBase基本概念
- 幸福感恩日记第36篇——|幸福感恩日记第36篇—— 和宝贝共同学习
- Python从零到壹|[Python从零到壹] 五十.图像增强及运算篇之图像直方图理论知识和绘制实现
- 推荐信在大学生社会实践和勤工俭学中的价值
- 使用和避免null