大家都知道
vertical-align的默认取值是baseline,默认是元素放置在父元素的基线上。那么baseline到底在哪呢?
情况一:父元素里行内块元素没有文字
当父元素里有行内块元素时,baseline的取值就是在行内块元素的下边界
问题1 如果有多个行内块盒子怎么办?
答: 谁离父元素底部近听谁的,默认是谁的height比较大,baseline就在哪
问题2 如果移动行内块元素
baseline会改变吗?
答: 如果使用margin-top移动了主行内块元素(也就是height最大的),那么会改变baseline位置
- 如果使用
margin-top移动其他行内块元素(也就是height不是最大的),如果移动距离小的话,还是会失效,这是为什么呢?因为就算蓝色盒子往下移动了30px,但是还是绿色盒子离父元素底部最近,所以baseline没有改变
- 如果
margin-top设置的足够大,那么就会把自己往下挤,自己就是离父元素底部最近的
- 上移绿色主行内块,无论
margin-top设置为-200px,还是-1000px都是无效,这是为什么?因为无论上移多少,最后还是要和蓝色盒子进行baseline对齐的,所以是没有效果的
问题3 只要移动了行内块元素就会起效吗?
position:relative移动不起效果,无论是给主行内块元素,还是其他行内块元素设置都无效, 因为posiotion:relative移动时,标准流中元素原位置还是保留的
position:absolute移动不起效果, 因为脱离标准流
transform不起效果,无论是给主行内块元素,还是其他行内块元素设置都无效,标准流中元素原位置也是保留的
情况二:父元素里行内块元素有文字
答:如果父元素里行内块元素有文字,那么这个行内块元素的baseline为最后一行文字的baseline
情况三:父元素里行内块元素嵌套行内块元素
答: 行内块元素嵌套行内块元素,那么baseline以最下面的行内块元素底部决定
如果移动嵌套的行内块元素会怎样? 答: 这时绿色盒子的
baseline比蓝色盒子更接近父元素底部,所以父元素的baseline为绿色盒子的baseline
情况四:父元素里没有行内块元素
- 没有行内块时,baseline就比较简单了
如果文字大小不一怎么办 ? 答: 因为文字的
baseline更接近父元素底部,所以父元素的baseline为文字的baseline
结论:
- 行内块元素和行内元素默认与父元素
baseline对齐 - 空行内块元素
baseline为自己的底部 - 文字的
baseline就是名义上文字的baseline,没有改变 - 谁更接近父元素底部,父元素的
baseline就听谁的
注意:只能使用margin移动元素,使用transform和position移动元素,baseline不改变
作者：妹妹是娜娜莉
链接：https://juejin.cn/post/7084564059252588552
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。