css 有p里面有3个span第一个font-size30 第二个12 第三个60 第二个设置的vertical-align是相对那个span的字体基线对齐呢内容来之豆包不保证正确针对你「p包裹3个字号不同span」场景完整拆解行盒公共基线生成原理前置概念只贴合你的场景行盒 line-boxp 是块级容器浏览器会把内部连续不换行的行内内容3个span打包成一个行盒行盒是这一整行的虚拟包裹框看不见但所有对齐规则都在它内部生效。每个 inline span 自带「内容区 content-area」每个 span 的文字会根据font-size 当前字体生成一块文字内容区域自带字体内置4个度量值字体文件固化baseline基线小写x底部x-height小写x高度middle对齐依赖它ascender基线向上延伸高度descender基线向下延伸高度一、公共基线的计算核心原理重点规则整行行盒的公共基线由本行「第一个拥有文本内容的行内元素的文字基线」作为初始基准线其余元素全部参照这条线对齐如果有图片/空inline-block会重新压低/抬高这条公共基线。你的场景pspanstylefont-size:30pxA/spanspanstylefont-size:12pxB/spanspanstylefont-size:60pxC/span/p第一个元素是 30px 带文字的span浏览器提取它内部文字自带的基线定为整行唯一公共基线这条水平线一旦确定整行固定不变。第二个12px、第三个60px span默认vertical-align:baseline逻辑是把自己内部文字的基线贴合到这条全局公共基线。视觉推导30px span自身基线 公共基线文字上下均匀向基线两侧伸展12px span自身文字尺寸很小它的基线贴在公共线上整块小字就全部堆在基线上方60px span字号最大基线贴公共线文字大幅向上、向下穿出基线整条基线水平线不会因为后面大小span发生上下移动。二、为什么基线不由父p控制父p的font-size只是继承属性仅作用于没有自定义字号的子元素你的三个span都手动设置了独立font-size完全脱离p的字号公共基线取自子行内元素自身文字度量和父容器文字大小无关p只是承载行盒的块容器只提供布局空间不参与行内基线几何计算。举个反例验证pstylefont-size:200pxspanstylefont-size:10小/spanspanstylefont-size:80大/span/pp字号200px完全无效公共基线由第一个10px小字决定大字依旧贴合这条低基线向下延伸。三、什么时候整行基线会被「重新改变」本行元素共同作用修改基线刚才说基线由第一个文字span定基准但如果行内出现替换元素img、input/无文字inline-block规则会变化替换元素默认自身底边等于基线会强行拉低整行公共基线。示例对比加图片破坏原有基线pspanstylefont-size:3030/spanimgsrcxxxstyleheight:100pxspanstylefont-size:6060/span/p此时不再以30px文字基线为公共基线图片底部会成为新基线整行所有文字全部上浮这就是「本行所有元素共同作用算出基线」的体现——替换元素权重高于普通文字span。四、vertical-align 只改元素位置不改公共基线公共基线是行盒的固定参考线所有vertical-align操作只是单个span相对这条线上下位移不会移动基准线本身vertical-align:middlespan自身文字中线对齐「公共基线 x-height/2」vertical-align:10pxspan整体向上偏移10px公共基线不动vertical-align:topspan盒子顶部对齐行盒最高边缘基线不变。五、完整流程总结你的三span场景执行顺序浏览器解析p块识别内部3个连续inline span生成单个line-box行盒遍历行内元素第一个带文本的span(30px)提取字体基线设为行盒全局公共基线依次处理第二个12px、第三个60px span默认baseline各自内部文字基线贴合全局基线摆放计算每个span的内容区上下高度撑开行盒的上下边界父p仅限制行盒宽度、提供继承字号全程不参与基线坐标计算。一句话极简原理行盒公共基线由本行内权重最高的行内内容决定普通文字优先取首个文字基线图片会覆盖重设基线父块元素仅作为容器无法定义这条基准水平线。demo 代码!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title行内元素公共基线演示/titlestylep{/* 父p字号很大但完全不影响内部基线 */font-size:200px;/* 给基线画一条红色辅助线直观看到公共基线 */background-image:linear-gradient(#f00 1px,transparent 1px);background-position:0 center;background-size:100% 40px;}span:nth-child(1){font-size:30px;}span:nth-child(2){font-size:12px;}span:nth-child(3){font-size:60px;}/style/headbodypspan30px文字/spanspan12px小字/spanspan60px超大文字/span/p/body/html关于行盒https://lukangong.blog.csdn.net/article/details/162954771?spm1001.2014.3001.5502
