css3 align-items中基线怎么确定

html-css023

css3 align-items中基线怎么确定,第1张

align-items:center;对齐方式如下:

center,位于容器的中心

flex-start,位于容器的开头

flex-end,位于容器的结尾

baseline,位于容器的基线上。

initial,设置该属性为它的默认值

inherit,从父元素继承该属性

希望对你有所帮助,望采纳!

在CSS中通过line-height属性来实现行间距的设置,line-height的值表示的是两行文字之间基线的距离。

文字的基线,指的是如果给文字加上下划线,那么上下划线就是文字的基线。

Line-height的值设置为具体的数值,可以是相对数值,也可以设置为绝对数值,在静态页面中,文字大小固定时常常使用绝对数值,而对于论坛和博客这些用户可以自定义字体大小的页面,通常设置为相对数值,从而,可以随着用户自定义的字体大小改变相应的行间距。

相信大家对行内元素的认识大多是不换行,不能设置宽高,又或者是来自经典的垂直水平居中内联元素的面试题,把line-height设置成父盒子的高度,但在昨天练习切图的过程中,发现将一行内联元素在垂直方向上对齐很困难,特别是包含img元素,于是决定深入了解一下这行内元素的细节

     1.分类:内联元素分为替换元素和非替换元素

MDN上对可替换元素是这么说的

翻译过来就是

这些特殊的行内元素,虽然不换行,但可以设置宽高,四周padding和margin

而普通的行内元素(非替换元素,向span,a等)不能设置宽高,四周margin无效,四周padding有效,

但上下padding比较特殊,不会撑大内容区,但会撑大行高(line-height),下面我们细说

!此处注意:虽然替换元素特殊,但也是行内元素,下面介绍行内元素的一些概念

每个行内元素都有一条基线,规则如下

1.非替换元素中的基线是英文字母x的下端,什么意思,如图,红色的就是这个非替换元素的基线

2.替换元素中的基线就是margin-bottom的外沿

有了基线的知识,我们现来说说一行的行内元素是怎么排列的,只有两步

1.找到本行第一个行内元素,确定它的基线

2.找到下一个行内元素,确定它的基线并与第一个基线对齐,以此类推,直到排完本行内的所有行内元素

等一行的行内元素都排完了,这一行的行框就确定了,为什么叫行框,那肯定是把一行的行内元素都包含进去的框嘛,所以说行框的高度就是本行内最高的行内元素的top line 到最低的行内元素的bottom line。

line-height就是行内元素的内容区+padding,也就是一个行内元素的top line 到bottom line的距离

所以设置line-height为父盒子高度的一半就可以把元素挤到中间。

设置行内元素和本行框基线的对齐方式