{"id":4698,"date":"2024-03-01T18:01:01","date_gmt":"2024-03-01T10:01:01","guid":{"rendered":""},"modified":"2024-03-01T18:01:01","modified_gmt":"2024-03-01T10:01:01","slug":"\u6211\u4e0d\u77e5\u9053\u7684css line-height","status":"publish","type":"post","link":"https:\/\/mushiming.com\/4698.html","title":{"rendered":"\u6211\u4e0d\u77e5\u9053\u7684css line-height"},"content":{"rendered":"

\n <\/path> \n<\/svg> <\/p>\n

\u57fa\u7ebf\u3001\u5e95\u7ebf\u3001\u9876\u7ebf\u4e0e\u884c\u9ad8<\/h3>\n

\"\u6211\u4e0d\u77e5\u9053\u7684css
\"\u6211\u4e0d\u77e5\u9053\u7684css<\/p>\n

 <\/p>\n

line-height\u6491\u5f00\u4e86\u5757\u5143\u7d20\u7684\u9ad8\u5ea6<\/h3>\n
  <<\/span>p<\/span>><\/span><\/span>\u8fd9\u662f\u4e00\u6bb5\u6587\u5b57\uff0c\u8fd9\u91cc\u6709\u4e2a<<\/span>em<\/span>><\/span><\/span>em<\/<\/span>em<\/span>><\/span><\/span> \u6807\u7b7e\u3002<\/<\/span>p<\/span>><\/span><\/span>\n<\/code><\/pre>\n
\u5982\u4e0a\u9762\u4e00\u6bb5\u666e\u666e\u901a\u901a\u7684\u4ee3\u7801\uff0c\u5374\u5305\u542b\u4e864\u79cd\u76d2\u5b50\uff1a<\/font><\/p>\n
    \n
  1. \n
    \u201c\u5185\u5bb9\u533a\u57df\u201d\uff08content area\uff09\uff0c\u662f\u4e00\u79cd\u56f4\u7ed5\u6587\u5b57\u770b\u4e0d\u89c1\u7684\u76d2\u5b50,\u53ef\u7406\u89e3\u4e3a\u9009\u4e2d\u6587\u5b57\u84dd\u8272\u80cc\u666f\u533a\u57df\uff0c\u5982\u4e0b\u56fe\u3002\u201c\u5185\u5bb9\u533a\u57df\u201d\u7684\u5927\u5c0f\u4e0e font-size \u5927\u5c0f\u76f8\u5173\uff1b
     \"\u6211\u4e0d\u77e5\u9053\u7684css<\/font><\/p>\n<\/li>\n
  2. \n
    \u201c\u5185\u8054\u76d2\u5b50\u201d\uff08inline-boxes\uff09\uff0c\u201c\u5185\u8054\u76d2\u5b50\u201d\u4e0d\u4f1a\u8ba9\u5185\u5bb9\u6210\u5757\u663e\u793a\uff0c\u800c\u662f\u6392\u6210\u4e00\u884c\u3002\u5982\u679c\u6587\u5b57\u5916\u90e8\u542b inline \u6c34\u5e73\u7684\u6807\u7b7e\uff08\u5982span\uff0ca\uff0cem\u7b49\uff09\uff0c\u5219\u5c5e\u4e8e\u201c\u5185\u8054\u76d2\u5b50\u201d\uff0c\u5982\u4e0b\u56fe\u7d2b\u6846\u5904\u3002\u5982\u679c\u662f\u5149\u79c3\u79c3\u7684\u6587\u5b57\uff0c\u5219\u5c5e\u4e8e\u201c\u533f\u540d\u5185\u8054\u76d2\u5b50\u201d\uff0c\u5982\u4e0b\u56fe\u7ea2\u6846\u5904\uff1b
     \"\u6211\u4e0d\u77e5\u9053\u7684css<\/font><\/p>\n<\/li>\n
  3. \n
    \u201c\u884c\u6846\u76d2\u5b50\u201d\uff08line boxes\uff09\uff0c\u6bcf\u4e00\u884c\u5c31\u662f\u4e00\u4e2a\u201c\u884c\u6846\u76d2\u5b50\u201d\uff0c\u6bcf\u4e2a\u201c\u884c\u6846\u76d2\u5b50\u201d\u53c8\u662f\u7531\u4e00\u4e2a\u4e00\u4e2a\u201c\u5185\u8054\u76d2\u5b50\u201d\u7ec4\u6210\uff0c\u201c\u884c\u6846\u76d2\u5b50\u201d\u5982\u4e0b\u56fe\u7ea2\u6846\u5904\uff1b
     \"\u6211\u4e0d\u77e5\u9053\u7684css<\/font><\/p>\n<\/li>\n
  4. \n
    \u6807\u7b7e\u6240\u5728\u7684\u201c\u5305\u542b\u76d2\u5b50\u201d\uff08containing box\uff09\uff0c\u5982\u4e0b\u56fe\u7ea2\u6846\u5904\u3002\u6b64\u76d2\u5b50\u7531\u4e00\u884c\u4e00\u884c\u7684\u201c\u884c\u6846\u76d2\u5b50\u201d\u7ec4\u6210
     \"\u6211\u4e0d\u77e5\u9053\u7684css<\/font><\/p>\n<\/li>\n<\/ol>\n
    <!DOCTYPE html><\/span>\n<<\/span>head<\/span>><\/span><\/span>\n    <<\/span>style<\/span>><\/span><\/span> em<\/span>{ \n    <\/span> line-height<\/span>:<\/span>50px;<\/span> }<\/span> <\/span><\/<\/span>style<\/span>><\/span><\/span>\n    <<\/span>title<\/span>><\/span><\/span><\/<\/span>title<\/span>><\/span><\/span>\n<\/<\/span>head<\/span>><\/span><\/span>\n<<\/span>body<\/span>><\/span><\/span>\n    <<\/span>script<\/span> src<\/span>=<\/span>\"<\/span>https:\/\/cdn.staticfile.org\/vue\/2.2.2\/vue.min.js\"<\/span><\/span>><\/span><\/span><\/span><\/<\/span>script<\/span>><\/span><\/span>\n    <<\/span>p<\/span>><\/span><\/span>\u8fd9\u662f\u4e00\u6bb5\u6587\u5b57\uff0c\u8fd9\u91cc\u6709\u4e2a<<\/span>em<\/span>><\/span><\/span>em<\/<\/span>em<\/span>><\/span><\/span> \u6807\u7b7e\u3002<\/<\/span>p<\/span>><\/span><\/span>\n<\/<\/span>html<\/span>><\/span><\/span> \n<\/code><\/pre>\n
    \"\u6211\u4e0d\u77e5\u9053\u7684css
     \u5f53\u7ed9em\u6807\u7b7e\u8bbe\u7f6e\u4e00\u4e2aline-height\u65f6\uff0c\u5916\u56f4\u7684p\u5143\u7d20\u4f1a\u7684\u9ad8\u5ea6\u4e5f\u4f1a\u53d8\u621050px\uff1b\u6240\u4ee5\u5143\u7d20\u7684\u9ad8\u5ea6\u5e76\u4e0d\u662f\u7531\u6587\u5b57\u6491\u5f00\u7684\uff0c\u5b9e\u9645\u4e0a\u662f\u7531 line-height \u51b3\u5b9a\u7684\u3002\u8fd9\u65f6\u53ef\u80fd\u4f1a\u63d0\u51fa\u7591\u95ee\uff1aline-height\u660e\u660e\u662f\u4e24\u57fa\u7ebf\u8ddd\u79bb\uff0c\u5355\u884c\u6587\u5b57\u54ea\u6765\u7684\u884c\u9ad8\u5462\uff1f\u5173\u4e8e\u8fd9\u4e2a\u95ee\u9898\uff0c\u6211\u4eec\u9700\u8981\u4e86\u89e3\u7684\u662f\uff1a<\/font><\/p>\n
      \n
    1. \u884c\u9ad8\u7531\u4e8e\u5176\u7ee7\u627f\u6027\uff0c\u5f71\u54cd\u65e0\u5904\u4e0d\u5728\uff0c\u5373\u4f7f\u5355\u884c\u6587\u672c\u4e5f\u4e0d\u4f8b\u5916\u3002<\/font><\/li>\n
    2. \u884c\u9ad8\u53ea\u662f\u5e55\u540e\u9ed1\u624b\uff0c\u9ad8\u5ea6\u7684\u8868\u73b0\u4e0d\u662f\u884c\u9ad8\uff0c\u800c\u662f\u5185\u5bb9\u533a\u57df\u548c\u884c\u95f4\u8ddd\u3002<\/font><\/li>\n<\/ol>\n
      \u800c\u5185\u5bb9\u533a\u57df + \u884c\u95f4\u8ddd = \u884c\u9ad8\uff0c\u6b63\u597d\u9ad8\u5ea6\u8868\u73b0\u7b49\u4e8e\u884c\u9ad8\uff0c\u7ed9\u4eba\u611f\u89c9\u4e0a\u662f\u884c\u9ad8\u8d77\u4e86\u4f5c\u7528\u3002<\/font><\/p>\n
        \n
      1. \u5185\u5bb9\u533a\u57df\u9ad8\u5ea6\u53ea\u4e0e\u5b57\u53f7\u4ee5\u53ca\u5b57\u4f53\u6709\u5173\uff0c\u4e0e line-height \u6ca1\u6709\u4efb\u4f55\u5173\u7cfb\u3002<\/font><\/li>\n
      2. \u5728simsun\uff08\u5b8b\u4f53\uff09\u5b57\u4f53\u4e0b\uff0c\u5185\u5bb9\u533a\u57df\u9ad8\u5ea6\u7b49\u4e8e\u6587\u5b57\u5927\u5c0f\u503c\u3002<\/font><\/li>\n<\/ol>\n
        \u56e0\u6b64\uff0c\u5728 simsun\uff08\u5b8b\u4f53\uff09\u5b57\u4f53\u4e0b\uff1a<\/font><\/p>\n
        \n
        font-size + \u884c\u95f4\u8ddd = line-height<\/p>\n<\/blockquote>\n
        \u90a3\u884c\u95f4\u8ddd\u7684\u5c31\u53ef\u4ee5\u8fd9\u6837\u8ba1\u7b97\u4e86\uff1a<\/font><\/p>\n
        \n
        font-size: 240px;
         line-height: 360px;
         \u5219\u884c\u95f4\u8ddd = 360px - 240px = 120px;<\/p>\n<\/blockquote>\n
        \u884c\u95f4\u8ddd\u4e0a\u4e0b\u62c6\u5206\uff0c\u5c31\u6709\u4e86\u201c\u534a\u884c\u95f4\u8ddd\u201d<\/font><\/p>\n
        \n
        \u534a\u884c\u95f4\u8ddd = (\u884c\u9ad8 - \u5185\u5bb9\u533a\u57df\u9ad8\u5ea6)\/2<\/p>\n<\/blockquote>\n
        \"\u6211\u4e0d\u77e5\u9053\u7684css
         \u884c\u9ad8\u51b3\u5b9a\u5185\u8054\u76d2\u5b50\u9ad8\u5ea6\uff0c\u4f46\u9ad8\u5ea6\u8868\u73b0\u662f\u7531\u884c\u95f4\u8ddd\u548c\u5185\u5bb9\u533a\u57df\u8868\u73b0\u7684\uff1b\u884c\u95f4\u8ddd\u5899\u5934\u8349\uff0c\u53ef\u5927\u53ef\u5c0f\uff08\u751a\u81f3\u8d1f\u503c\uff09\uff0c\u5b83\u7684\u4f5c\u7528\u5c31\u662f\u4fdd\u8bc1\u5185\u8054\u76d2\u5b50\u9ad8\u5ea6\u6b63\u597d\u7b49\u4e8e\u884c\u9ad8\u3002<\/font><\/p>\n
         <\/p>\n
        line-height\u7684\u6c34\u5e73\u5782\u76f4\u7279\u6027<\/h3>\n
        <!DOCTYPE html><\/span>\n<<\/span>head<\/span>><\/span><\/span>\n    <<\/span>style<\/span>><\/span><\/span> p<\/span>{ \n    <\/span> border<\/span>:<\/span>1px solid red;<\/span> }<\/span> em<\/span>{ \n    <\/span> line-height<\/span>:<\/span>50px;<\/span> }<\/span> <\/span><\/<\/span>style<\/span>><\/span><\/span>\n    <<\/span>title<\/span>><\/span><\/span><\/<\/span>title<\/span>><\/span><\/span>\n<\/<\/span>head<\/span>><\/span><\/span>\n<<\/span>body<\/span>><\/span><\/span>\n    <<\/span>script<\/span> src<\/span>=<\/span>\"<\/span>https:\/\/cdn.staticfile.org\/vue\/2.2.2\/vue.min.js\"<\/span><\/span>><\/span><\/span><\/span><\/<\/span>script<\/span>><\/span><\/span>\n    <<\/span>p<\/span>><\/span><\/span>\u8fd9\u662f\u4e00\u6bb5\u6587\u5b57\uff0c\u8fd9\u91cc\u6709\u4e2a<<\/span>em<\/span>><\/span><\/span>em<\/<\/span>em<\/span>><\/span><\/span> \u6807\u7b7e\u3002<\/<\/span>p<\/span>><\/span><\/span>\n<\/<\/span>html<\/span>><\/span><\/span> \n<\/code><\/pre>\n
        \"\u6211\u4e0d\u77e5\u9053\u7684css<\/p>\n
        line-height\u4e0e\u56fe\u7247<\/h3>\n
        <!DOCTYPE html><\/span>\n<<\/span>head<\/span>><\/span><\/span>\n    <<\/span>style<\/span>><\/span><\/span> p<\/span>{ \n    <\/span> border<\/span>:<\/span>1px solid red;<\/span> background-color<\/span>:<\/span>yellowgreen;<\/span> }<\/span> <\/span><\/<\/span>style<\/span>><\/span><\/span>\n    <<\/span>title<\/span>><\/span><\/span><\/<\/span>title<\/span>><\/span><\/span>\n<\/<\/span>head<\/span>><\/span><\/span>\n<<\/span>body<\/span>><\/span><\/span>\n    <<\/span>script<\/span> src<\/span>=<\/span>\"<\/span>https:\/\/cdn.staticfile.org\/vue\/2.2.2\/vue.min.js\"<\/span><\/span>><\/span><\/span><\/span><\/<\/span>script<\/span>><\/span><\/span>\n    <<\/span>p<\/span>><\/span><\/span><<\/span>img<\/span> src<\/span>=<\/span>\"<\/span>1.png\"<\/span><\/span>><\/span><\/span><\/<\/span>p<\/span>><\/span><\/span>\n<\/<\/span>html<\/span>><\/span><\/span> \n<\/code><\/pre>\n
        \"\u6211\u4e0d\u77e5\u9053\u7684css
         \u4e0d\u96be\u770b\u51fa\u56fe\u7247\u6709\u4e00\u4e2a\u95f4\u9699\uff0c\u5bf9\u4e8e\u4e00\u4e2ablock\u5143\u7d20\uff0c\u540e\u9762\u5c31\u50cf\u6709\u4e00\u4e2a\u6587\u672c\u8282\u70b9\u5728\u91cc\u9762\u4e00\u6837\uff0c\u770b\u4e0d\u5230\uff0c\u83b7\u53d6\u4e0d\u5230,\u79f0\u4e4b\u4e3a\u9690\u533f\u6587\u672c\u8282\u70b9\u3002\u5185\u8054\u5757\u7ea7\u5143\u7d20img\u9ed8\u8ba4\u5bf9\u9f50\u65b9\u5f0f\u662f\u57fa\u7ebfbaseline\uff0c\u8981\u4e0e\u6587\u672c\u5bf9\u9f50\uff0c\u6587\u672c\u5b58\u5728line-height\uff0c\u6240\u4ee5\u5b58\u5728\u95f4\u9699\u3002\u90a3\u4e48\u5e94\u8be5\u600e\u4e48\u53bb\u6389\u8fd9\u4e2a\u95f4\u9699\u5462\uff1f<\/font><\/p>\n
          \n
        1. \u56fe\u7247\u5757\u72b6\u5316 \u2014\u2014\u65e0\u57fa\u7ebf\u5bf9\u9f50<\/strong><\/li>\n<\/ol>\n
           img<\/span>{ \n   <\/span>\n    display<\/span>:<\/span> block;<\/span>\n }<\/span>\n<\/code><\/pre>\n
            \n
          1. \u56fe\u7247\u5e95\u7ebf\u5bf9\u9f50<\/strong><\/li>\n<\/ol>\n
             p<\/span>{ \n   <\/span>      \n     vertical-align<\/span>:<\/span> bottom;<\/span>\n  }<\/span>\n<\/code><\/pre>\n
              \n
            1. \u884c\u9ad8\u8db3\u591f\u5c0f\u2014\u2014\u57fa\u7ebf\u4e0a\u79fb<\/strong><\/li>\n<\/ol>\n
               p<\/span>{ \n   <\/span>      \n     line-height<\/span>:<\/span> 0px;<\/span>\n  }<\/span>\n<\/code><\/pre>\n
                \n
              1. \u6d88\u9664\u9690\u533f\u6587\u672c\u5b57\u4f53\u5927\u5c0f<\/strong><\/li>\n<\/ol>\n
                 p<\/span>{ \n   <\/span>      \n     font-size<\/span>:<\/span> 0px;<\/span>\n  }<\/span>\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u6211\u4e0d\u77e5\u9053\u7684css line-height\u57fa\u7ebf\u3001\u5e95\u7ebf\u3001\u9876\u7ebf\u4e0e\u884c\u9ad8line-height\u6491\u5f00\u4e86\u5757\u5143\u7d20\u7684\u9ad8\u5ea6p\u8fd9\u662f\u4e00\u6bb5\u6587\u5b57\uff0c\u8fd9\u91cc\u6709\u4e2aemem\/em\u6807\u7b7e","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"_links":{"self":[{"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/posts\/4698"}],"collection":[{"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/comments?post=4698"}],"version-history":[{"count":0,"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/posts\/4698\/revisions"}],"wp:attachment":[{"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/media?parent=4698"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/categories?post=4698"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/tags?post=4698"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}