{"id":451,"date":"2021-07-05T17:03:23","date_gmt":"2021-07-05T09:03:23","guid":{"rendered":"http:\/\/zhuxinyong.com\/?p=451"},"modified":"2021-07-19T08:17:26","modified_gmt":"2021-07-19T00:17:26","slug":"css-%e5%ae%9e%e7%8e%b0%e7%89%b9%e5%ae%9a%e6%af%94%e4%be%8b%e7%9a%84%e5%9b%be%e5%bd%a2","status":"publish","type":"post","link":"https:\/\/zhuxinyong.com\/?p=451","title":{"rendered":"CSS \u5b9e\u73b0\u7279\u5b9a\u6bd4\u4f8b\u7684\u56fe\u5f62"},"content":{"rendered":"\n<p>\u4e4b\u524d\u5199\u8fc7\u4e00\u7bc7\u6587\u7ae0\uff1a<a href=\"http:\/\/zhuxinyong.com\/?p=59\">\u300a\u7eafcss\u5b9e\u73b0\u5bbd\u9ad8\u7b49\u6bd4\u300b<\/a>\u5229\u7528\u7684\u5c31\u662f padding \u7684\u767e\u5206\u6bd4\u503c\u53c2\u8003\u7684\u662f\u5305\u542b\u5757\u7684\u5bbd\u5ea6\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"160\" src=\"http:\/\/zhuxinyong.com\/wp-content\/uploads\/2021\/07\/image-1024x160.png\" alt=\"\" class=\"wp-image-452\" srcset=\"https:\/\/zhuxinyong.com\/wp-content\/uploads\/2021\/07\/image-1024x160.png 1024w, https:\/\/zhuxinyong.com\/wp-content\/uploads\/2021\/07\/image-300x47.png 300w, https:\/\/zhuxinyong.com\/wp-content\/uploads\/2021\/07\/image-768x120.png 768w, https:\/\/zhuxinyong.com\/wp-content\/uploads\/2021\/07\/image.png 1218w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\u89c4\u8303\u5730\u5740\uff1a<a href=\"https:\/\/www.w3.org\/TR\/CSS2\/box.html#padding-properties\" target=\"_blank\" rel=\"noopener\">w3<\/a> \uff0c\u77e5\u4e4e\u4e0a\u4e5f\u6709\u5bf9\u8fd9\u4e2a\u95ee\u9898\u7684<a href=\"https:\/\/www.zhihu.com\/question\/277241315\" target=\"_blank\" rel=\"noopener\">\u63d0\u95ee<\/a>\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u770b\u4e0bpadding \u7684\u5b9e\u4f8b\uff1a<\/strong><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_PomZqXM\" src=\"\/\/codepen.io\/anon\/embed\/PomZqXM?height=250&amp;theme-id=1&amp;slug-hash=PomZqXM&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed PomZqXM\" title=\"CodePen Embed PomZqXM\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>\u6ce8\u610f\u4e0b\uff1a\u84dd\u8272\u5757\u7684 56.52% \u76f8\u5bf9\u7684\u662f\u7236\u7ea7\u7684 300px \u6240\u4ee5\u6700\u540e\u503c\u4e3a 168.75px\uff0c\u800c\u4e0d\u662f\u76f8\u5bf9\u81ea\u8eab\u7684160px\u3002<\/p>\n\n\n\n<p>\u5728\u56de\u7b54\u91cc\u9762\u770b\u5230\u4e00\u4e2a\u65b0\u5c5e\u6027\uff1aaspect-ratio\uff0c\u7528\u6cd5\u4e0e\u5b9a\u4e49\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"651\" src=\"http:\/\/zhuxinyong.com\/wp-content\/uploads\/2021\/07\/image-1-1024x651.png\" alt=\"\" class=\"wp-image-458\" srcset=\"https:\/\/zhuxinyong.com\/wp-content\/uploads\/2021\/07\/image-1-1024x651.png 1024w, https:\/\/zhuxinyong.com\/wp-content\/uploads\/2021\/07\/image-1-300x191.png 300w, https:\/\/zhuxinyong.com\/wp-content\/uploads\/2021\/07\/image-1-768x488.png 768w, https:\/\/zhuxinyong.com\/wp-content\/uploads\/2021\/07\/image-1.png 1041w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\u770b\u4e0b\u6548\u679c\uff1a<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_LYyGppM\" src=\"\/\/codepen.io\/anon\/embed\/LYyGppM?height=250&amp;theme-id=1&amp;slug-hash=LYyGppM&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed LYyGppM\" title=\"CodePen Embed LYyGppM\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>\u8fd9\u91cc\u7684\u6bd4\u4f8b\u5c31\u662f\u76f8\u5bf9\u4e8e\u81ea\u8eab\u7684\u5c3a\u5bf8\uff0c\u800c\u4e0d\u662f\u7236\u7ea7\u5305\u542b\u5757\u7684\u5bbd\u5ea6\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u4e4b\u524d\u5199\u8fc7\u4e00\u7bc7\u6587\u7ae0\uff1a\u300a\u7eafcss\u5b9e\u73b0\u5bbd\u9ad8\u7b49\u6bd4\u300b\u5229\u7528\u7684\u5c31\u662f padding \u7684\u767e\u5206\u6bd4\u503c\u53c2\u8003\u7684\u662f\u5305\u542b\u5757\u7684\u5bbd\u5ea6&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,20,3],"tags":[5],"class_list":["post-451","post","type-post","status-publish","format-standard","hentry","category-all","category-frontend","category-tech","tag-css"],"_links":{"self":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/451","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=451"}],"version-history":[{"count":6,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/451\/revisions"}],"predecessor-version":[{"id":459,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/451\/revisions\/459"}],"wp:attachment":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=451"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=451"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=451"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}