{"id":199,"date":"2023-06-14T19:53:14","date_gmt":"2023-06-14T11:53:14","guid":{"rendered":"https:\/\/www.qzdd.net\/?p=199"},"modified":"2023-06-14T19:53:14","modified_gmt":"2023-06-14T11:53:14","slug":"css%e4%b9%8bbaseline%e7%9a%84%e7%a1%ae%e5%ae%9a","status":"publish","type":"post","link":"https:\/\/www.qzdd.net\/?p=199","title":{"rendered":"css\u4e4bbaseline\u7684\u786e\u5b9a"},"content":{"rendered":"\n
\n

\u5927\u5bb6\u90fd\u77e5\u9053vertical-align<\/code>\u7684\u9ed8\u8ba4\u53d6\u503c\u662fbaseline<\/code>,\u9ed8\u8ba4\u662f\u5143\u7d20\u653e\u7f6e\u5728\u7236\u5143\u7d20\u7684\u57fa\u7ebf\u4e0a\u3002\u90a3\u4e48baseline<\/code>\u5230\u5e95\u5728\u54ea\u5462?<\/p>\n<\/blockquote>\n\n\n\n

\u60c5\u51b5\u4e00:\u7236\u5143\u7d20\u91cc\u884c\u5185\u5757\u5143\u7d20\u6ca1\u6709\u6587\u5b57<\/h2>\n\n\n\n

\u5f53\u7236\u5143\u7d20\u91cc\u6709\u884c\u5185\u5757\u5143\u7d20\u65f6,baseline<\/code>\u7684\u53d6\u503c\u5c31\u662f\u5728\u884c\u5185\u5757\u5143\u7d20\u7684\u4e0b\u8fb9\u754c<\/p>\n\n\n\n

\"01.png\"\/<\/figure>\n\n\n\n
\n

\u95ee\u98981 \u5982\u679c\u6709\u591a\u4e2a\u884c\u5185\u5757\u76d2\u5b50\u600e\u4e48\u529e?<\/h3>\n<\/blockquote>\n\n\n\n

\u7b54: \u8c01\u79bb\u7236\u5143\u7d20\u5e95\u90e8\u8fd1<\/strong>\u542c\u8c01\u7684,\u9ed8\u8ba4\u662f\u8c01\u7684height<\/code>\u6bd4\u8f83\u5927,baseline<\/code>\u5c31\u5728\u54ea<\/p>\n\n\n\n

\"02.png\"\/<\/figure>\n\n\n\n
\n

\u95ee\u98982 \u5982\u679c\u79fb\u52a8\u884c\u5185\u5757\u5143\u7d20baseline<\/code>\u4f1a\u6539\u53d8\u5417?<\/h3>\n<\/blockquote>\n\n\n\n

\u7b54: \u5982\u679c\u4f7f\u7528margin-top<\/code>\u79fb\u52a8\u4e86\u4e3b\u884c\u5185\u5757\u5143\u7d20<\/strong>(\u4e5f\u5c31\u662fheight<\/code>\u6700\u5927\u7684),\u90a3\u4e48\u4f1a\u6539\u53d8baseline<\/code>\u4f4d\u7f6e<\/p>\n\n\n\n

\"03.png\"\/<\/figure>\n\n\n\n
    \n
  • \u5982\u679c\u4f7f\u7528margin-top<\/code>\u79fb\u52a8\u5176\u4ed6\u884c\u5185\u5757\u5143\u7d20(\u4e5f\u5c31\u662fheight<\/code>\u4e0d\u662f\u6700\u5927\u7684),\u5982\u679c\u79fb\u52a8\u8ddd\u79bb\u5c0f\u7684\u8bdd,\u8fd8\u662f\u4f1a\u5931\u6548,\u8fd9\u662f\u4e3a\u4ec0\u4e48\u5462?\u56e0\u4e3a\u5c31\u7b97\u84dd\u8272\u76d2\u5b50\u5f80\u4e0b\u79fb\u52a8\u4e8630px,\u4f46\u662f\u8fd8\u662f\u7eff\u8272\u76d2\u5b50\u79bb\u7236\u5143\u7d20\u5e95\u90e8\u6700\u8fd1,\u6240\u4ee5baseline\u6ca1\u6709\u6539\u53d8<\/li>\n<\/ul>\n\n\n\n
    \"04.png\"\/<\/figure>\n\n\n\n
      \n
    • \u5982\u679cmargin-top<\/code>\u8bbe\u7f6e\u7684\u8db3\u591f\u5927,\u90a3\u4e48\u5c31\u4f1a\u628a\u81ea\u5df1\u5f80\u4e0b\u6324,\u81ea\u5df1\u5c31\u662f\u79bb\u7236\u5143\u7d20\u5e95\u90e8\u6700\u8fd1\u7684<\/li>\n<\/ul>\n\n\n\n
      \"055.png\"\/<\/figure>\n\n\n\n
        \n
      • \u4e0a\u79fb\u7eff\u8272\u4e3b\u884c\u5185\u5757,\u65e0\u8bbamargin-top<\/code>\u8bbe\u7f6e\u4e3a-200px<\/code>,\u8fd8\u662f-1000px<\/code>\u90fd\u662f\u65e0\u6548,\u8fd9\u662f\u4e3a\u4ec0\u4e48?\u56e0\u4e3a\u65e0\u8bba\u4e0a\u79fb\u591a\u5c11,\u6700\u540e\u8fd8\u662f\u8981\u548c\u84dd\u8272\u76d2\u5b50\u8fdb\u884cbaseline<\/code>\u5bf9\u9f50\u7684,\u6240\u4ee5\u662f\u6ca1\u6709\u6548\u679c\u7684<\/li>\n<\/ul>\n\n\n\n
        \"09.png\"\/<\/figure>\n\n\n\n
        \n

        \u95ee\u98983 \u53ea\u8981\u79fb\u52a8\u4e86\u884c\u5185\u5757\u5143\u7d20\u5c31\u4f1a\u8d77\u6548\u5417?<\/h3>\n<\/blockquote>\n\n\n\n
          \n
        • position:relative<\/code>\u79fb\u52a8\u4e0d\u8d77\u6548\u679c,\u65e0\u8bba\u662f\u7ed9\u4e3b\u884c\u5185\u5757\u5143\u7d20<\/strong>,\u8fd8\u662f\u5176\u4ed6\u884c\u5185\u5757\u5143\u7d20<\/strong>\u8bbe\u7f6e\u90fd\u65e0\u6548, \u56e0\u4e3aposiotion:relative<\/code>\u79fb\u52a8\u65f6,\u6807\u51c6\u6d41\u4e2d\u5143\u7d20\u539f\u4f4d\u7f6e\u8fd8\u662f\u4fdd\u7559\u7684<\/strong><\/li>\n<\/ul>\n\n\n\n
          \"07.png\"\/<\/figure>\n\n\n\n
            \n
          • position:absolute<\/code>\u79fb\u52a8\u4e0d\u8d77\u6548\u679c, \u56e0\u4e3a\u8131\u79bb\u6807\u51c6\u6d41<\/li>\n<\/ul>\n\n\n\n
            \"011.png\"\/<\/figure>\n\n\n\n
              \n
            • transform<\/code>\u4e0d\u8d77\u6548\u679c,\u65e0\u8bba\u662f\u7ed9\u4e3b\u884c\u5185\u5757\u5143\u7d20<\/strong>,\u8fd8\u662f\u5176\u4ed6\u884c\u5185\u5757\u5143\u7d20<\/strong>\u8bbe\u7f6e\u90fd\u65e0\u6548,\u6807\u51c6\u6d41\u4e2d\u5143\u7d20\u539f\u4f4d\u7f6e\u4e5f\u662f\u4fdd\u7559\u7684<\/strong><\/li>\n<\/ul>\n\n\n\n
              \"08.png\"\/<\/figure>\n\n\n\n

              \u60c5\u51b5\u4e8c:\u7236\u5143\u7d20\u91cc\u884c\u5185\u5757\u5143\u7d20\u6709\u6587\u5b57<\/h2>\n\n\n\n

              \u7b54:\u5982\u679c\u7236\u5143\u7d20\u91cc\u884c\u5185\u5757\u5143\u7d20\u6709\u6587\u5b57,\u90a3\u4e48\u8fd9\u4e2a\u884c\u5185\u5757\u5143\u7d20\u7684baseline<\/code>\u4e3a\u6700\u540e\u4e00\u884c\u6587\u5b57\u7684baseline<\/code><\/p>\n\n\n\n

              \"1.png\"\/<\/figure>\n\n\n\n

              \u60c5\u51b5\u4e09:\u7236\u5143\u7d20\u91cc\u884c\u5185\u5757\u5143\u7d20\u5d4c\u5957\u884c\u5185\u5757\u5143\u7d20<\/h2>\n\n\n\n

              \u7b54: \u884c\u5185\u5757\u5143\u7d20\u5d4c\u5957\u884c\u5185\u5757\u5143\u7d20,\u90a3\u4e48baseline<\/code>\u4ee5\u6700\u4e0b\u9762\u7684\u884c\u5185\u5757\u5143\u7d20\u5e95\u90e8\u51b3\u5b9a<\/p>\n\n\n\n

              \"066.png\"\/<\/figure>\n\n\n\n
              \n

              \u5982\u679c\u79fb\u52a8\u5d4c\u5957\u7684\u884c\u5185\u5757\u5143\u7d20\u4f1a\u600e\u6837? \u7b54: \u8fd9\u65f6\u7eff\u8272\u76d2\u5b50\u7684baseline<\/code>\u6bd4\u84dd\u8272\u76d2\u5b50\u66f4\u63a5\u8fd1\u7236\u5143\u7d20\u5e95\u90e8<\/strong>,\u6240\u4ee5\u7236\u5143\u7d20\u7684baseline<\/code>\u4e3a\u7eff\u8272\u76d2\u5b50\u7684baseline<\/code> \"0100.png\"<\/p>\n<\/blockquote>\n\n\n\n

              \u60c5\u51b5\u56db:\u7236\u5143\u7d20\u91cc\u6ca1\u6709\u884c\u5185\u5757\u5143\u7d20<\/h2>\n\n\n\n
                \n
              • \u6ca1\u6709\u884c\u5185\u5757\u65f6,baseline\u5c31\u6bd4\u8f83\u7b80\u5355\u4e86<\/li>\n<\/ul>\n\n\n\n
                \"10.png\"\/<\/figure>\n\n\n\n
                \n

                \u5982\u679c\u6587\u5b57\u5927\u5c0f\u4e0d\u4e00\u600e\u4e48\u529e ? \u7b54: \u56e0\u4e3a\u6587\u5b57<\/strong>\u7684baseline<\/code>\u66f4\u63a5\u8fd1\u7236\u5143\u7d20\u5e95\u90e8<\/strong>,\u6240\u4ee5\u7236\u5143\u7d20\u7684baseline<\/code>\u4e3a\u6587\u5b57<\/strong>\u7684baseline<\/code><\/p>\n<\/blockquote>\n\n\n\n

                \"099.png\"\/<\/figure>\n\n\n\n

                \u7ed3\u8bba:<\/p>\n\n\n\n

                  \n
                • \u884c\u5185\u5757\u5143\u7d20<\/strong>\u548c\u884c\u5185\u5143\u7d20<\/strong>\u9ed8\u8ba4\u4e0e\u7236\u5143\u7d20baseline<\/code>\u5bf9\u9f50<\/li>\n\n\n\n
                • \u7a7a<\/strong>\u884c\u5185\u5757\u5143\u7d20baseline<\/code>\u4e3a\u81ea\u5df1\u7684\u5e95\u90e8<\/li>\n\n\n\n
                • \u6587\u5b57\u7684baseline<\/code>\u5c31\u662f\u540d\u4e49\u4e0a\u6587\u5b57\u7684baseline<\/code>,\u6ca1\u6709\u6539\u53d8<\/li>\n\n\n\n
                • \u8c01\u66f4\u63a5\u8fd1\u7236\u5143\u7d20\u5e95\u90e8,\u7236\u5143\u7d20\u7684baseline<\/code>\u5c31\u542c\u8c01\u7684<\/li>\n<\/ul>\n\n\n\n

                  \u6ce8\u610f:\u53ea\u80fd\u4f7f\u7528margin<\/code>\u79fb\u52a8\u5143\u7d20,\u4f7f\u7528transform<\/code>\u548cposition<\/code>\u79fb\u52a8\u5143\u7d20,baseline<\/code>\u4e0d\u6539\u53d8<\/p>\n\n\n\n

                  \u4f5c\u8005\uff1a\u59b9\u59b9\u662f\u5a1c\u5a1c\u8389
                  \u94fe\u63a5\uff1ahttps:\/\/juejin.cn\/post\/7084564059252588552
                  \u6765\u6e90\uff1a\u7a00\u571f\u6398\u91d1
                  \u8457\u4f5c\u6743\u5f52\u4f5c\u8005\u6240\u6709\u3002\u5546\u4e1a\u8f6c\u8f7d\u8bf7\u8054\u7cfb\u4f5c\u8005\u83b7\u5f97\u6388\u6743\uff0c\u975e\u5546\u4e1a\u8f6c\u8f7d\u8bf7\u6ce8\u660e\u51fa\u5904\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"

                  \u5927\u5bb6\u90fd\u77e5\u9053vertical-align\u7684\u9ed8\u8ba4\u53d6\u503c\u662fbaseline,\u9ed8\u8ba4\u662f\u5143\u7d20\u653e\u7f6e\u5728\u7236\u5143\u7d20\u7684\u57fa\u7ebf\u4e0a\u3002\u90a3\u4e48bas […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[29],"class_list":["post-199","post","type-post","status-publish","format-standard","hentry","category-base","tag-baseline"],"_links":{"self":[{"href":"https:\/\/www.qzdd.net\/index.php?rest_route=\/wp\/v2\/posts\/199","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.qzdd.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.qzdd.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.qzdd.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.qzdd.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=199"}],"version-history":[{"count":0,"href":"https:\/\/www.qzdd.net\/index.php?rest_route=\/wp\/v2\/posts\/199\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.qzdd.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=199"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.qzdd.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=199"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.qzdd.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=199"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}