vertical-align的几个属性简单测试

最新推荐文章于 2020-04-09 14:31:57 发布

头盔很铁

最新推荐文章于 2020-04-09 14:31:57 发布

阅读量228

点赞数

分类专栏： CSS 文章标签： vertical-align

本文链接：https://blog.csdn.net/qq_41296374/article/details/103824241

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近在复习基础，突然有点好奇vertical-align的几个属性到底高低是谁大谁小？简单记录一下

从css参考手册摘录下来的代码，text-top baseline middle是在看不出来高低区别(在100%测试下没有差别，忘记放大多少倍却相差1像素，很神奇)，所以使用ps测量了一下，使用的是qq截图，谷歌浏览器倍率100%截图测试。

在谷歌浏览器100%截图下的测试结果: a标签的下划线目测是baseline

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8" />
    <title>vertical-align_CSS参考手册_web前端开发参考手册系列</title>
    <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
    <style>
        .test p { border: 1px solid #000;font-size: 16px;line-height: 2;}
        .test a { margin-left: 5px;font-size: 12px;}
        li{height: 80px;}
        /* css顺序 */
        .length a {vertical-align: 10px;}
        .top a {vertical-align: top;}
        .super a {vertical-align: super;}
        .text-bottom a {vertical-align: text-bottom;}
        .text-top a {vertical-align: text-top;}
        .baseline a {vertical-align: baseline;}
        .middle a {vertical-align: middle;}
        .sub a {vertical-align: sub;}
        .bottom a {vertical-align: bottom;}
    </style>
</head>
<body>
    <!-- HTML顺序 -->
    <ul class="test">
        <li class="length">
            <strong>与基线算起的偏移量length</strong>1  23
            <p>参考内容AaBbCc<sub>AaBbCc</sub><sup>AaBbCc</sup><a href="?">偏移量对齐</a></p>
        </li>
        <li class="top">
            <strong>对象的内容与对象顶端对齐top</strong>2 23
            <p>参考内容AaBbCc<sub>AaBbCc</sub><sup>AaBbCc</sup><a href="?">要对齐的内容</a></p>
        </li>
        <li class="super">
            <strong>与参考内容的上标对齐super</strong>3 25
            <p>参考内容AaBbCc<sub>AaBbCc</sub><sup>AaBbCc</sup><a href="?">上标对齐</a></p>
        </li>
        <li class="text-bottom">
            <strong>对象的文本与对象顶端对齐text-bottom</strong>4 29 
            <p>参考内容AaBbCc<sub>AaBbCc</sub><sup>AaBbCc</sup><a href="?">要对齐的内容</a></p>
        </li>
        <li class="text-top">
            <strong>对象的文本与对象顶端对齐text-top</strong>5  33 64-200%
            <p>参考内容AaBbCc<sub>AaBbCc</sub><sup>AaBbCc</sup><a href="?">要对齐的内容</a></p>
        </li>
        <li class="baseline">
            <strong>与基线对齐AaBbCcbaseline</strong>6        33 65-200%
            <p>参考内容AaBbCc<sub>AaBbCc</sub><sup>AaBbCc</sup><a href="?">基线对齐</a></p>
        </li>
        <li class="middle">
            <strong>对象的内容与对象中部对齐middle</strong>7   33 66-200%
            <p>参考内容AaBbCc<sub>AaBbCc</sub><sup>AaBbCc</sup><a href="?">要对齐的内容</a></p>
        </li>
        
        <li class="sub">
            <strong>与参考内容的下标对齐super</strong>8    38
            <p>参考内容AaBbCc<sub>AaBbCc</sub><sup>AaBbCc</sup><a href="?">下标对齐</a></p>
        </li>
        <li class="bottom">
            <strong>对象的内容与对象底端对齐bottom</strong>9    39
            <p>参考内容AaBbCc<sub>AaBbCc</sub><sup>AaBbCc</sup><a href="?">要对齐的内容</a></p>
        </li>
    </ul>
</body>
</html>

将li的高度设置为80像素，画布大小1000*1000，在ps中li的高度都为46，测量baseline距离上边框的距离

下面是测试结果:

top 23px
super 25px
text-bottom 29px
text-top 33px 200%-65px（画布2000*2000）
baseline 33px 200%-65px（画布2000*2000）
middle 33px 200%-66px（画布2000*2000）
super 38px
bottom 39px

可变的两个参数我就偷个懒复制一下 :D

<percentage>：把当前盒提升（正值）或者降低（负值）这个距离，百分比相对line-height计算。当值为0%时等同于baseline。

<length>：把当前盒提升（正值）或者降低（负值）这个距离。当值为0时等同于baseline。（CSS2）

以上测试结果仅供参考，感谢查阅！

头盔很铁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vertical-align的几个属性简单测试

最近在复习基础，突然有点好奇vertical-align的几个属性到底高低是谁大谁小？简单记录一下从css参考手册摘录下来的代码，text-top baseline middle是在看不出来高低区别(在100%测试下没有差别，忘记放大多少倍却相差1像素，很神奇)，所以使用ps测量了一下，使用的是qq截图，谷歌浏览器倍率100%截图测试。在谷歌浏览器100%截图下的测试结果: a标...
复制链接

扫一扫