{"id":1621,"date":"2020-12-28T21:38:42","date_gmt":"2020-12-28T13:38:42","guid":{"rendered":"https:\/\/learningnow.com.tw\/?p=1621"},"modified":"2021-03-18T15:03:28","modified_gmt":"2021-03-18T07:03:28","slug":"css-float","status":"publish","type":"post","link":"https:\/\/learningnow.com.tw\/css-float\/","title":{"rendered":"\u3010CSS\u6559\u5b78\u3011Day10 \u2013 CSS\u6d6e\u52d5\u5982\u4f55\u5f71\u97ff\u4f48\u5c40?\u4f60\u77e5\u9053\u6d6e\u52d5\u7684\u91cd\u8981\u55ce? (\u8a73\u7d30\u89e3\u8aaa)"},"content":{"rendered":"\n<p>\u901a\u904e\u4e0a\u4e00\u6b21\u7684 CSS \u6559\u5b78\u6211\u5011\u5b78\u7fd2\u4e86 CSS \u76d2\u5b50\u6a21\u578b\uff0c\u5df2\u7d93\u80fd\u5920\u5c0d\u4e00\u500b\u5340\u57df\u9032\u884c\u4f48\u5c40\u4e86\u4f46\u662f\u7db2\u9801\u5f88\u5927\uff0c<strong><span class=\"has-inline-color has-vivid-red-color\">\u7db2\u9801\u4e5f\u662f\u85c9\u7531\u9019\u4e9b\u5c0f\u5340\u57df\u7d44\u6210\u7684<\/span><\/strong>\uff0c\u4f46\u4f60\u6703\u767c\u73fe\u4f60\u5728\u521d\u6b21\u5b78\u7fd2\u76d2\u5b50\u6a21\u578b\u7684\u6642\u5019\uff0c\u4f60\u60f3\u8981\u505a\u5230\u76d2\u5b50\u6a21\u578b\u8207\u76d2\u5b50\u6a21\u578b\u4e4b\u9593\u80fd\u5f9e<strong><span class=\"has-inline-color has-vivid-red-color\">\u5de6\u81f3\u53f3\u53bb\u6392\u5217\u76d2\u5b50\u6a21\u578b\u7684\u9806\u5e8f\u4f60\u4e4b\u524d\u662f\u505a\u4e0d\u5230\u7684<\/span><\/strong>\uff0c\u4f60\u53ef\u80fd\u6703\u6709\u9019\u65b9\u9762\u56f0\u64fe\uff0c\u9019\u500b\u56f0\u64fe\u5728\u524d\u9762\u5b78\u7fd2\u6642\u6c92\u8aaa\u662f\u56e0\u70ba\u9019\u6d89\u53ca\u5230\u53e6\u4e00\u500b\u77e5\u8b58\u9ede\uff0c\u4e5f\u5c31\u662f<strong><span class=\"has-inline-color has-vivid-red-color\"> CSS \u6d6e\u52d5<\/span><\/strong>\u3002<\/p>\n\n\n\n<p>\u4ee5\u524d\u525b\u5b78\u7fd2\u5b8c\u76d2\u5b50\u6a21\u578b\u4e0d\u7ba1\u600e\u9ebc\u4f7f\u7528\u5c31\u662f\u53ea\u80fd\u5f9e<strong>\u4e0a\u5230\u4e0b\u53bb\u898f\u5283\u76d2\u5b50\u6a21\u578b<\/strong>\uff0c\u7576\u4f60\u5b78\u5b8c\u672c\u7bc7 CSS \u6559\u5b78\u6587\u7ae0\u7684 CSS \u6d6e\u52d5\u5f8c\u4f60\u5c31\u6703\u77e5\u9053\u5176\u5be6\u5f9e\u4e0a\u5beb\u5230\u4e0b\u662f\u6709\u4e00\u500b\u5c08\u6709\u540d\u8a5e\u7684\u5537! \u7576\u7136\u5b78\u7fd2\u5b8c CSS \u6d6e\u52d5\u4f60\u5c31\u80fd\u8b93\u76d2\u5b50\u6a21\u578b\u5f9e\u5de6\u81f3\u53f3\u4e26\u6392\u6392\u5217\u4e86\uff0c\u5b78\u5b8c\u672c\u7bc7\u4f60\u5c31\u6703\u77e5\u9053\u70ba\u4ec0\u9ebc CSS \u6d6e\u52d5\u5f88\u91cd\u8981\u4e86\u3002<\/p>\n\n\n\n<ul><li><strong>\u70ba\u4ec0\u9ebc\u9700\u8981\u6d6e\u52d5?<\/strong><\/li><li><strong>\u6d6e\u52d5\u7684\u6392\u5217\u7279\u6027\u6709\u4ec0\u9ebc?<\/strong><\/li><li><strong>\u6700\u5e38\u898b\u7684 3 \u7a2e\u4f48\u5c40\u65b9\u5f0f<\/strong><\/li><li><strong>\u70ba\u4ec0\u9ebc\u9700\u8981\u6e05\u9664\u6d6e\u52d5?<\/strong><\/li><\/ul>\n\n\n\n<a class=\"btn_CTA\" href=\"https:\/\/learningnow.com.tw\/affiliate-marketing-make-money\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u9ede\u6211\u77ad\u89e3 \u5c0f\u9752\u5982\u4f55\u6bcf\u6708\u591a\u8cfa5\u4f4d\u6578\u53f0\u5e63<\/a>\n\n\n\n<p><\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_45 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\">\u5167\u5bb9\u76ee\u9304<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" area-label=\"ez-toc-toggle-icon-1\"><label for=\"item-662edeeaae6e7\" aria-label=\"\u5167\u5bb9\u76ee\u9304\"><span style=\"display: flex;align-items: center;width: 35px;height: 30px;justify-content: center;direction:ltr;\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/label><input  type=\"checkbox\" id=\"item-662edeeaae6e7\"><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/learningnow.com.tw\/css-float\/#%E7%B6%B2%E9%A0%81%E4%BD%88%E5%B1%80%E6%96%B9%E5%BC%8F%E6%9C%89%E5%93%AA%E4%BA%9B\" title=\"\u7db2\u9801\u4f48\u5c40\u65b9\u5f0f\u6709\u54ea\u4e9b?\">\u7db2\u9801\u4f48\u5c40\u65b9\u5f0f\u6709\u54ea\u4e9b?<\/a><ul class='ez-toc-list-level-3'><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/learningnow.com.tw\/css-float\/#%E4%BB%80%E9%BA%BC%E6%98%AF%E6%A8%99%E6%BA%96%E6%B5%81\" title=\"\u4ec0\u9ebc\u662f\u6a19\u6e96\u6d41?\">\u4ec0\u9ebc\u662f\u6a19\u6e96\u6d41?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/learningnow.com.tw\/css-float\/#%E7%82%BA%E4%BB%80%E9%BA%BC%E9%9C%80%E8%A6%81_CSS_%E6%B5%AE%E5%8B%95\" title=\"\u70ba\u4ec0\u9ebc\u9700\u8981 CSS \u6d6e\u52d5?\">\u70ba\u4ec0\u9ebc\u9700\u8981 CSS \u6d6e\u52d5?<\/a><ul class='ez-toc-list-level-3'><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/learningnow.com.tw\/css-float\/#%E6%A8%99%E6%BA%96%E6%B5%81%E8%88%87%E6%B5%AE%E5%8B%95%E4%BD%BF%E7%94%A8%E6%99%82%E6%A9%9F%E6%98%AF%E4%BB%80%E9%BA%BC%E6%99%82%E5%80%99\" title=\"\u6a19\u6e96\u6d41\u8207\u6d6e\u52d5\u4f7f\u7528\u6642\u6a5f\u662f\u4ec0\u9ebc\u6642\u5019?\">\u6a19\u6e96\u6d41\u8207\u6d6e\u52d5\u4f7f\u7528\u6642\u6a5f\u662f\u4ec0\u9ebc\u6642\u5019?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/learningnow.com.tw\/css-float\/#CSS_%E6%B5%AE%E5%8B%95_float_%E6%98%AF%E4%BB%80%E9%BA%BC\" title=\"CSS \u6d6e\u52d5 ( float ) \u662f\u4ec0\u9ebc?\">CSS \u6d6e\u52d5 ( float ) \u662f\u4ec0\u9ebc?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/learningnow.com.tw\/css-float\/#CSS_%E6%B5%AE%E5%8B%95%E7%9A%84%E7%89%B9%E6%80%A7%E6%9C%89%E5%93%AA%E4%BA%9B\" title=\"CSS \u6d6e\u52d5\u7684\u7279\u6027\u6709\u54ea\u4e9b?\">CSS \u6d6e\u52d5\u7684\u7279\u6027\u6709\u54ea\u4e9b?<\/a><ul class='ez-toc-list-level-3'><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/learningnow.com.tw\/css-float\/#CSS_%E6%B5%AE%E5%8B%95%E7%89%B9%E6%80%A7_-_%E8%84%AB%E9%9B%A2\" title=\"CSS \u6d6e\u52d5\u7279\u6027 &#8211; \u812b\u96e2\">CSS \u6d6e\u52d5\u7279\u6027 &#8211; \u812b\u96e2<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/learningnow.com.tw\/css-float\/#CSS_%E6%B5%AE%E5%8B%95%E7%89%B9%E6%80%A7_-_%E6%B5%AE%E5%8B%95%E5%85%83%E7%B4%A0%E4%B8%80%E8%A1%8C%E9%A1%AF%E7%A4%BA\" title=\"CSS \u6d6e\u52d5\u7279\u6027 &#8211; \u6d6e\u52d5\u5143\u7d20\u4e00\u884c\u986f\u793a\">CSS \u6d6e\u52d5\u7279\u6027 &#8211; \u6d6e\u52d5\u5143\u7d20\u4e00\u884c\u986f\u793a<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/learningnow.com.tw\/css-float\/#CSS_%E6%B5%AE%E5%8B%95%E7%89%B9%E6%80%A7_-_%E6%B5%AE%E5%8B%95%E5%85%83%E7%B4%A0%E5%85%B7%E6%9C%89%E8%A1%8C%E5%85%A7%E5%A1%8A%E7%89%B9%E6%80%A7\" title=\"CSS \u6d6e\u52d5\u7279\u6027 &#8211; \u6d6e\u52d5\u5143\u7d20\u5177\u6709\u884c\u5167\u584a\u7279\u6027\">CSS \u6d6e\u52d5\u7279\u6027 &#8211; \u6d6e\u52d5\u5143\u7d20\u5177\u6709\u884c\u5167\u584a\u7279\u6027<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/learningnow.com.tw\/css-float\/#CSS_%E6%B5%AE%E5%8B%95%E6%9C%83%E7%B6%93%E5%B8%B8%E8%88%87%E6%A8%99%E6%BA%96%E6%B5%81%E7%88%B6%E7%B4%9A%E6%90%AD%E9%85%8D%E4%BD%BF%E7%94%A8%E7%82%BA%E4%BB%80%E9%BA%BC\" title=\"CSS \u6d6e\u52d5\u6703\u7d93\u5e38\u8207\u6a19\u6e96\u6d41\u7236\u7d1a\u642d\u914d\u4f7f\u7528\u70ba\u4ec0\u9ebc?\">CSS \u6d6e\u52d5\u6703\u7d93\u5e38\u8207\u6a19\u6e96\u6d41\u7236\u7d1a\u642d\u914d\u4f7f\u7528\u70ba\u4ec0\u9ebc?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/learningnow.com.tw\/css-float\/#CSS_%E6%B5%AE%E5%8B%95%E4%BD%88%E5%B1%80%E8%A9%B2%E6%B3%A8%E6%84%8F%E4%BB%80%E9%BA%BC\" title=\"CSS \u6d6e\u52d5\u4f48\u5c40\u8a72\u6ce8\u610f\u4ec0\u9ebc?\">CSS \u6d6e\u52d5\u4f48\u5c40\u8a72\u6ce8\u610f\u4ec0\u9ebc?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/learningnow.com.tw\/css-float\/#CSS_%E6%B5%AE%E5%8B%95%E5%90%84%E9%A1%9E%E5%95%8F%E9%A1%8C\" title=\"CSS \u6d6e\u52d5\u5404\u985e\u554f\u984c\">CSS \u6d6e\u52d5\u5404\u985e\u554f\u984c<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/learningnow.com.tw\/css-float\/#CSS_%E6%B5%AE%E5%8B%95%E8%83%BD%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8B%95%E5%97%8E\" title=\"CSS \u6d6e\u52d5\u80fd\u6e05\u9664\u6d6e\u52d5\u55ce?\">CSS \u6d6e\u52d5\u80fd\u6e05\u9664\u6d6e\u52d5\u55ce?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/learningnow.com.tw\/css-float\/#CSS_%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8B%95%E6%9C%AC%E8%B3%AA\" title=\"CSS \u6e05\u9664\u6d6e\u52d5\u672c\u8cea\">CSS \u6e05\u9664\u6d6e\u52d5\u672c\u8cea<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/learningnow.com.tw\/css-float\/#CSS_%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8B%95%E8%AA%9E%E6%B3%95%E6%98%AF%E4%BB%80%E9%BA%BC\" title=\"CSS \u6e05\u9664\u6d6e\u52d5\u8a9e\u6cd5\u662f\u4ec0\u9ebc?\">CSS \u6e05\u9664\u6d6e\u52d5\u8a9e\u6cd5\u662f\u4ec0\u9ebc?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/learningnow.com.tw\/css-float\/#CSS_%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8B%95_-_%E9%A1%8D%E5%A4%96%E6%A8%99%E7%B1%A4%E6%B3%95\" title=\"CSS \u6e05\u9664\u6d6e\u52d5 &#8211; \u984d\u5916\u6a19\u7c64\u6cd5\">CSS \u6e05\u9664\u6d6e\u52d5 &#8211; \u984d\u5916\u6a19\u7c64\u6cd5<\/a><ul class='ez-toc-list-level-3'><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/learningnow.com.tw\/css-float\/#CSS_%E6%B5%AE%E5%8B%95%E9%9A%94%E7%89%86%E6%B3%95%E5%84%AA%E7%BC%BA%E9%BB%9E%E5%88%86%E6%9E%90\" title=\"CSS \u6d6e\u52d5\u9694\u7246\u6cd5\u512a\u7f3a\u9ede\u5206\u6790\">CSS \u6d6e\u52d5\u9694\u7246\u6cd5\u512a\u7f3a\u9ede\u5206\u6790<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/learningnow.com.tw\/css-float\/#CSS_%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8B%95_-_%E7%88%B6%E7%B4%9A%E6%B7%BB%E5%8A%A0_CSS_%E5%B1%AC%E6%80%A7_overflow\" title=\"CSS \u6e05\u9664\u6d6e\u52d5 &#8211; \u7236\u7d1a\u6dfb\u52a0 CSS \u5c6c\u6027 overflow\">CSS \u6e05\u9664\u6d6e\u52d5 &#8211; \u7236\u7d1a\u6dfb\u52a0 CSS \u5c6c\u6027 overflow<\/a><ul class='ez-toc-list-level-3'><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/learningnow.com.tw\/css-float\/#%E7%88%B6%E7%B4%9A%E6%B7%BB%E5%8A%A0_CSS_%E5%B1%AC%E6%80%A7_overflow_%E5%84%AA%E7%BC%BA%E9%BB%9E%E5%88%86%E6%9E%90\" title=\"\u7236\u7d1a\u6dfb\u52a0 CSS \u5c6c\u6027 overflow \u512a\u7f3a\u9ede\u5206\u6790\">\u7236\u7d1a\u6dfb\u52a0 CSS \u5c6c\u6027 overflow \u512a\u7f3a\u9ede\u5206\u6790<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/learningnow.com.tw\/css-float\/#CSS_%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8B%95_-_%E7%88%B6%E7%B4%9A%E6%B7%BB%E5%8A%A0_after_%E5%81%BD%E5%85%83%E7%B4%A0\" title=\"CSS \u6e05\u9664\u6d6e\u52d5 &#8211; \u7236\u7d1a\u6dfb\u52a0 after \u507d\u5143\u7d20\">CSS \u6e05\u9664\u6d6e\u52d5 &#8211; \u7236\u7d1a\u6dfb\u52a0 after \u507d\u5143\u7d20<\/a><ul class='ez-toc-list-level-3'><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/learningnow.com.tw\/css-float\/#%E7%88%B6%E7%B4%9A%E6%B7%BB%E5%8A%A0_after_%E5%81%BD%E5%85%83%E7%B4%A0%E5%84%AA%E7%BC%BA%E9%BB%9E%E5%88%86%E6%9E%90\" title=\"\u7236\u7d1a\u6dfb\u52a0 after \u507d\u5143\u7d20\u512a\u7f3a\u9ede\u5206\u6790\">\u7236\u7d1a\u6dfb\u52a0 after \u507d\u5143\u7d20\u512a\u7f3a\u9ede\u5206\u6790<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/learningnow.com.tw\/css-float\/#CSS_%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8B%95_-_%E7%88%B6%E7%B4%9A%E6%B7%BB%E5%8A%A0%E9%9B%99%E5%81%BD%E5%85%83%E7%B4%A0\" title=\"CSS \u6e05\u9664\u6d6e\u52d5 &#8211; \u7236\u7d1a\u6dfb\u52a0\u96d9\u507d\u5143\u7d20\">CSS \u6e05\u9664\u6d6e\u52d5 &#8211; \u7236\u7d1a\u6dfb\u52a0\u96d9\u507d\u5143\u7d20<\/a><ul class='ez-toc-list-level-3'><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/learningnow.com.tw\/css-float\/#%E7%88%B6%E7%B4%9A%E6%B7%BB%E5%8A%A0%E9%9B%99%E5%81%BD%E5%85%83%E7%B4%A0%E5%84%AA%E7%BC%BA%E9%BB%9E%E5%88%86%E6%9E%90\" title=\"\u7236\u7d1a\u6dfb\u52a0\u96d9\u507d\u5143\u7d20\u512a\u7f3a\u9ede\u5206\u6790\">\u7236\u7d1a\u6dfb\u52a0\u96d9\u507d\u5143\u7d20\u512a\u7f3a\u9ede\u5206\u6790<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/learningnow.com.tw\/css-float\/#CSS_%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8B%95%E7%B8%BD%E7%B5%90\" title=\"CSS \u6e05\u9664\u6d6e\u52d5\u7e3d\u7d50\">CSS \u6e05\u9664\u6d6e\u52d5\u7e3d\u7d50<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%E7%B6%B2%E9%A0%81%E4%BD%88%E5%B1%80%E6%96%B9%E5%BC%8F%E6%9C%89%E5%93%AA%E4%BA%9B\"><\/span>\u7db2\u9801\u4f48\u5c40\u65b9\u5f0f\u6709\u54ea\u4e9b?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"575\" src=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u7db2\u9801\u4f48\u5c40\u65b9\u5f0f\u6709\u54ea\u4e9b.jpg?resize=1024%2C575&#038;ssl=1\" alt=\"\" class=\"wp-image-1625\" srcset=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u7db2\u9801\u4f48\u5c40\u65b9\u5f0f\u6709\u54ea\u4e9b.jpg?resize=1024%2C575&amp;ssl=1 1024w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u7db2\u9801\u4f48\u5c40\u65b9\u5f0f\u6709\u54ea\u4e9b.jpg?resize=300%2C168&amp;ssl=1 300w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u7db2\u9801\u4f48\u5c40\u65b9\u5f0f\u6709\u54ea\u4e9b.jpg?resize=768%2C431&amp;ssl=1 768w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u7db2\u9801\u4f48\u5c40\u65b9\u5f0f\u6709\u54ea\u4e9b.jpg?resize=1536%2C863&amp;ssl=1 1536w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u7db2\u9801\u4f48\u5c40\u65b9\u5f0f\u6709\u54ea\u4e9b.jpg?w=2003&amp;ssl=1 2003w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" title=\"\" data-recalc-dims=\"1\"><\/figure>\n\n\n\n<p>\u5728\u958b\u59cb\u5b78\u7fd2\u524d\u6211\u5011\u5148\u4f86\u8a0e\u8ad6\u8a0e\u8ad6\u4ec0\u9ebc\u662f\u7db2\u9801\u4f48\u5c40\u65b9\u5f0f? \u7db2\u9801\u4f48\u5c40\u65b9\u5f0f\u6709\u54ea\u4e9b\uff0c\u90a3\u4e9b\u662f\u4f60\u4e4b\u524d\u5b78\u904e\u7684\uff0c<strong><span class=\"has-inline-color has-vivid-red-color\">\u4f60\u9084\u8a18\u5f97\u7db2\u9801\u7684\u4f48\u5c40\u672c\u8cea\u662f\u4ec0\u9ebc\u55ce? <\/span><\/strong>\u5c31\u662f\u4f7f\u7528 CSS \u4f86\u64fa\u653e\u76d2\u5b50\u7684\u76f8\u5c0d\u61c9\u7684\u4f4d\u7f6e\uff0c\u5982\u679c\u4f60\u554f\u6211\u70ba\u4ec0\u9ebc\u7684\u8a71\u6211\u5efa\u8b70\u4f60\u53ef\u4ee5\u770b\u770b\u6211\u4e4b\u524d\u5beb\u7684\u6587\u7ae0\u597d\u597d\u8907\u7fd2\u4e00\u4e0b\u70ba\u4ec0\u9ebc CSS \u53ef\u4ee5\u63a7\u5236\u76d2\u5b50\u5537! \u5426\u5247\u63a5\u4e0b\u4f86\u7684 CSS \u6d6e\u52d5\u4f60\u4e5f\u6703\u5b78\u4e0d\u597d\u7684\u56e0\u70ba\u7f3a\u4e4f\u4e00\u4e9b\u76d2\u5b50\u6a21\u578b\u89c0\u5ff5\uff0c<strong><span class=\"has-inline-color has-vivid-red-color\">\u4e00\u822c\u50b3\u7d71\u7db2\u9801\u7684\u4f48\u5c40\u65b9\u5f0f\u6709\u6a19\u6e96\u6d41\u3001\u6d6e\u52d5\u3001\u5b9a\u4f4d\u65b9\u5f0f<\/span><\/strong>\u3002<\/p>\n\n\n\n<ul><li><strong>\u6a19\u6e96\u6d41 ( \u666e\u901a\u6d41 \/ \u6587\u6a94\u6d41 )<\/strong><\/li><li><strong>\u6d6e\u52d5<\/strong><\/li><li><strong>\u5b9a\u4f4d<\/strong><\/li><\/ul>\n\n\n\n<p>\u4f60\u53ef\u80fd\u5f88\u597d\u5947\u554f\u6211\u8aaa\u50b3\u7d71\u7db2\u9801\u662f\u4ec0\u9ebc\u610f\u601d\uff0c\u50b3\u7d71\u5c31\u662f\u6307<span class=\"has-inline-color has-vivid-red-color\"> <strong>PC \u7aef<\/strong><\/span>\uff0c\u56e0\u70ba\u4ee5\u524d\u624b\u6a5f\u6839\u672c\u9084\u4e0d\u80fd\u4e0a\u7db2\uff0c\u7576\u7136\u5728<strong><span class=\"has-inline-color has-vivid-red-color\">\u79fb\u52d5\u7aef<\/span><\/strong>\u7684\u7db2\u9801\u4f48\u5c40\u65b9\u5f0f\u4e0d\u592a\u76f8\u540c\u53c8\u6703\u6709\u5176\u4ed6\u7a2e\u4f48\u5c40\u65b9\u5f0f\u7522\u751f\uff0c\u9019\u908a\u5c31\u5148\u53ea\u8a0e\u8ad6 PC \u7aef\u5982\u679c\u4f60\u5f88\u7cfe\u7d50\u5230\u5e95\u8981\u5148\u5b78 PC \u7aef\u9084\u662f\u79fb\u52d5\u7aef ( \u624b\u6a5f\u7aef\u3001\u5e73\u677f )\uff0c\u6211<strong><span class=\"has-inline-color has-vivid-red-color\">\u5efa\u8b70\u4f60\u5148\u5b78\u6703 PC \u7aef\u5728\u5b78\u79fb\u52d5\u7aef<\/span><\/strong>\uff0c\u56e0\u70ba\u89c0\u5ff5\u662f\u53ef\u4ee5\u4e92\u901a\u7684\uff0c\u90a3\u5230\u5e95 PC \u7aef\u7684\u76d2\u5b50\u6a21\u578b\u6392\u5217\u6709\u5f88\u91cd\u8981\u55ce?<\/p>\n\n\n\n<p>\u91cd\u8981\u53ef\u5927\u4e86\uff0c\u5728\u524d\u9762\u76d2\u5b50\u6a21\u578b\u4e2d\u9084\u6709\u66f4\u65e9\u4e4b\u524d\u7684 CSS \u6559\u5b78\u4e2d\u6211\u5011\u90fd\u4e00\u76f4\u5728\u4f7f\u7528\u6a19\u6e96\u6d41\u7684\u4f48\u5c40\u65b9\u5f0f\uff0c\u53ea\u662f\u4f60\u4e0d\u77e5\u9053\u539f\u4f86\u9019\u7a2e\u65b9\u5f0f\u662f\u6a19\u6e96\u6d41\u7684\u5beb\u6cd5\u800c\u5df2\uff0c\u5982\u679c\u4f60\u8aaa\u662f\u666e\u901a\u6d41\u5beb\u6cd5\u4e5f\u662f\u53ef\u4ee5\u62c9! \u70ba\u4ec0\u9ebc\u9084\u9700\u8981\u5b78\u6d6e\u52d5\u3001\u5b9a\u4f4d\uff0c\u7576\u7136\u4f60\u4e5f\u53ef\u4ee5\u53ea\u5b78\u4e00\u7a2e\u4e0d\u592a\u6703\u600e\u6a23\uff0c\u53ea\u662f\u8b80\u8005\u4e00\u770b\u898b\u4f60\u7db2\u7ad9\u7db2\u9801\u76f4\u63a5\u5c31\u50bb\u773c\u56e0\u70ba\u4f60\u7db2\u9801\u5c31\u7b97\u7528\u76d2\u5b50\u6a21\u578b\u898f\u5283\u4e86\uff0c\u4f60\u7d55\u5c0d\u6c92\u8fa6\u6cd5\u505a\u5230\u76d2\u5b50\u5f9e\u5de6\u5230\u53f3\u4e26\u6392\uff0c\u4f60\u6703\u8aaa\u600e\u9ebc\u53ef\u80fd\u660e\u660e\u5c31\u53ef\u4ee5\u5f9e\u5de6\u81f3\u53f3\u7684\u6392\u5217\uff0c\u6211\u53ea\u80fd\u8aaa\u4f60\u4e4b\u524d\u521d\u5b78\u76d2\u5b50\u6a21\u578b\u6642\u6c92\u6709\u771f\u7684\u7df4\u7fd2\u770b\u770b\u3002<\/p>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"%E4%BB%80%E9%BA%BC%E6%98%AF%E6%A8%99%E6%BA%96%E6%B5%81\"><\/span>\u4ec0\u9ebc\u662f\u6a19\u6e96\u6d41?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"575\" src=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u4ec0\u9ebc\u662f\u6a19\u6e96\u6d41.jpg?resize=1024%2C575&#038;ssl=1\" alt=\"\" class=\"wp-image-1627\" srcset=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u4ec0\u9ebc\u662f\u6a19\u6e96\u6d41.jpg?resize=1024%2C575&amp;ssl=1 1024w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u4ec0\u9ebc\u662f\u6a19\u6e96\u6d41.jpg?resize=300%2C168&amp;ssl=1 300w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u4ec0\u9ebc\u662f\u6a19\u6e96\u6d41.jpg?resize=768%2C431&amp;ssl=1 768w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u4ec0\u9ebc\u662f\u6a19\u6e96\u6d41.jpg?resize=1536%2C863&amp;ssl=1 1536w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u4ec0\u9ebc\u662f\u6a19\u6e96\u6d41.jpg?w=2003&amp;ssl=1 2003w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" title=\"\" data-recalc-dims=\"1\"><\/figure>\n\n\n\n<p>\u5c31\u662f HTML \u6a19\u7c64\u6309\u7167\u898f\u5b9a\u9ed8\u8a8d\u7684\u65b9\u5f0f\u53bb\u6392\u5217\u53bb\u5448\u73fe\u7d66\u4f60\u770b\uff0c\u6709\u60f3\u8d77\u4f86\u55ce? \u6211\u5011\u4e0d\u662f\u5b78\u904e<strong>\u584a\u5143\u7d20\u3001\u884c\u5167\u5143\u7d20\u3001\u884c\u5167\u584a\u5143\u7d20<\/strong>\u9084\u5b78\u904e\u5982\u4f55\u4f7f\u7528 CSS \u53bb\u6539\u8b8a\u4ed6\u5011\u4e4b\u9593\u80fd\u4e92\u76f8\u8f49\u63db\u7684\u90e8\u5206\u3002<\/p>\n\n\n\n<ul><li><strong>\u584a\u5143\u7d20\u6703<span class=\"has-inline-color has-vivid-red-color\">\u7368\u4f54\u4e00\u884c<\/span><\/strong><\/li><li><strong>\u884c\u5167\u5143\u7d20\u4e00\u884c\u53ef\u4ee5\u653e\u597d\u591a\u500b<\/strong><\/li><li><strong>\u884c\u5167\u584a\u5143\u7d20\u4e00\u884c\u53ef\u4ee5\u653e\u597d\u591a\u500b<\/strong><\/li><\/ul>\n\n\n\n<p>\u4ee5\u4e0a\u5148\u524d\u6211\u5011\u90fd\u5f88\u5e38\u53bb\u4f7f\u7528\uff0c\u73fe\u5728\u6211\u5011\u7d42\u65bc\u77e5\u9053\u5176\u5be6\u5b83\u662f\u6709\u540d\u5b57\u7a31\u70ba<strong><span class=\"has-inline-color has-vivid-red-color\">\u6a19\u6e96\u6d41<\/span><\/strong>\uff0c\u6a19\u6e96\u6d41\u662f\u6700\u57fa\u672c\u7684\u4f48\u5c40\u65b9\u5f0f\uff0c\u4f46\u5f80\u5f80\u4f60\u53ea\u5b78\u4e00\u7a2e\u6a19\u6e96\u6d41\u662f\u4e0d\u5920\u7528\u7684\uff0c\u4e00\u822c\u524d\u7aef\u5de5\u7a0b\u5e2b\u90fd\u9084\u6703\u4f7f\u7528\u5176\u5b83\u5169<strong><span class=\"has-inline-color has-vivid-red-color\">\u7a2e CSS \u6d6e\u52d5<\/span><\/strong>\u548c <strong><span class=\"has-inline-color has-vivid-red-color\">CSS \u5b9a\u4f4d<\/span><\/strong>\uff0c\u4f60\u53ef\u80fd\u53c8\u6703\u60f3\u8aaa\u6211\u53c8\u6c92\u8981\u7576\u524d\u7aef\u5de5\u7a0b\u5e2b\uff0c\u4f46\u662f\u5982\u679c\u4f60\u8981\u505a\u51fa\u76d2\u5b50\u4e26\u5217\u6216\u662f\u56fa\u5b9a\u5728\u67d0\u4e00\u8655\uff0c\u4f60\u4f9d\u9760\u5148\u524d\u5b78\u7fd2\u7684\u6a19\u6e96\u6d41\u7684\u65b9\u5f0f\u5b8c\u5168\u6703\u505a\u4e0d\u4e86\u7684\u3002<\/p>\n\n\n\n<p>\u4e00\u822c\u5b8c\u6574\u7684\u7db2\u9801\u5728\u958b\u767c\u7684\u904e\u7a0b\u4e2d\uff0c\u4e00\u500b\u9801\u9762\u6703\u5305\u542b\u4e09\u7a2e\u4f48\u5c40\u65b9\u5f0f<strong><span class=\"has-inline-color has-vivid-red-color\">\u6a19\u6e96\u6d41\u65b9\u5f0f\u3001\u6d6e\u52d5\u65b9\u5f0f\u3001\u5b9a\u4f4d\u65b9\u5f0f<\/span><\/strong>\uff0c\u9019\u4e09\u7a2e\u4f48\u5c40\u65b9\u5f0f\u90fd\u8981\u7528\u4f86\u64fa\u653e\u76d2\u5b50\u6a21\u578b\u7684\uff0c\u53ea\u8981\u76d2\u5b50\u64fa\u653e\u5230\u5408\u9069\u4f4d\u7f6e\u5f8c\uff0c\u4f48\u5c40\u9801\u9762\u5c31\u80fd\u5920\u81ea\u7136\u800c\u7136\u5b8c\u6210\u4e86\u4e5f\u6703\u7528\u7684\u5f88\u8f15\u9b06\u65b9\u4fbf\uff0c\u5982\u679c\u55ae\u69cd\u5339\u99ac\u7684\u53bb\u4f7f\u7528\u5176\u4e2d\u4e00\u7a2e\u65b9\u5f0f\uff0c\u53bb\u9032\u884c\u7db2\u9801\u4f48\u5c40\u958b\u767c\u662f\u5f88\u5403\u529b\u800c\u4e14\u9084\u505a\u4e0d\u5230\u5176\u5b83\u7a2e\u985e\u65b9\u5f0f\u7684\u6548\u679c\uff0c\u6211\u60f3\u9019\u4e26\u4e0d\u662f\u6211\u5011\u60f3\u8981\u7684\u5427!<\/p>\n\n\n\n<h2><span class=\"ez-toc-section\" id=\"%E7%82%BA%E4%BB%80%E9%BA%BC%E9%9C%80%E8%A6%81_CSS_%E6%B5%AE%E5%8B%95\"><\/span>\u70ba\u4ec0\u9ebc\u9700\u8981 CSS \u6d6e\u52d5?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"575\" src=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u70ba\u4ec0\u9ebc\u9700\u8981CSS\u6d6e\u52d5.jpg?resize=1024%2C575&#038;ssl=1\" alt=\"\" class=\"wp-image-1648\" srcset=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u70ba\u4ec0\u9ebc\u9700\u8981CSS\u6d6e\u52d5.jpg?resize=1024%2C575&amp;ssl=1 1024w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u70ba\u4ec0\u9ebc\u9700\u8981CSS\u6d6e\u52d5.jpg?resize=300%2C168&amp;ssl=1 300w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u70ba\u4ec0\u9ebc\u9700\u8981CSS\u6d6e\u52d5.jpg?resize=768%2C431&amp;ssl=1 768w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u70ba\u4ec0\u9ebc\u9700\u8981CSS\u6d6e\u52d5.jpg?resize=1536%2C863&amp;ssl=1 1536w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u70ba\u4ec0\u9ebc\u9700\u8981CSS\u6d6e\u52d5.jpg?w=2003&amp;ssl=1 2003w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" title=\"\" data-recalc-dims=\"1\"><\/figure>\n\n\n\n<p><strong><span class=\"has-inline-color has-vivid-red-color\">\u70ba\u4ec0\u9ebc\u9700\u8981 CSS \u6d6e\u52d5\u4f86\u4f48\u5c40\u9801\u9762\u5462?<\/span><\/strong> \u9019\u662f\u4e00\u500b\u5f88\u597d\u7684\u554f\u984c\u4f60\u53ef\u4ee5\u5148\u601d\u8003\u600e\u9ebc\u80fd\u5920\u4f7f\u7528\u6a19\u6e96\u6d41\u505a\u5230\uff0c\u5982\u4f55\u8b93\u591a\u500b\u584a\u7d1a\u5143\u7d20\u4e5f\u5c31\u662f\u76d2\u5b50\u6a21\u578b\u6c34\u5e73\u6392\u6210<strong>\u4e00\u5217<\/strong>\u5462? \u4e0d\u7ba1\u4f60\u600e\u9ebc\u4f7f\u7528\u4f60\u4e00\u5b9a\u6c92\u8fa6\u6cd5\u5728\u6a19\u6e96\u6d41\u4e2d\u505a\u5230\u9019\u6a23\u7684\u64cd\u4f5c\u90a3\u662f\u56e0\u70ba\u584a\u7d1a\u5143\u7d20\u5c31\u662f\u7368\u4f54\u4e00\u884c<strong>\u975e\u5e38\u9738\u9053<\/strong>\u7684\u3002<\/p>\n\n\n\n<p>\u4f60\u6709\u5b78\u597d\u7684\u8a71\u4f60\u53ef\u80fd\u6703\u4f7f\u7528\u884c\u5167\u584a\u5143\u7d20\u90a3\u9019\u6a23\u5c31\u53ef\u4ee5\u9032\u884c<strong>\u6c34\u5e73\u6392\u5217<\/strong>\uff0c\u53c8\u6216\u8005\u662f\u4f7f\u7528\u584a\u5143\u7d20\u7684\u8f49\u63db\u628a\u584a\u5143\u7d20\u8f49\u63db\u6210\u884c\u5167\u584a\u5143\u7d20\u9019\u6a23\u5c31\u80fd\u5920\u505a\u5230\u6c34\u5e73\u6392\u5217\u7d44\u5408\u4e86\uff0c\u4f60\u9019\u6a23\u505a\u78ba\u5be6\u53ef\u4ee5\u5be6\u73fe\u4f46\u662f\u5440! \u8f49\u63db\u5f8c\u7684\u884c\u5167\u584a\u5143\u7d20\u4e4b\u9593\u6703\u6709<strong><span class=\"has-inline-color has-vivid-red-color\">\u7e2b\u9699<\/span><\/strong>\uff0c<strong><span class=\"has-inline-color has-vivid-red-color\">\u7e2b\u9699\u8207\u7e2b\u9699\u4e4b\u9593\u7684\u8ddd\u96e2\u4f60\u6c92\u8fa6\u6cd5\u53bb\u63a7\u5236<\/span><\/strong>\uff0c\u9019\u662f\u4e00\u9805\u5f88\u81f4\u547d\u7684\u7f3a\u9ede\uff0c\u4e00\u822c\u6211\u5011\u5e0c\u671b\u80fd\u5920\u63a7\u5236\u76d2\u5b50\u6a21\u578b\u8207\u76d2\u5b50\u6a21\u578b\u4e4b\u9593\u7684\u7a7a\u9699\uff0c\u975e\u5e38\u8b1b\u7a76\u7684! \u53c8\u6216\u8005\u662f\u505a\u5230\u6c92\u6709\u7e2b\u9699\uff0c\u5982\u679c\u662f\u4f7f\u7528\u6a19\u6e96\u6d41\u662f\u6c92\u8fa6\u6cd5\u505a\u5230\u7684\u63a7\u5236\u7e2b\u9699\u3002<\/p>\n\n\n\n<p>\u63a5\u4e0b\u4f86\u5728\u554f\u554f\u4f60\uff0c\u8981\u600e\u9ebc\u505a\u5230\u5169\u500b\u76d2\u5b50\u6c34\u5e73\u4e26\u6392\uff0c\u4e00\u500b\u76d2\u5b50\u5de6\u5c0d\u9f4a\u4e00\u500b\u76d2\u5b50\u53f3\u5c0d\u9f4a\u4e2d\u9593\u662f\u6c92\u6709\u6771\u897f\u7684\uff0c\u5728\u6709\u4e9b\u7db2\u7ad9\u4e2d\u975e\u5e38\u5e38\u898b\u4f46\u662f\u4f60\u80fd\u5920\u7528\u6a19\u6e96\u6d41\u505a\u51fa\u9019\u6a23\u7684\u6548\u679c\u55ce? \u4f60\u53ef\u4ee5\u505c\u4e0b\u4f86\u601d\u8003\u600e\u9ebc\u767c\u63ee\u4f60\u7684\u6a19\u6e96\u6d41\u4f5c\u6cd5\u505a\u51fa\u4f86\u6211\u60f3\u4e00\u5b9a\u5f88\u96e3\u5427! \u96e3\u5230\u6211\u90fd\u4e0d\u77e5\u9053\u600e\u9ebc\u505a\u4e86\u9019\u6642\u5019 CSS \u6d6e\u52d5\u5c31\u8981\u767b\u5834\u4e86\uff0c<\/p>\n\n\n\n<p>\u56e0\u70ba\u7db2\u9801\u4e2d\u6709\u5f88\u591a\u4f48\u5c40\u65b9\u5f0f\u6a19\u6e96\u6d41\u662f\u6c92\u8fa6\u6cd5\u505a\u51fa\u4f86\uff0c<strong>\u6a19\u6e96\u6d41\u9084\u662f\u6709\u4e00\u500b\u6975\u9650\u88ab\u9650\u5236<\/strong>\uff0c\u6b64\u6642 CSS \u958b\u767c\u8005\u624d\u53c8\u958b\u767c\u4e86 CSS \u6d6e\u52d5\u5c31\u80fd\u8f15\u9b06\u5b8c\u6210\u525b\u525b\u90a3\u5169\u500b\u554f\u984c\uff0c\u70ba\u4ec0\u9ebc\u5462? \u56e0\u70ba\u6d6e\u52d5\u6703\u6539\u8b8a\u5143\u7d20\u6a19\u7c64\u7684\u6392\u5217\u65b9\u5f0f\uff0c<strong>\u6d6e\u52d5\u7684\u6700\u5e38\u61c9\u7528\u5834\u666f\u662f\u53ef\u4ee5\u8b93\u591a\u500b\u584a\u7d1a\u5143\u7d20\u4e00\u884c\u5167\u6c34\u5e73\u6392\u5217\u4e26\u986f\u793a\u5448\u73fe\u51fa\u4f86<\/strong>\u3002<\/p>\n\n\n\n<a class=\"btn_CTA\" href=\"https:\/\/learningnow.com.tw\/affiliate-marketing-make-money\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u9ede\u6211\u77ad\u89e3 \u5c0f\u9752\u5982\u4f55\u6bcf\u6708\u591a\u8cfa5\u4f4d\u6578\u53f0\u5e63<\/a>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"%E6%A8%99%E6%BA%96%E6%B5%81%E8%88%87%E6%B5%AE%E5%8B%95%E4%BD%BF%E7%94%A8%E6%99%82%E6%A9%9F%E6%98%AF%E4%BB%80%E9%BA%BC%E6%99%82%E5%80%99\"><\/span>\u6a19\u6e96\u6d41\u8207\u6d6e\u52d5\u4f7f\u7528\u6642\u6a5f\u662f\u4ec0\u9ebc\u6642\u5019?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"575\" src=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u6a19\u6e96\u6d41\u8207\u6d6e\u52d5\u4f7f\u7528\u6642\u6a5f\u662f\u4ec0\u9ebc\u6642\u5019.jpg?resize=1024%2C575&#038;ssl=1\" alt=\"\" class=\"wp-image-1628\" srcset=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u6a19\u6e96\u6d41\u8207\u6d6e\u52d5\u4f7f\u7528\u6642\u6a5f\u662f\u4ec0\u9ebc\u6642\u5019.jpg?resize=1024%2C575&amp;ssl=1 1024w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u6a19\u6e96\u6d41\u8207\u6d6e\u52d5\u4f7f\u7528\u6642\u6a5f\u662f\u4ec0\u9ebc\u6642\u5019.jpg?resize=300%2C168&amp;ssl=1 300w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u6a19\u6e96\u6d41\u8207\u6d6e\u52d5\u4f7f\u7528\u6642\u6a5f\u662f\u4ec0\u9ebc\u6642\u5019.jpg?resize=768%2C431&amp;ssl=1 768w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u6a19\u6e96\u6d41\u8207\u6d6e\u52d5\u4f7f\u7528\u6642\u6a5f\u662f\u4ec0\u9ebc\u6642\u5019.jpg?resize=1536%2C863&amp;ssl=1 1536w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u6a19\u6e96\u6d41\u8207\u6d6e\u52d5\u4f7f\u7528\u6642\u6a5f\u662f\u4ec0\u9ebc\u6642\u5019.jpg?w=2003&amp;ssl=1 2003w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" title=\"\" data-recalc-dims=\"1\"><\/figure>\n\n\n\n<ul><li><strong>\u591a\u500b\u584a\u7d1a\u5143\u7d20\u7e31\u5411 ( Y\u8ef8 ) \u6392\u5217\u8acb\u4f7f\u7528\u6a19\u6e96\u6d41<\/strong><\/li><li><strong>\u591a\u500b\u584a\u7d1a\u5143\u7d20\u6a6b\u5411 ( X\u8ef8 ) \u6392\u5217\u8acb\u4f7f\u7528\u6d6e\u52d5 ( float )<\/strong><\/li><\/ul>\n\n\n\n<h2><span class=\"ez-toc-section\" id=\"CSS_%E6%B5%AE%E5%8B%95_float_%E6%98%AF%E4%BB%80%E9%BA%BC\"><\/span>CSS \u6d6e\u52d5 ( float ) \u662f\u4ec0\u9ebc?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"575\" src=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS-\u6d6e\u52d5float\u662f\u4ec0\u9ebc.jpg?resize=1024%2C575&#038;ssl=1\" alt=\"\" class=\"wp-image-1629\" srcset=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS-\u6d6e\u52d5float\u662f\u4ec0\u9ebc.jpg?resize=1024%2C575&amp;ssl=1 1024w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS-\u6d6e\u52d5float\u662f\u4ec0\u9ebc.jpg?resize=300%2C168&amp;ssl=1 300w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS-\u6d6e\u52d5float\u662f\u4ec0\u9ebc.jpg?resize=768%2C431&amp;ssl=1 768w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS-\u6d6e\u52d5float\u662f\u4ec0\u9ebc.jpg?resize=1536%2C863&amp;ssl=1 1536w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS-\u6d6e\u52d5float\u662f\u4ec0\u9ebc.jpg?w=2003&amp;ssl=1 2003w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" title=\"\" data-recalc-dims=\"1\"><\/figure>\n\n\n\n<p>\u70ba\u4ec0\u9ebc\u9700\u8981\u6d6e\u52d5\u6211\u5011\u5df2\u7d93\u77e5\u9053\u4e86\uff0c\u90a3\u5012\u5e95 CSS \u6d6e\u52d5\u662f\u4ec0\u9ebc\u6211\u5011\u5c31\u6709\u5fc5\u8981\u597d\u597d\u4e86\u89e3\u4e00\u4e0b\u4e86\uff0c\u6d6e\u52d5 ( float ) \u5c6c\u6027\u662f\u7528\u65bc<strong><span class=\"has-inline-color has-vivid-red-color\">\u5275\u5efa\u6d6e\u52d5\u6846<\/span><\/strong>\uff0c\u98c4\u6d6e\u79fb\u52d5\u5230\u4e00\u908a\u76f4\u5230\u78b0\u5230\u5de6\u5074\u6216\u662f\u53f3\u5074\u908a\u7de3\u6216\u662f<strong>\u78b0\u5230\u53e6\u4e00\u500b\u6d6e\u52d5\u6846<\/strong>\uff0c\u7c21\u55ae\u4f86\u8aaa<strong><span class=\"has-inline-color has-vivid-red-color\">\u6d6e\u52d5\u5c31\u662f\u98c4\u5728\u7a7a\u4e2d<\/span><\/strong>\uff0c\u4e00\u5b9a\u9700\u8981\u9760\u5728\u908a\u7de3\u8655\u4f60\u53ef\u4ee5\u6307\u5b9a\u9760\u5728\u54ea\u4e00\u5074\u3002<\/p>\n\n\n\n<p>CSS \u6d6e\u52d5\u8a9e\u6cd5\u5982\u4e0b\u8868\u793a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\u5143\u7d20\u9078\u64c7\u5668 { float: \u5c6c\u6027\u503c; }\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td><strong>CSS\u6d6e\u52d5\u5c6c\u6027\u503c<\/strong><\/td><td><strong>CSS\u6d6e\u52d5\u63cf\u8ff0<\/strong><\/td><\/tr><tr><td>none<\/td><td>\u5143\u7d20\u4e0d\u6d6e\u52d5 ( \u9ed8\u8a8d )<\/td><\/tr><tr><td>left<\/td><td>\u5143\u7d20\u5411\u5de6\u6d6e\u52d5<\/td><\/tr><tr><td>right<\/td><td>\u5143\u7d20\u5411\u53f3\u6d6e\u52d5<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u4e0d\u7528\u61f7\u7591 CSS \u6d6e\u52d5\u7684\u5c6c\u6027\u503c\u5c31\u662f\u90a3\u9ebc\u5c11\uff0c\u4e0d\u662f\u5de6\u6d6e\u5c31\u662f\u53f3\u6d6e\u8981\u4e0d\u7136\u90fd\u901a\u901a\u4e0d\u8981\u6d6e\u52d5\uff0c\u9084\u8981\u77e5\u9053\u4e00\u9ede\u6211\u5011\u662f\u8981\u8b93\u884c\u5167\u584a\u5143\u7d20\u6d6e\u8d77\u4f86\uff0c\u884c\u5167\u584a\u5143\u7d20\u7684\u7279\u6027\u9084\u77e5\u9053\u55ce? \u5b83\u5c31\u662f\u4e00\u884c\u88e1\u982d\u53ef\u4ee5\u6709\u591a\u540c\u985e\u578b\u7684<strong>\u884c\u5167\u584a\u5143\u7d20\u9084\u80fd\u5920\u63a7\u5236\u81ea\u5df1\u7684\u5bec\u5ea6\u8207\u9ad8\u5ea6<\/strong>\uff0c\u73fe\u5728\u6211\u5011\u53ef\u4ee5\u901a\u904e CSS \u6d6e\u52d5\u8b93\u5b83\u98c4\u8d77\u4f86\uff0c\u5047\u8a2d\u4e00\u884c\u5167\u6709 2 \u500b\u884c\u5167\u584a\u5143\u7d20\uff0c\u60f3\u505a\u51fa\u4e0a\u7bc0\u6211\u5011\u8aaa\u7684\u4e00\u500b\u9760\u5de6\u4e00\u500b\u9760\u53f3\u7684\u6548\u679c\uff0c\u6211\u5011\u4f86\u770b\u770b\u600e\u9ebc\u4f5c\u5427!<\/p>\n\n\n\n<p>\u73fe\u5728\u53ea\u8981\u7d66\u7b2c\u4e00\u500b\u884c\u5167\u584a\u5143\u7d20\u6211\u5011\u8ce6\u4e88<strong> CSS \u6d6e\u52d5\u5c6c\u6027\u9760\u5de6 ( left )<\/strong>\u3001\u53e6\u4e00\u500b\u884c\u5167\u584a\u5143\u7d20\u6211\u5011\u7d66\u4ed6<strong> CSS \u6d6e\u52d5\u5c6c\u6027\u503c\u662f\u9760\u53f3 ( right ) <\/strong>\u9019\u6a23\u5c31\u80fd\u505a\u51fa\u4e00\u884c\u5167\u4e00\u500b\u9760\u5de6\u4e00\u500b\u9760\u53f3\u7684\u6548\u679c\u4e86\uff0c\u662f\u4e0d\u662f\u5f88\u65b9\u4fbf\u5462? \u5982\u679c\u4e0d\u76f8\u4fe1\u7684\u8a71\u6211\u5011\u4f86\u5275\u5efa\u4e00\u500b\u7c21\u55ae\u7684 HTML \u7d50\u69cb\u9aa8\u67b6\uff0c\u5728\u88e1\u982d\u65b0\u589e 2 \u500b &lt;div&gt; \u76d2\u5b50\u6a21\u578b\u6a19\u7c64\u9019\u6a23\u5c31\u53ef\u4ee5\u4e86\uff0c\u5b8c\u6210\u597d HTML \u7d50\u69cb\u9aa8\u67b6\u5f8c\u5b58\u6a94\u5148\u6253\u958b\u7db2\u9801\u770b\u770b\u662f\u4e0d\u662f\u7db2\u9801\u5448\u73fe\u65b9\u5f0f\u662f\u6a19\u6e96\u6d41\u5440! \u6c92\u932f\u7684! \u5c31\u662f\u6a19\u6e96\u6d41\u5f9e\u4e0a\u5230\u4e0b\u986f\u793a\u76d2\u5b50\u6a21\u578b\u6a19\u7c64\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;body&gt;\n\t&lt;div class=\"left\"&gt;\u6211\u662f\u76d2\u5b5001&lt;\/div&gt;\n\t&lt;div class=\"right\"&gt;\u6211\u662f\u76d2\u5b5002&lt;\/div&gt;\n\n&lt;\/body&gt;\n<\/code><\/pre>\n\n\n\n<p>\u6211\u5011\u63a5\u4e0b\u4f86\u5beb CSS \u5c6c\u6027\u5427! \u9019\u6b21\u6211\u5011\u8981\u5148\u628a\u76d2\u5b50\u6490\u5927\u9084\u8a18\u5f97 CSS \u5c6c\u6027\u600e\u9ebc\u53bb\u4f7f\u7528\u55ce? \u5c31\u662f\u4f7f\u7528\u5bec\u5ea6\u8207\u9ad8\u5ea6\uff0c\u5bec\u5ea6\u7684\u503c\u6211\u5011\u7d66\u500b 200px\u3001\u9ad8\u5ea6\u7684\u503c\u6211\u5011\u4e5f\u662f\u7d66\u500b 200px\uff0c\u56e0\u70ba\u76d2\u5b50\u6a21\u578b\u662f\u900f\u660e\u7684\u9084\u9700\u8981\u7d66\u500b\u80cc\u666f\u984f\u8272\u6211\u5011\u7d66\u500b\u7d05\u8272\uff0c\u6700\u5f8c\u662f\u8981\u4f86\u770b\u770b\u4eca\u5929\u525b\u5b78\u7fd2\u5230\u7684 <strong>CSS \u6d6e\u52d5\u5c6c\u6027<\/strong>\uff0c\u4f86\u770b\u770b\u771f\u7684\u9084\u662f\u5047\u7684\u76d2\u5b50\u6a21\u578b\u6703\u4e00\u500b\u8dd1\u53bb\u9760\u5de6\u3001\u4e00\u500b\u6703\u8dd1\u53bb\u9760\u53f3\uff0c\u90a3\u6211\u5011\u5148\u628a\u503c\u90fd\u586b\u597d\uff0c\u4f46\u5225\u5fd8\u4e86\u9019\u5169\u500b\u76d2\u5b50\u90fd\u8981\u5148\u53d6\u540d\u5537! \u5c31\u662f\u53bb Class \u5c6c\u5f62\u540d\u7a31\uff0c\u4e0d\u7136\u4f60\u6c92\u8fa6\u6cd5\u53bb\u63a7\u5236\u5537!<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n\t.left {\n\t\twidth: 200px;\n\t\theight: 200px;\n\t\tbackground-color: red;\n\t\tfloat: left;\n}\n\t.right {\n\t\twidth: 200px;\n\t\theight: 200px;\n\t\tbackground-color: red;\n\t\tfloat: right;\n}\n&lt;\/style&gt;\n<\/code><\/pre>\n\n\n\n<p>\u5b8c\u6210\u597d CSS \u5f8c\u4f60\u5728\u5b58\u6a94\u4e26\u7528\u700f\u89bd\u5668\u6253\u958b\u7db2\u9801\u770b\u770b\u4f60\u6703\u767c\u73fe\u4e00\u500b\u76d2\u5b50\u8dd1\u5230\u5de6\u5074\u4e00\u500b\u76d2\u5b50\u8dd1\u5230\u53f3\u5074\u5be6\u73fe\u4e86\u6211\u5011\u60f3\u8981\u7684\u7d50\u679c\u4e86\uff0c\u4e0d\u4fe1\u7684\u8a71\u4f60\u53ef\u4ee5\u52d5\u624b\u81ea\u5df1\u628a\u9019\u4e9b HTML \u4ee3\u78bc\u8207 CSS \u4ee3\u78bc\u52d5\u624b\u5beb\u5beb\u770b\u4e00\u904d\u4f60\u5c31\u6703\u66f4\u52a0\u7684\u4e86\u89e3 CSS \u6d6e\u52d5\u7684\u5de6\u6d6e\u52d5\u8207\u53f3\u6d6e\u52d5\u4e86\uff0c\u4f60\u53ef\u80fd\u9084\u6703\u60f3<strong><span class=\"has-inline-color has-vivid-red-color\">\u90a3\u5982\u679c\u5169\u500b\u76d2\u5b50\u6a21\u578b\u90fd\u52a0\u5165\u9760\u5de6\u5462?<\/span><\/strong> \u90a3\u7576\u7136\u9019\u5169\u500b\u76d2\u5b50\u6703\u7dca\u8cbc\u5728\u4e00\u8d77\u4e26\u6392\u986f\u793a\uff0c\u76f8\u53cd\u7684\u5982\u679c\u5169\u500b\u76d2\u5b50\u90fd\u9760\u53f3\u5462? \u7576\u7136\u9019\u5169\u500b\u76d2\u5b50\u6a21\u578b\u90fd\u6703\u8dd1\u53bb\u53f3\u5074\u4e26\u9760\u5728\u4e00\u8d77\u5537!<\/p>\n\n\n\n<ul><li><strong>\u5982\u679c\u4f7f\u7528 CSS \u6d6e\u52d5\u9760\u5de6\uff0c\u76d2\u5b50\u6a21\u578b\u5c31\u6703\u6d6e\u8d77\u4f86\u9760\u5728\u5de6\u5074\u700f\u89bd\u5668\u908a\u7de3<\/strong><\/li><li><strong>\u5982\u679c\u4f7f\u7528 CSS \u6d6e\u52d5\u9760\u53f3\uff0c\u76d2\u5b50\u6a21\u578b\u5c31\u6703\u6d6e\u8d77\u4f86\u9760\u5728\u53f3\u5074\u700f\u89bd\u5668\u908a\u7de3<\/strong><\/li><li><strong>\u540c\u6642\u4f7f\u7528 CSS \u6d6e\u52d5\u9760\u5de6\uff0c\u7d66 2 \u500b\u76d2\u5b50\u90a3\u4ed6\u5011\u6703\u4e00\u8d77\u76f8\u9130\u9760\u5de6\u5074\u700f\u89bd\u5668\u908a\u7de3<\/strong><\/li><li><strong>\u540c\u6642\u4f7f\u7528 CSS \u6d6e\u52d5\u9760\u53f3\uff0c\u7d66 2 \u500b\u76d2\u5b50\u90a3\u4ed6\u5011\u6703\u4e00\u8d77\u76f8\u9130\u9760\u53f3\u5074\u700f\u89bd\u5668\u908a\u7de3<\/strong><\/li><li><strong>\u5982\u679c\u5beb\u5d4c\u5957\u95dc\u4fc2\uff0c\u5927\u76d2\u5b50\u662f\u7236\u7d1a\u3001\u5c0f\u76d2\u5b50\u662f\u5b50\u96c6\uff0c\u90a3\u5c0f\u76d2\u5b50\u6d6e\u52d5\u5de6\u5074\u5247\u6703\u8cbc\u5728\u5927\u76d2\u5b50\u5167\u5de6\u5074\u908a\u7de3<\/strong><\/li><\/ul>\n\n\n\n<h2><span class=\"ez-toc-section\" id=\"CSS_%E6%B5%AE%E5%8B%95%E7%9A%84%E7%89%B9%E6%80%A7%E6%9C%89%E5%93%AA%E4%BA%9B\"><\/span>CSS \u6d6e\u52d5\u7684\u7279\u6027\u6709\u54ea\u4e9b?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"575\" src=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS-\u6d6e\u52d5\u7684\u7279\u6027\u6709\u54ea\u4e9b.jpg?resize=1024%2C575&#038;ssl=1\" alt=\"\" class=\"wp-image-1630\" srcset=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS-\u6d6e\u52d5\u7684\u7279\u6027\u6709\u54ea\u4e9b.jpg?resize=1024%2C575&amp;ssl=1 1024w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS-\u6d6e\u52d5\u7684\u7279\u6027\u6709\u54ea\u4e9b.jpg?resize=300%2C168&amp;ssl=1 300w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS-\u6d6e\u52d5\u7684\u7279\u6027\u6709\u54ea\u4e9b.jpg?resize=768%2C431&amp;ssl=1 768w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS-\u6d6e\u52d5\u7684\u7279\u6027\u6709\u54ea\u4e9b.jpg?resize=1536%2C863&amp;ssl=1 1536w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS-\u6d6e\u52d5\u7684\u7279\u6027\u6709\u54ea\u4e9b.jpg?w=2003&amp;ssl=1 2003w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" title=\"\" data-recalc-dims=\"1\"><\/figure>\n\n\n\n<p>CSS \u6d6e\u52d5\u7279\u6027\u975e\u5e38\u91cd\u8981\uff0c\u662f\u56e0\u70ba\u7d66<strong>\u5143\u7d20\u6a19\u7c64\u52a0\u5165\u6d6e\u52d5\u5f8c\u6574\u500b\u4ee5\u524d\u7684\u5143\u7d20\u6a19\u7c64\u5c31\u6703\u767c\u751f\u8b8a\u5316<\/strong>\uff0c<strong><span class=\"has-inline-color has-vivid-red-color\">\u4f46\u662f\u8b8a\u5316\u4ec0\u9ebc\u5462? <\/span><\/strong>\u4ee5\u524d\u7684\u9ed8\u8a8d\u7684\u6392\u5217\u65b9\u5f0f\u662f\u56fa\u5b9a\u7684\u72c0\u614b\uff0c\u4f60\u53ea\u8981\u8ce6\u4e88\u8a72\u5143\u7d20\u6a19\u7c64 CSS \u6d6e\u52d5\u5f8c\u9ed8\u8a8d\u5c31\u4e0d\u5728\u662f\u9ed8\u8a8d\uff0c\u4f60\u80fd\u5920\u6307\u5b9a\u4ed6\u5011\u7684\u6392\u5217\u65b9\u5f0f\u662f\u9760\u5de6\u9084\u662f\u9760\u53f3\uff0c\u9019\u9ede\u6211\u76f8\u4fe1\u525b\u525b\u7d93\u7531\u4e0a\u7bc0\u7684\u4ecb\u7d39\u4f60\u61c9\u8a72\u5f88\u6e05\u695a\u4e86\u5427! \u90a3<strong><span class=\"has-inline-color has-vivid-red-color\"> CSS \u6d6e\u52d5\u4f60\u5b78\u5f97\u597d\u4e0d\u597d\u6703\u5f71\u97ff\u5230\u5f8c\u9762\u4f60\u9032\u884c\u7db2\u9801\u4f48\u5c40\u7684\u72c0\u614b<\/span><\/strong>\uff0c\u6240\u4ee5\u9700\u8981\u597d\u597d\u4e86\u89e3\u4e26\u52a0\u4ee5\u638c\u63e1\u3002<\/p>\n\n\n\n<p>\u90a3\u63a5\u4e0b\u4f86\u6211\u5011\u662f\u5fc5\u8981\u4e86\u89e3 CSS \u6d6e\u52d5\u81ea\u5df1\u7684\u7279\u6027\u8207\u7279\u8272\uff0c\u7576\u7136\u6709\u5f88\u591a\u7279\u9ede\u4e0d\u904e\u6211\u5011\u53ea\u8ac7\u6700\u5177\u6709\u7279\u8272\u7684\u4e5f\u662f\u6d6e\u52d5\u81ea\u5df2\u624d\u6709\u7684\u529f\u80fd\uff0c\u5728\u5225\u7684 CSS \u5c6c\u6027\u6a23\u5f0f\u5e7e\u4e4e\u6c92\u6709\u9019\u6a23\u7684\u7279\u9ede\uff0c\u7e3d\u5171\u6709 3 \u9ede\u5982\u4e0b\u8868\u793a<\/p>\n\n\n\n<ul><li><strong>\u6d6e\u52d5\u5143\u7d20\u80fd\u812b\u96e2\u6a19\u6e96\u6d41 ( <span class=\"has-inline-color has-vivid-red-color\">\u812b\u6a19<\/span> )<\/strong><\/li><li><strong>\u6d6e\u52d5\u7684\u5143\u7d20\u6703\u4e00\u884c\u986f\u793a\uff0c\u4e26\u6703\u5c07\u5143\u7d20\u9802\u90e8\u5c0d\u9f4a<\/strong><\/li><li><strong>\u6d6e\u52d5\u7684\u5143\u7d20\u6703\u5177\u6709\u884c\u5167\u584a\u5143\u7d20\u7279\u6027<\/strong><\/li><\/ul>\n\n\n\n<p>\u77e5\u9053\u4e86\u9019 3 \u500b\u7279\u9ede\u7279\u6027\u6211\u5011\u5728\u55ae\u7368\u901a\u901a\u62ff\u51fa\u4f86\u597d\u597d\u7684\u53bb\u8a0e\u8ad6\uff0c\u9019\u6a23\u4f60\u6703\u6bd4\u8f03\u597d\u53bb\u7406\u89e3\u4e5f\u624d\u80fd\u5920\u7528\u7684\u6bd4\u8f03\u9806\u5fc3\u3002<\/p>\n\n\n\n<a class=\"btn_CTA\" href=\"https:\/\/learningnow.com.tw\/affiliate-marketing-make-money\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u9ede\u6211\u77ad\u89e3 \u5c0f\u9752\u5982\u4f55\u6bcf\u6708\u591a\u8cfa5\u4f4d\u6578\u53f0\u5e63<\/a>\n\n\n\n<p><\/p>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"CSS_%E6%B5%AE%E5%8B%95%E7%89%B9%E6%80%A7_-_%E8%84%AB%E9%9B%A2\"><\/span>CSS \u6d6e\u52d5\u7279\u6027 &#8211; \u812b\u96e2<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"575\" src=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u7279\u6027_\u812b\u96e2.jpg?resize=1024%2C575&#038;ssl=1\" alt=\"\" class=\"wp-image-1631\" srcset=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u7279\u6027_\u812b\u96e2.jpg?resize=1024%2C575&amp;ssl=1 1024w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u7279\u6027_\u812b\u96e2.jpg?resize=300%2C168&amp;ssl=1 300w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u7279\u6027_\u812b\u96e2.jpg?resize=768%2C431&amp;ssl=1 768w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u7279\u6027_\u812b\u96e2.jpg?resize=1536%2C863&amp;ssl=1 1536w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u7279\u6027_\u812b\u96e2.jpg?w=2003&amp;ssl=1 2003w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" title=\"\" data-recalc-dims=\"1\"><\/figure>\n\n\n\n<p>\u5728 CSS \u6d6e\u52d5\u7576\u4e2d\uff0c\u6d6e\u52d5\u5143\u7d20\u80fd\u5920\u812b\u96e2\u6a19\u6e96\u6d41\uff0c\u4e5f\u5c31\u662f\u8aaa\u4eca\u5929\u4f60\u7d66\u76d2\u5b50\u6a21\u578b\u52a0\u5165 CSS \u6d6e\u52d5\u5c6c\u6027\u5f8c\uff0c\u539f\u672c<strong>\u6a19\u6e96\u6d41\u5c31\u662f\u5f9e\u4e0a\u5230\u4e0b\u6392\u5217\u76d2\u5b50\u6a21\u578b<\/strong>\uff0c<strong><span class=\"has-inline-color has-vivid-red-color\">\u52a0\u5b8c\u6d6e\u52d5\u5f8c\u4f60\u80fd\u5920\u8b93\u76d2\u5b50\u6a21\u578b\u9032\u884c\u9760\u5de6\u6216\u662f\u9760\u53f3\u9032\u884c\u6392\u5217<\/span><\/strong>\uff0c\u8b1b\u7c21\u55ae\u9ede\u5c31\u662f\u80fd\u5920\u8b93\u76d2\u5b50\u6a21\u578b\u6c34\u5e73\u6392\u5217 ( X\u8ef8 ) \u4e26\u6392\u6392\u5728\u4e00\u8d77\u4e86\u3002<\/p>\n\n\n\n<ol><li><strong>\u812b\u96e2\u6a19\u6e96\u6d41\u7684\u666e\u901a\u63a7\u5236 ( \u6d6e\u8d77 )<\/strong><\/li><li><strong>\u79fb\u52d5\u5230\u4f60\u6307\u5b9a\u7684\u4f4d\u7f6e ( \u52d5\u4f5c )<\/strong><\/li><li><strong>\u7531\u65bc\u4e0a\u9762\u5169\u9ede\u7279\u6027\u5408\u8d77\u4f86\u6703\u7a31\u70ba\u6d6e\u52d5 ( \u812b\u6a19 )<\/strong><\/li><li><strong>\u6d6e\u52d5\u7684\u76d2\u5b50\u4e0d\u6703\u518d\u4fdd\u7559\u539f\u5148\u7684\u4f4d\u7f6e<\/strong><\/li><\/ol>\n\n\n\n<p><strong><span class=\"has-inline-color has-vivid-red-color\">\u5982\u679c\u4f60\u4e0d\u61c2\u4ec0\u9ebc\u662f\u812b\u6a19\uff0c\u5c31\u662f\u6307\u812b\u96e2\u6a19\u6e96\u6d41\u7684\u7e2e\u5beb<\/span><\/strong>\uff0c\u5404\u53d6\u958b\u982d\u6240\u4ee5\u624d\u53eb\u812b\u6a19\uff0c\u53cd\u6b63\u5c31\u662f\u6d6e\u52d5\u7684\u610f\u601d\uff0c\u5176\u4e2d\u7b2c 4 \u9ede\u6bd4\u8f03\u96e3\u7406\u89e3\u76d2\u5b50\u4e0d\u6703\u518d\u4fdd\u7559\u539f\u5148\u7684\u4f4d\u7f6e\uff0c\u4f60\u53ef\u80fd\u6703\u60f3\u70ba\u4ec0\u9ebc\u5462? \u8209\u500b\u4f8b\u5b50\u50cf\u4f60\u4eca\u5929\u8981\u642d\u706b\u8eca\u3001\u642d\u516c\u8eca\u90fd\u8981\u9032\u884c\u6392\u968a\u7684\uff0c\u4e0d\u662f\u5927\u5bb6\u90fd\u6703\u6392\u968a\u55ce? \u53ea\u6709\u4e00\u5217\u5f9e\u524d\u5230\u5f8c\u90a3\u9019\u500b\u4e0d\u662f\u4f3c\u66fe\u76f8\u8b58\u55ce? \u5c31\u662f\u7db2\u9801\u4e2d\u7684\u6a19\u6e96\u6d41\u963f!!!<\/p>\n\n\n\n<p>\u6c92\u932f\u5427! \u90a3\u6211\u5011\u518d\u4f86\u770b\u5537! \u4eca\u5929\u6392\u968a\u4e2d\u968a\u4f0d\u6709\u500b\u4eba\u7a81\u7136\u7372\u5f97\u80fd\u529b\uff0c\u9019\u80fd\u529b\u662f\u98c4\u5728\u7a7a\u4e2d\uff0c\u90a3\u7b2c\u4e8c\u500b\u6392\u968a\u7684\u4eba\u7372\u5f97\u80fd\u529b\u98c4\u5728\u7a7a\u4e2d\uff0c\u6b64\u6642\u4ed6\u4ee5\u524d\u7684\u4f4d\u7f6e\u4e26\u4e0d\u518d\u662f\u4ed6\u7684\u4e86\uff0c<strong>\u5f8c\u9762\u7684\u4eba\u6703\u5f80\u524d\u53bb\u66ff\u88dc\u4ed6\u7684\u4f4d\u7f6e<\/strong>\uff0c<strong><span class=\"has-inline-color has-vivid-red-color\">\u4f46\u662f\u6d6e\u5728\u7a7a\u4e2d\u7684\u4eba ( \u7a7a\u4e2d\u4eba ) \u6b64\u6642\u7d1a\u5225\u5df2\u7d93\u4e0d\u518d\u662f\u8ddf\u6392\u968a\u7684\u4eba ( \u5730\u9762\u4eba ) \u4e00\u6a23\u4e86<\/span><\/strong>\uff0c\u4e5f\u5c31\u662f\u8aaa\u4e00\u500b\u662f\u5728\u7a7a\u4e2d\u7684\u9818\u57df\u4e00\u500b\u662f\u5728\u5730\u4e0a\u7684\u9818\u57df\uff0c\u90a3\u5730\u4e0a\u9818\u57df\u7684\u4eba\u770b\u898b\u524d\u4e00\u4f4d\u98db\u751f\u4e86\u524d\u9762\u6709\u7a7a\u4f4d\u4e86\u7576\u7136\u6703\u53bb\u81ea\u52d5\u88dc\u4e0a\uff0c\u9019\u4f60\u6c92\u554f\u984c\u5427!<\/p>\n\n\n\n<p>\u5982\u679c\u4f60\u53bb\u601d\u8003\u98db\u8d77\u4f86\u7684\u4eba ( \u7a7a\u4e2d\u4eba ) \u548c\u5730\u4e0a\u7684\u4eba ( \u5730\u9762\u4eba ) \u6703\u6709\u4e00\u500b\u5f88\u6709\u8da3\u7684\u73fe\u8c61\uff0c\u5c31\u662f\u98db\u8d77\u4f86\u7684\u4eba\u5f80\u4e0b\u770b\u5730\u4e0b\u7684\u4eba\uff0c\u53ef\u4ee5\u770b\u898b\u525b\u88dc\u4e0a\u4f86\u7684\u5730\u9762\u4eba\u7684\u982d\uff0c\u4e5f\u5c31\u662f\u8aaa\u5730\u4e0b\u7684\u4eba\u5f80\u4e0a\u770b\u53ef\u4ee5\u770b\u898b\u525b\u525b\u98db\u751f\u7684\u4eba\u5728\u4ed6\u7684\u6b63\u4e0a\u65b9\u5537! \u5982\u679c\u9019\u908a\u4e0d\u592a\u4e86\u89e3\u5f8c\u9762\u6211\u5011\u6703\u4f86\u5beb\u5beb\u770b\u4ee3\u78bc\u4f60\u5c31\u80fd\u5920\u4e86\u89e3\u70ba\u4ec0\u9ebc\u4e86\u3002<\/p>\n\n\n\n<p>\u6211\u5011\u5148\u4f86\u5275\u5efa\u4e00\u500b\u5168\u65b0\u7684 HTML \u7d50\u69cb\u6846\u67b6\uff0c\u5728\u88e1\u9762\u65b0\u589e\u5169\u500b\u76d2\u5b50\u6a21\u578b\uff0c\u70ba\u4e86\u65b9\u4fbf\u89c0\u5bdf\u4e00\u500b\u6211\u5011 class \u9078\u64c7\u5668\u53d6\u540d\u70ba box01 \u53e6\u4e00\u500b class \u5c6c\u6027\u53d6\u540d\u70ba box02 \u5beb\u597d\u5f8c\u6211\u5011\u9032\u884c\u5b58\u6a94\uff0c\u4e26\u7528\u7db2\u9801\u958b\u555f\u4f60\u525b\u525b\u5beb\u597d\u7684 HTML \u7d50\u69cb\u4f60\u4e00\u5b9a\u770b\u4e0d\u898b\u6771\u897f\uff0c\u6240\u4ee5\u6211\u5011\u9700\u8981\u5728\u5beb\u500b CSS \u5c6c\u6027\uff0c\u9084\u77e5\u9053\u70ba\u4ec0\u9ebc\u770b\u4e0d\u898b\u76d2\u5b50\u6a21\u578b\u55ce? \u56e0\u70ba\u76d2\u5b50\u6a21\u578b\u672c\u8eab\u662f\u900f\u660e\u7684\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;body&gt;\n\t&lt;div class=\"box01\"&gt;\u6211\u662f\u76d2\u5b5001&lt;\/div&gt;\n\t&lt;div class=\"box02\"&gt;\u6211\u662f\u76d2\u5b5002&lt;\/div&gt;\n\n&lt;\/body&gt;\n<\/code><\/pre>\n\n\n\n<p>\u56e0\u70ba\u770b\u4e0d\u898b\u900f\u660e\u7684\u76d2\u5b50\uff0c\u6211\u5011\u9700\u8981\u6307\u5b9a class \u985e\u9078\u64c7\u5668 box01 \u548c box02 \u7d66\u5b9a\u76d2\u5b50\u6a21\u578b\u5bec\u5ea6\u8207\u9ad8\u5ea6\u4ee5\u53ca\u80cc\u666f\u984f\u8272\uff0cbox01 \u5bec\u5ea6\u503c\u8a2d\u5b9a 300px\u3001box01 \u9ad8\u5ea6\u503c\u8a2d\u5b9a 300px\u3001box01 \u80cc\u666f\u984f\u8272\u8a2d\u5b9a\u7d05\u8272\uff0cbox02 \u5bec\u5ea6\u503c\u8a2d\u5b9a 500px\u3001box02 \u9ad8\u5ea6\u503c\u8a2d\u5b9a 500px\u3001box02 \u80cc\u666f\u984f\u8272\u8a2d\u5b9a\u85cd\u8272\uff0c\u5b58\u6a94\u5f8c\u4f60\u6703\u770b\u898b\u5448\u73fe\u5728 HTML \u4e2d\u7684\u9019\u5169\u500b\u5448\u73fe\u7684\u65b9\u5f0f\u5c31\u662f\u6a19\u6e96\u6d41\uff0c\u56e0\u70ba\u6211\u5011\u9084\u6c92\u7d66\u9019\u5169\u500b\u76d2\u5b50 CSS \u6d6e\u52d5\u6548\u679c\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n\t.box01 {\n\t\twidth: 300px;\n\t\theight: 300px;\n\t\tbackground-color: red;\n}\n\t.box02 {\n\t\twidth: 500px;\n\t\theight: 500px;\n\t\tbackground-color: blue;\n}\n&lt;\/style&gt;\n<\/code><\/pre>\n\n\n\n<p>\u63a5\u4e0b\u4f86\u6211\u5011\u8981\u4f86\u8a66\u770b\u770b\u98db\u5728\u7a7a\u4e2d\u7684\u76d2\u5b50\u548c\u5730\u4e0a\u7684\u76d2\u5b50\u6703\u64e6\u51fa\u4ec0\u9ebc\u706b\u82b1\u4ee5\u53ca\u7a7a\u4e2d\u7684\u4e16\u754c\u548c\u5730\u9762\u7684\u4e16\u754c\u662f\u600e\u9ebc\u56de\u4e8b\u5462?! \u9019\u9ede\u4f60\u61c9\u8a72\u5f88\u597d\u5947\u5427! \u6211\u5011\u628a\u7b2c\u4e00\u500b\u76d2\u5b50 box01 \u52a0\u5165 CSS \u6d6e\u52d5\u5c6c\u6027\uff0c\u8b93\u9019\u500b\u76d2\u5b50\u6a21\u578b\u5411\u5de6\u6d6e\u52d5\uff0c\u800c\u53e6\u4e00\u500b\u76d2\u5b50\u6a21\u578b\u4e0d\u7d66\u4e88\u6d6e\u52d5\u6548\u679c\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n\t.box01 {\n\t\twidth: 300px;\n\t\theight: 300px;\n\t\tbackground-color: red;\n\t\tfloat: left;\n}\n\t.box02 {\n\t\twidth: 500px;\n\t\theight: 500px;\n\t\tbackground-color: blue;\n}\n&lt;\/style&gt;\n<\/code><\/pre>\n\n\n\n<p>\u7576\u4f60\u5b58\u6a94\u5f8c\u4f60\u5728\u56de\u5230\u7db2\u9801\u770b\u7684\u6642\u5019\u4f60\u6703\u767c\u73fe\u7b2c\u4e00\u500b\u76d2\u5b50\u6a21\u578b box01 \u4e00\u6a23\u662f\u5728\u539f\u672c\u7684\u4f4d\u7f6e\uff0c\u4f46\u662f\u4ed6\u662f\u98c4\u6d6e\u5728\u7a7a\u4e2d\u5537! \u800c\u7b2c\u4e8c\u500b\u76d2\u5b50\u6a21\u578b box02 \u56e0\u70ba\u770b\u898b\u524d\u9762\u90a3\u500b box01 \u76d2\u5b50\u6a21\u578b\u9032\u884c\u98db\u751f\u4e86\uff0c\u90a3\u5b83\u53ea\u597d\u5f80\u524d\u8d70\u53bb\u88dc\u5730\u9762\u7684\u7a7a\u4f4d\uff0c\u6240\u4ee5\u4f60\u770b\u898b\u7684\u7db2\u9801\u72c0\u614b\u662f box01 \u548c box02 \u662f\u758a\u5728\u4e00\u8d77\u7684\uff0c<strong><span class=\"has-inline-color has-vivid-red-color\">\u6211\u5011\u662f\u6545\u610f\u4f7f\u9019\u88e1\u5169\u500b\u76d2\u5b50\u6a21\u578b\u5bec\u5ea6\u8207\u9ad8\u5ea6\u4e0d\u540c<\/span><\/strong>\uff0c<strong><span class=\"has-inline-color has-vivid-red-color\">\u5982\u679c 2 \u500b\u76d2\u5b50\u6a21\u578b\u76f8\u540c\u5927\u5c0f\u758a\u5728\u4e00\u8d77\u4f60\u53ea\u6703\u770b\u898b\u6d6e\u5728\u7a7a\u4e2d\u7684\u90a3\u4e00\u500b<\/span><\/strong>\uff0c\u4e5f\u5c31\u662f\u8ce6\u4e88\u6d6e\u52d5\u90a3\u500b\u4e00\u500b box01\u3002<\/p>\n\n\n\n<p>\u5f9e\u9019\u6a23\u89c0\u5bdf\u4f60\u9084\u80fd\u767c\u73fe\u4e00\u4ef6\u4e8b\uff0c\u6703\u5c0d\u4f60\u5f80\u5f8c\u4f48\u5c40\u8996\u89d2\u6709\u4e00\u5b9a\u7a0b\u5ea6\u7684\u6539\u8b8a\uff0c\u9019\u8a71\u600e\u9ebc\u8aaa\u5462? \u56e0\u70ba\u6211\u5011\u770b\u5411\u7db2\u9801\u4e5f\u5c31\u662f\u76ef\u8457\u87a2\u5e55\uff0c\u7db2\u9801\u5c31\u50cf\u662f\u4e00\u500b\u4e16\u754c\u4e00\u6a23\u6211\u5011\u662f\u5f9e<strong>\u4e0a\u5f80\u4e0b\u770b<\/strong>\uff0c\u5c31\u5982\u540c\u4f60\u5750\u98db\u6a5f\u5f9e\u9ad8\u7a7a\u5f80\u4e0b\u770b\uff0c\u5982\u679c\u4f60\u6c92\u5750\u904e\u98db\u6a5f\u4f60\u60f3\u6210\u5f9e\u9ad8\u6a13\u5f80\u5916\u770b\u5411\u5730\u9762\u90a3\u500b\u8996\u89d2\uff0c\u5982\u679c\u5982\u679c\u4f60\u5728\u6c92\u60f3\u6cd5\u4f60\u60f3\u6210\u5c31\u662f<strong>\u4e0a\u5e1d\u8996\u89d2<\/strong>\u53bb\u89c0\u770b\u4e16\u754c\uff0c\u53ea\u8981\u5169\u4ef6\u6771\u897f\u5927\u5c0f\u51fa\u73fe\u5728\u4f60\u8996\u91ce\u90a3\u4f60\u770b\u898b\u7684\u6771\u897f\u6709\u53ef\u80fd\u4e0d\u53ea\u4e00\u500b\uff0c\u56e0\u70ba\u4ed6\u5011\u758a\u5728\u4e00\u8d77\u4e86!<\/p>\n\n\n\n<p>\u7562\u7adf\u7db2\u9801\u5c31\u662f\u5e73\u9762\u5448\u73fe\u7d66\u4f60\u770b\u4ee5\u53ca\u7d66\u700f\u89bd\u8005\u95b1\u8b80\uff0c\u53ea\u6709\u5728\u6211\u5011\u6709\u5b78\u7fd2\u7db2\u9801\u64b0\u5beb\u6280\u8853\u624d\u6703\u4e86\u89e3\u5176\u5be6\u7db2\u9801\u4e5f\u662f\u6709\u4e0a\u4e0b\u5c64\u95dc\u4fc2\u751a\u81f3\u662f\u80fd\u5920\u505a\u5230 3D \u7684\u6548\u679c\uff0c\u4e0d\u904e 3D \u90a3\u662f\u5f8c\u4f86 CSS3 \u4ee5\u5f8c\u624d\u65b0\u589e\u7684\u529f\u80fd\uff0c\u524d\u671f\u4f60\u5148\u5b78\u597d\u5e73\u9762\u7684\u8a2d\u8a08\u5c31\u5920\u7528\u4e86\u5537\u3002<\/p>\n\n\n\n<p>CSS \u6d6e\u52d5\u812b\u6a19\u8981\u6ce8\u610f\u54ea\u5e7e\u9ede:<\/p>\n\n\n\n<ul><li><strong>\u89c0\u770b\u7db2\u9801\u5448\u73fe\u51fa\u5e73\u9762\u6548\u679c\uff0c\u4f46\u5be6\u969b\u4e0a\u53ef\u80fd\u4e26\u4e0d<\/strong><\/li><li><strong>\u89c0\u770b\u7db2\u9801\u5c31\u662f\u4e0a\u5e1d\u8996\u89d2\uff0c\u6240\u4ee5\u6240\u6709\u7db2\u9801\u5143\u7d20\u624d\u90fd\u662f\u5e73\u9762<\/strong><\/li><li><strong>CSS \u53ef\u4ee5\u505a\u51fa 3D \u7acb\u9ad4\u6548\u679c\uff0c\u4f46\u521d\u5b78\u5148\u638c\u63e1\u5e73\u9762\u6280\u8853\u5373\u53ef<\/strong><\/li><li><strong>\u8981\u6ce8\u610f CSS \u6d6e\u52d5\u5c64\u7d1a\u5df2\u7d93\u8ddf\u4e00\u822c\u6a19\u6e96\u6d41\u4e0d\u540c\u4e86<\/strong><\/li><li><strong>CSS \u6d6e\u52d5\u8207\u4e00\u822c\u5143\u7d20\u9078\u64c7\u5668\uff0c\u4e92\u76f8\u91cd\u758a\u6b64\u6642\u4f60\u5728\u7db2\u9801\u53ea\u6703\u770b\u898b CSS \u6d6e\u52d5\u7684\u76d2\u5b50\u6a21\u578b<\/strong><\/li><li><strong>CSS \u6d6e\u52d5\u8207\u4e00\u822c\u5143\u7d20\u9078\u64c7\u5668\uff0c\u4e92\u76f8\u91cd\u758a\u4e00\u822c\u5143\u7d20\u9078\u64c7\u5668\u6c92\u6709\u6d88\u5931\uff0c\u53ea\u662f\u5728 CSS \u6d6e\u52d5\u4e0b\u9762<\/strong><\/li><\/ul>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"CSS_%E6%B5%AE%E5%8B%95%E7%89%B9%E6%80%A7_-_%E6%B5%AE%E5%8B%95%E5%85%83%E7%B4%A0%E4%B8%80%E8%A1%8C%E9%A1%AF%E7%A4%BA\"><\/span>CSS \u6d6e\u52d5\u7279\u6027 &#8211; \u6d6e\u52d5\u5143\u7d20\u4e00\u884c\u986f\u793a<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"575\" src=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u7279\u6027_\u6d6e\u52d5\u5143\u7d20\u4e00\u884c\u986f\u793a.jpg?resize=1024%2C575&#038;ssl=1\" alt=\"\" class=\"wp-image-1632\" srcset=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u7279\u6027_\u6d6e\u52d5\u5143\u7d20\u4e00\u884c\u986f\u793a.jpg?resize=1024%2C575&amp;ssl=1 1024w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u7279\u6027_\u6d6e\u52d5\u5143\u7d20\u4e00\u884c\u986f\u793a.jpg?resize=300%2C168&amp;ssl=1 300w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u7279\u6027_\u6d6e\u52d5\u5143\u7d20\u4e00\u884c\u986f\u793a.jpg?resize=768%2C431&amp;ssl=1 768w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u7279\u6027_\u6d6e\u52d5\u5143\u7d20\u4e00\u884c\u986f\u793a.jpg?resize=1536%2C863&amp;ssl=1 1536w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u7279\u6027_\u6d6e\u52d5\u5143\u7d20\u4e00\u884c\u986f\u793a.jpg?w=2003&amp;ssl=1 2003w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" title=\"\" data-recalc-dims=\"1\"><\/figure>\n\n\n\n<p>\u63a5\u4e0b\u4f86\uff0c\u4f86\u770b\u770b\u5982\u679c\u591a\u6578\u500b\u76d2\u5b50\u6a21\u578b\u90fd\u8a2d\u7f6e\u4e86 CSS \u6d6e\u52d5\u6703\u767c\u751f\u4ec0\u9ebc\u4e8b\u5462? \u4e5f\u5c31\u662f\u8aaa\u4eca\u5929\u6709 3 \u500b\u76d2\u5b50\u6a21\u578b\uff0c\u6211\u5011\u90fd\u7d66\u9019 3 \u500b\u76d2\u5b50\u6a21\u578b\u8a2d\u7f6e CSS \u6d6e\u52d5\u5c6c\u6027\uff0c<strong><span class=\"has-inline-color has-vivid-red-color\">\u5c6c\u6027\u503c\u90fd\u7d66\u5de6\u6d6e\u52d5\u90a3\u4f60\u731c\u731c\u770b\u6703\u767c\u751f\u4ec0\u9ebc\u4e8b\u5462? <\/span><\/strong>\u5728\u9019\u88e1\u4f60\u53ef\u4ee5\u505c\u4e0b\u4f86\u597d\u597d\u601d\u8003\u6703\u767c\u751f\u4ec0\u9ebc\u4e8b\u60c5\uff0c\u5b83\u5011\u6703\u4e00\u8d77\u9760\u5de6\u4e26\u758a\u5728\u4e00\u8d77\u55ce? \u9084\u662f\u6703\u4e26\u6392\u9760\u5de6\u986f\u793a\u5462?<\/p>\n\n\n\n<p><strong>\u7b54\u6848\u662f\u6703\u4e26\u6392\u9760\u5de6\u4e00\u500b\u4e00\u500b\u986f\u793a\u5728\u7db2\u9801\u4e0a<\/strong>\uff0c\u56e0\u70ba\u5927\u5bb6\u90fd\u5de6\u6d6e\u52d5\u4e86\u90a3\u6211\u5011\u524d\u9762\u4e0d\u662f\u8aaa\u6d6e\u52d5\u662f\u5728\u7a7a\u4e2d\uff0c\u4eca\u5929\u9019 3 \u500b\u90fd\u6d6e\u8d77\u4f86\u4e86\uff0c\u90a3\u52e2\u5fc5\u8981\u9075\u5b88\u7a7a\u4e2d\u7684\u898f\u5247\uff0c\u6240\u4ee5\u7b2c\u4e00\u500b\u6d6e\u7684\u6703\u5148\u9760\u5de6\u5074\u800c\u7b2c\u4e8c\u500b\u6703\u8cbc\u5728\u7b2c\u4e00\u500b\u5f8c\u9762\u7684\u908a\u7de3\u8655\uff0c\u4e4b\u5f8c\u7684\u6bcf\u4e00\u500b\u90fd\u6703\u9075\u5b88\u9019\u6a23\u7684\u898f\u5247\u53bb\u6392\u5217\uff0c\u4e5f\u5c31\u662f\u8aaa\u5728\u7a7a\u4e2d\u6392\u968a\u3002<\/p>\n\n\n\n<p>\u6211\u5011\u4f86\u52d5\u624b\u505a\u505a\u770b\u9019\u500b\u4f8b\u5b50\u5427! \u9996\u5148\u5275\u5efa\u4e00\u500b\u5168\u65b0\u7684 HTML \u7d50\u69cb\u9aa8\u67b6\uff0c\u5728\u88e1\u982d\u65b0\u589e 3 \u500b\u76d2\u5b50\u6a21\u578b\u6a19\u7c64\u4e26\u4f7f\u7528 class \u985e\u9078\u64c7\u5668\u7d66\u9019\u4e09\u500b\u53d6\u540d\u70ba one\u3001two\u3001three\uff0c\u5b8c\u6210\u5f8c\u5b58\u6a94\u4f60\u5230\u7db2\u9801\u770b\u662f\u6703\u986f\u793a\u900f\u660e\u7684\u76d2\u5b50\u6a21\u578b\uff0c\u4f60\u5b8c\u5168\u770b\u4e0d\u898b\u6548\u679c\uff0c\u9019\u662f\u5f88\u6b63\u5e38\u7684\u56e0\u70ba\u4f60\u9084\u6c92\u52a0\u5165 CSS \u5c6c\u6027\u5537!<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;body&gt;\n\t&lt;div class=\"one\"&gt;\u6211\u662f\u76d2\u5b5001&lt;\/div&gt;\n\t&lt;div class=\"two\"&gt;\u6211\u662f\u76d2\u5b5002&lt;\/div&gt;\n\t&lt;div class=\"three\"&gt;\u6211\u662f\u76d2\u5b5003&lt;\/div&gt;\n\n&lt;\/body&gt;\n<\/code><\/pre>\n\n\n\n<p>\u8b93\u76d2\u5b50\u6a21\u578b\u4e0d\u5728\u662f\u900f\u660e\u5427! \u63a5\u4e0b\u4f86\u6211\u5011\u8b93\u6bcf\u500b\u76d2\u5b50\u7684\u5bec\u5ea6\u90fd\u4e00\u6a23 200px \u800c\u7b2c\u4e00\u500b\u76d2\u5b50 one \u7684\u9ad8\u5ea6\u8a2d\u7f6e 200px\u3001\u7b2c\u4e8c\u500b\u76d2\u5b50\u6a21\u578b\u9ad8\u5ea6\u8a2d\u7f6e 500px\u3001\u7b2c\u4e09\u500b\u76d2\u5b50\u6a21\u578b\u9ad8\u5ea6\u8a2d\u7f6e 450px\uff0c\u80cc\u666f\u984f\u8272\u9806\u5e8f\u4f9d\u7167\u9806\u5e8f\u8a2d\u7f6e\u70ba\u7d05\u8272\u3001\u7da0\u8272\u3001\u85cd\u8272\uff0cCSS \u6d6e\u52d5\u6548\u679c\u6bcf\u4e00\u500b\u76d2\u5b50\u90fd\u52a0\u5165\u5de6\u6d6e\u52d5\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n\tdiv {\n\t\twidth: 200px;\n\t\tfloat: left;\n\n}\n\tdiv .one {\n\t\theight: 300px;\n\t\tbackground-color: red;\n\n}\n\tdiv .two {\n\t\theight: 500px;\n\t\tbackground-color: green;\n\n}\n\tdiv .three {\n\t\theight: 500px;\n\t\tbackground-color: blue;\n\n}\n&lt;\/style&gt;\n<\/code><\/pre>\n\n\n\n<p>\u5b8c\u6210 CSS \u5143\u7d20\u9078\u64c7\u5668\u7684\u6307\u5b9a\u5f8c\uff0c\u9032\u884c\u5b58\u6a94\u4f60\u6703\u767c\u73fe\u6574\u500b\u7db2\u9801\u4e0a\u7684\u76d2\u5b50\u6709\u984f\u8272\u3001\u5bec\u5ea6\u3001\u9ad8\u5ea6\uff0c\u6700\u91cd\u8981\u7684\u4e8b\u4f60\u6703\u770b\u898b\u6bcf\u500b\u76d2\u5b50\u90fd\u662f<strong><span class=\"has-inline-color has-vivid-red-color\">\u9760\u5de6\u5074\u5c0d\u9f4a\u7684\u4e26\u5728\u4e00\u884c\u986f\u793a<\/span><\/strong>\uff0c\u6211\u5011\u6545\u610f\u7528\u6bcf\u500b\u76d2\u5b50\u6a21\u578b\u9ad8\u5ea6\u90fd\u4e0d\u540c\uff0c\u4f46\u662f\u4e0d\u5f71\u97ff\u6c34\u5e73 ( X\u8ef8 ) \u65b9\u5411\u4e26\u6392\u6392\u5217\uff0c\u4f60\u9084\u6703\u770b\u898b\u9019\u4e9b\u76d2\u5b50\u6a21\u578b\u90fd\u662f\u8cbc\u8457\u5c0d\u65b9\u7684\u908a\u7de3\uff0c\u9084\u6709\u5927\u5bb6\u4e5f\u6703\u7dca\u7dca\u8cbc\u8457\u700f\u89bd\u5668\u6700\u4e0a\u7de3\u8655\uff0c\u5982\u679c\u4f60\u62c9\u52d5\u4f60\u7684\u700f\u89bd\u5668\u4f60\u6703\u770b\u898b\u9019\u4e9b\u76d2\u5b50\u6a21\u578b\u6703\u88ab\u64e0\u58d3\u5230\u53e6\u4e00\u884c\u53bb\uff0c\u4f46\u4e5f\u4e0d\u5f71\u97ff\u4e26\u6392\u7684\u6392\u5217\u986f\u793a\u6548\u679c\u3002<\/p>\n\n\n\n<ul><li><strong>\u591a\u500b CSS \u6d6e\u52d5\u5f8c\u7684\u76d2\u5b50\u6703\u4e26\u6392\u986f\u793a\u3001\u8cbc\u8457\u5c0d\u65b9\u908a\u7de3<\/strong><\/li><li><strong>\u591a\u500b CSS \u6d6e\u52d5\u5f8c\u7684\u76d2\u5b50\uff0c\u6700\u5927\u5171\u540c\u9ede\u90fd\u6703\u8cbc\u5728\u4e0a\u7de3\u8655\u908a\u7de3<\/strong><\/li><li><strong>\u6d6e\u52d5\u5143\u7d20\u4e92\u76f8\u8cbc\u5728\u4e00\u8d77\u4e0d\u6703\u6709\u7e2b\u9699<\/strong><\/li><li><strong>\u7236\u5143\u7d20\u76d2\u5b50\u5bec\u5ea6\u88dd\u4e0d\u4e0b\u6d6e\u52d5\u5f8c\u7684\u5b50\u7d1a\u76d2\u5b50\uff0c\u6b64\u6642\u5b50\u7d1a\u76d2\u5b50\u6703\u5448\u73fe\u4e0a\u4e0b\u5169\u6392\u72c0\u614b<\/strong><\/li><\/ul>\n\n\n\n<a class=\"btn_CTA\" href=\"https:\/\/learningnow.com.tw\/affiliate-marketing-make-money\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u9ede\u6211\u77ad\u89e3 \u5c0f\u9752\u5982\u4f55\u6bcf\u6708\u591a\u8cfa5\u4f4d\u6578\u53f0\u5e63<\/a>\n\n\n\n<p><\/p>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"CSS_%E6%B5%AE%E5%8B%95%E7%89%B9%E6%80%A7_-_%E6%B5%AE%E5%8B%95%E5%85%83%E7%B4%A0%E5%85%B7%E6%9C%89%E8%A1%8C%E5%85%A7%E5%A1%8A%E7%89%B9%E6%80%A7\"><\/span>CSS \u6d6e\u52d5\u7279\u6027 &#8211; \u6d6e\u52d5\u5143\u7d20\u5177\u6709\u884c\u5167\u584a\u7279\u6027<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"575\" src=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u7279\u6027_\u6d6e\u52d5\u5143\u7d20\u5177\u6709\u884c\u5167\u584a\u7279\u6027.jpg?resize=1024%2C575&#038;ssl=1\" alt=\"\" class=\"wp-image-1633\" srcset=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u7279\u6027_\u6d6e\u52d5\u5143\u7d20\u5177\u6709\u884c\u5167\u584a\u7279\u6027.jpg?resize=1024%2C575&amp;ssl=1 1024w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u7279\u6027_\u6d6e\u52d5\u5143\u7d20\u5177\u6709\u884c\u5167\u584a\u7279\u6027.jpg?resize=300%2C168&amp;ssl=1 300w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u7279\u6027_\u6d6e\u52d5\u5143\u7d20\u5177\u6709\u884c\u5167\u584a\u7279\u6027.jpg?resize=768%2C431&amp;ssl=1 768w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u7279\u6027_\u6d6e\u52d5\u5143\u7d20\u5177\u6709\u884c\u5167\u584a\u7279\u6027.jpg?resize=1536%2C863&amp;ssl=1 1536w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u7279\u6027_\u6d6e\u52d5\u5143\u7d20\u5177\u6709\u884c\u5167\u584a\u7279\u6027.jpg?w=2003&amp;ssl=1 2003w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" title=\"\" data-recalc-dims=\"1\"><\/figure>\n\n\n\n<p>\u5269\u4e0b\u6700\u5f8c\u4e00\u500b CSS \u6d6e\u52d5\u7279\u6027\uff0c<strong><span class=\"has-inline-color has-vivid-red-color\">\u662f\u6d6e\u52d5\u5143\u7d20\u5177\u6709\u884c\u5167\u584a\u5143\u7d20\u7684\u7279\u6027<\/span><\/strong>\uff0c\u4f46\u662f\u6211\u5011\u53ef\u4ee5\u4f7f\u7528 CSS \u6d6e\u52d5\u5143\u7d20\u7d66\u4e88\u4efb\u4f55\u7684\u5143\u7d20\u6a19\u7c64\u6d6e\u52d5\uff0c\u5c31\u50cf\u662f\u4f60\u7d66 &lt;p&gt; \u6bb5\u843d\u6a19\u7c64\u8ce6\u4e88 CSS \u6d6e\u52d5\u5f8c\uff0c\u539f\u672c &lt;p&gt; \u6bb5\u843d\u6a19\u7c64\u662f\u584a\u5143\u7d20\uff0c\u4f46\u662f\u4eca\u5929\u7d66\u5b83\u6d6e\u52d5\u5c6c\u6027\u5f8c\u5b83\u5c31\u518d\u4e5f\u4e0d\u662f\u584a\u5143\u7d20\u800c\u662f\u6703\u5177\u6709\u884c\u5167\u584a\u5143\u7d20\u7279\u6027\u5537! \u9019\u529f\u80fd\u6709\u9ede\u50cf\u662f\u8f49\u63db\u7684\u529f\u80fd\uff0c\u4f46\u662f\u4e0d\u592a\u4e00\u6a23\uff0c<strong><span class=\"has-inline-color has-vivid-red-color\">\u662f\u56e0\u70ba\u88ab\u8ce6\u4e88 CSS \u6d6e\u52d5\u5f8c\u5c31\u6703\u81ea\u52d5\u50b3\u63db\u6210\u884c\u5167\u584a\u5143\u7d20\u76f8\u4f3c\u7684\u7279\u6027\u5537!<\/span><\/strong><\/p>\n\n\n\n<p>\u6211\u5011\u8209\u500b\u4f8b\u5b50\u4f86\u770b\u770b\u5427! \u9996\u5148\u5275\u5efa\u4e00\u500b HTML \u7d50\u69cb\u9aa8\u67b6\uff0c\u5728\u88e1\u982d\u751f\u6210\u4e00\u500b &lt;span&gt; \u6a19\u7c64\uff0c\u4f60\u8a18\u5f97 &lt;span&gt; \u6a19\u7c64\u662f\u584a\u5143\u7d20\u9084\u662f\u884c\u5167\u5143\u7d20\u55ce? \u7b54\u6848\u662f\u884c\u5167\u5143\u7d20\uff0c\u6211\u60f3\u4f60\u61c9\u8a72\u9084\u8a18\u5f97\u884c\u5167\u5143\u7d20\u7684\u7279\u6027\u5427! \u5982\u679c\u5fd8\u8a18\u4e86\u53ef\u4ee5\u8907\u7fd2\u4e4b\u524d\u6211\u5beb\u7684\u884c\u5167\u5143\u7d20\u90a3\u7bc7\u6587\u7ae0\u5537! \u884c\u5167\u5143\u7d20\u7684\u7279\u6027\u662f\u4e00\u884c\u80fd\u986f\u793a\u591a\u500b\u884c\u5167\u5143\u7d20\uff0c\u4f46\u4e0d\u80fd\u8a2d\u7f6e\u5bec\u5ea6\u8207\u9ad8\u5ea6\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;body&gt;\n\t&lt;span&gt;Hello\u6211\u662f\u5c0f\u9752&lt;\/span&gt;\n\n&lt;\/body&gt;\n<\/code><\/pre>\n\n\n\n<p>\u63a5\u4e0b\u4f86\u6211\u5011\u8a2d\u7f6e CSS \u6a23\u5f0f\uff0c\u6211\u5011\u5c31\u662f\u4e0d\u7ba1 &lt;span&gt; \u884c\u5167\u5143\u7d20\u4e0d\u6703\u986f\u793a\u5bec\u5ea6\u8207\u9ad8\u5ea6\u4ee5\u53ca\u80cc\u666f\u984f\u8272\uff0c\u901a\u901a\u5beb CSS \u6a23\u5f0f\u9032\u53bb\uff0c\u5bec\u5ea6\u8a2d\u7f6e 200px\u3001\u9ad8\u5ea6\u8a2d\u7f6e 200px\u3001\u80cc\u666f\u984f\u8272\u8a2d\u7f6e\u7d05\u8272\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n\tspan {\n\t\twidth: 200px;\n\t\theight: 200px\n\t\tbackground-color: red;\n\n}\n&lt;\/style&gt;\n<\/code><\/pre>\n\n\n\n<p>\u5b58\u597d\u6a94\u6848\u5f8c\u4f60\u6253\u958b\u7db2\u9801\u5448\u73fe\u51fa\u4f86\u7684\u6771\u897f\u53ea\u6709\u6587\u5b57\uff0c\u9019\u6a23\u662f\u932f\u7684\u55ce? \u7576\u7136\u4e0d\u662f\u932f\u7684\u56e0\u70ba\u9019\u662f\u6b63\u5e38\u7684\uff0c\u884c\u5167\u5143\u7d20\u662f\u6c92\u8fa6\u6cd5\u9032\u884c CSS \u5c6c\u6027\u6539\u8b8a\uff0c\u90a3\u4eca\u5929\u6211\u5011\u5728\u52a0\u4e0a CSS \u6d6e\u52d5\u770b\u770b\uff0c\u770b\u6703\u767c\u751f\u4ec0\u9ebc\u4e8b\u5462?<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n\tspan {\n\t\twidth: 200px;\n\t\theight: 200px\n\t\tbackground-color: red;\n\t\tfloat: left;\n\n}\n&lt;\/style&gt;\n<\/code><\/pre>\n\n\n\n<p>\u4f60\u6703\u767c\u73fe\u795e\u5947\u7684\u4e8b\uff0c\u7adf\u7136\u53ea\u8981\u52a0\u5165 CSS \u6d6e\u52d5\u5c31\u80fd\u5920\u986f\u793a\u5bec\u5ea6\u3001\u9ad8\u5ea6\u3001\u80cc\u666f\u984f\u8272\u4e86! \u4f46\u9019\u6a23\u6c92\u4ec0\u9ebc\u80fd\u5920\u5c55\u73fe\u51fa\u6d6e\u52d5\u7279\u6027\u4e26\u5177\u6709\u884c\u5167\u584a\u5143\u7d20\u7684\u611f\u89ba\uff0c\u6c92\u95dc\u4fc2\u4f60\u5728 HTML \u7d50\u69cb\u9aa8\u67b6\u4e2d\u5728\u65b0\u589e\u4e00\u500b &lt;span&gt; \u6a19\u7c64\uff0c\u5b8c\u6210\u5f8c\u4f60\u5b58\u6a94\u5728\u770b\u770b\u73fe\u5728\u6709\u88e1\u500b &lt;span&gt; \u6a19\u7c64\u6703\u767c\u751f\u4ec0\u9ebc\u4e8b\u5462?<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;body&gt;\n\t&lt;span&gt;Hello\u6211\u662f\u5c0f\u9752&lt;\/span&gt;\n\t&lt;span&gt;Hello\u6211\u662f\u5c0f\u9752&lt;\/span&gt;\n\n&lt;\/body&gt;\n<\/code><\/pre>\n\n\n\n<p>\u4f60\u6703\u767c\u73fe\u5169\u500b &lt;span&gt; \u6a19\u7c64\u4e26\u6392\u9760\u5de6\u986f\u793a\uff0c\u6700\u5927\u7684\u7279\u8272\u662f\u9084\u80fd\u5920\u6539\u8b8a\u5bec\u5ea6\u3001\u9ad8\u5ea6\u3001\u80cc\u666f\u984f\u8272\uff0c\u90a3\u9019\u4e0d\u662f\u5c31\u662f\u539f\u672c\u884c\u5167\u584a\u5143\u7d20\u5177\u6709\u7684\u7279\u8272\u55ce?! \u6c92\u932f\u5537! \u7576\u7136\u4f60\u5beb\u500b\u584a\u5143\u7d20\u4e26\u5728\u584a\u5143\u7d20\u7684 CSS \u5c6c\u6027\u6a23\u5f0f\u4e2d\uff0c<strong><span class=\"has-inline-color has-vivid-red-color\">\u52a0\u5165 CSS \u6d6e\u52d5\u5c6c\u6027\u4e5f\u6703\u88ab\u8f49\u8b8a\u6210\u5177\u6709\u884c\u5167\u584a\u5143\u7d20\u7684\u7279\u6027<\/span><\/strong>\u3002<\/p>\n\n\n\n<p>\u9019\u908a\u6211\u5011\u7e3d\u7d50\u4e00\u4e0b\uff0c\u4e5f\u5c31\u662f\u8aaa\u5982\u679c\u884c\u5167\u5143\u7d20\u3001\u584a\u5143\u7d20<strong><span class=\"has-inline-color has-vivid-red-color\">\u6709\u4e86 CSS \u6d6e\u52d5\u5c6c\u6027\u7684\u6dfb\u52a0\uff0c\u4f60\u5c31\u4e0d\u9700\u8981\u4f7f\u7528\u8f49\u63db\u7684\u6a21\u5f0f\u4f86\u9032\u884c\u6539\u8b8a\u4e86<\/span><\/strong>\uff0c\u56e0\u70ba\u6d6e\u52d5\u5c31\u6703\u5177\u6709\u884c\u5167\u584a\u5143\u7d20\u7684\u7279\u6027\u4e00\u884c\u80fd\u986f\u793a\u591a\u500b\u9084\u53ef\u4ee5\u63a7\u5236 CSS \u5f88\u591a\u6a23\u5f0f\u7684\u8a2d\u5b9a<\/p>\n\n\n\n<ul><li><strong>\u584a\u5143\u7d20\u6c92\u8a2d\u7f6e\u5bec\u5ea6\u3001\u9ad8\u5ea6\uff0c\u6703\u9ed8\u8a8d\u548c\u7236\u7d1a\u4e00\u6a23\u5bec\u3001\u9ad8<\/strong><\/li><li><strong>\u5448\u4e0a\uff0c\u4f46\u662f\u5982\u679c\u52a0\u5165 CSS \u6d6e\u52d5\u5f8c\uff0c\u56e0\u70ba\u6c92\u8a2d\u7f6e\u5bec\u8207\u9ad8\uff0c\u5b83\u500b\u76d2\u5b50\u5927\u5c0f\u6703\u6839\u64da\u5167\u5bb9\u4f86\u6c7a\u5b9a<\/strong><\/li><li><strong>\u6d6e\u52d5\u5f8c\u7684\u76d2\u5b50\u6a21\u578b\u4e2d\u9593\u662f\u6c92\u6709\u7e2b\u9699\uff0c\u591a\u500b\u7684\u8a71\u662f\u5f7c\u6b64\u76f8\u9023<\/strong><\/li><li><strong>CSS \u6d6e\u52d5\u584a\u5143\u7d20\u6216\u662f\u884c\u5167\u5143\u7d20\u5f8c\uff0c\u6b64\u6642\u5b83\u5011\u90fd\u6703\u5177\u6709\u884c\u5167\u584a\u5143\u7d20\u7279\u6027<\/strong><\/li><\/ul>\n\n\n\n<h2><span class=\"ez-toc-section\" id=\"CSS_%E6%B5%AE%E5%8B%95%E6%9C%83%E7%B6%93%E5%B8%B8%E8%88%87%E6%A8%99%E6%BA%96%E6%B5%81%E7%88%B6%E7%B4%9A%E6%90%AD%E9%85%8D%E4%BD%BF%E7%94%A8%E7%82%BA%E4%BB%80%E9%BA%BC\"><\/span>CSS \u6d6e\u52d5\u6703\u7d93\u5e38\u8207\u6a19\u6e96\u6d41\u7236\u7d1a\u642d\u914d\u4f7f\u7528\u70ba\u4ec0\u9ebc?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"575\" src=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u6703\u7d93\u5e38\u8207\u6a19\u6e96\u6d41\u7236\u7d1a\u642d\u914d\u4f7f\u7528\u70ba\u4ec0\u9ebc.jpg?resize=1024%2C575&#038;ssl=1\" alt=\"\" class=\"wp-image-1634\" srcset=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u6703\u7d93\u5e38\u8207\u6a19\u6e96\u6d41\u7236\u7d1a\u642d\u914d\u4f7f\u7528\u70ba\u4ec0\u9ebc.jpg?resize=1024%2C575&amp;ssl=1 1024w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u6703\u7d93\u5e38\u8207\u6a19\u6e96\u6d41\u7236\u7d1a\u642d\u914d\u4f7f\u7528\u70ba\u4ec0\u9ebc.jpg?resize=300%2C168&amp;ssl=1 300w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u6703\u7d93\u5e38\u8207\u6a19\u6e96\u6d41\u7236\u7d1a\u642d\u914d\u4f7f\u7528\u70ba\u4ec0\u9ebc.jpg?resize=768%2C431&amp;ssl=1 768w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u6703\u7d93\u5e38\u8207\u6a19\u6e96\u6d41\u7236\u7d1a\u642d\u914d\u4f7f\u7528\u70ba\u4ec0\u9ebc.jpg?resize=1536%2C863&amp;ssl=1 1536w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u6703\u7d93\u5e38\u8207\u6a19\u6e96\u6d41\u7236\u7d1a\u642d\u914d\u4f7f\u7528\u70ba\u4ec0\u9ebc.jpg?w=2003&amp;ssl=1 2003w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" title=\"\" data-recalc-dims=\"1\"><\/figure>\n\n\n\n<p>\u7d93\u904e\u525b\u525b\u6211\u5011\u7684 CSS \u6d6e\u52d5\u7279\u9ede\u4ecb\u7d39\uff0c\u53ea\u8981\u7d66\u584a\u5143\u7d20\u6216\u662f\u884c\u5167\u5143\u7d20\u5de6\u6d6e\u52d5\u6216\u662f\u53f3\u6d6e\u52d5\u6548\u679c\u5c31\u6703\u8cbc\u5728\u700f\u89bd\u5668\u7684\u5de6\u908a\u7de3\u6216\u662f\u53f3\u908a\u7de3\uff0c\u4f46\u60f3\u60f3\u597d\u50cf\u4e0d\u592a\u5c0d\u52c1\uff0c\u662f<strong><span class=\"has-inline-color has-vivid-red-color\">\u56e0\u70ba\u6211\u5011\u6c92\u6709\u7d66\u76d2\u5b50\u6a21\u578b\u7236\u7d1a\u5143\u7d20<\/span><\/strong>\uff0c\u5982\u679c\u55ae\u55ae\u5beb\u76d2\u5b50\u6d6e\u52d5\u9760\u5de6\u6216\u662f\u9760\u53f3\u986f\u793a\u7684\u8a71\uff0c\u90a3\u76d2\u5b50\u6a21\u578b\u7684\u7236\u5143\u7d20\u662f\u8ab0\u5462? \u4f60\u53ef\u4ee5\u60f3\u60f3\u770b\uff0c\u7b54\u6848\u662f &lt;body&gt; \u6a19\u7c64\uff0c\u800c &lt;body&gt; \u6a19\u7c64\u5c31\u662f\u700f\u89bd\u5668\u7684\u6574\u9ad4\u5440!!!<\/p>\n\n\n\n<p>\u9019\u6a23\u53ef\u4e0d\u884c\uff0c\u6211\u5011\u5e0c\u671b\u76d2\u5b50\u6a21\u578b\u5c31\u662f\u53ef\u4ee5\u5728\u4e00\u500b\u9650\u5b9a\u7684\u76d2\u5b50\u7576\u4e2d\uff0c\u4ec0\u9ebc\u610f\u601d\u5462? \u610f\u601d\u662f\u8aaa\u6211\u5011\u7db2\u9801\u4f48\u5c40\u4e2d\u4e0d\u662f\u6703\u6709\u5f88\u591a\u76d2\u5b50\u6a21\u578b\u55ce? \u6bcf\u500b\u76d2\u5b50\u6a21\u578b\u53ef\u80fd\u5c55\u793a 3C \u7522\u54c1\u3001\u6709\u7684\u76d2\u5b50\u6a21\u578b\u662f\u5e0c\u671b\u80fd\u5920\u5c55\u793a\u540c\u985e\u578b\u7684\u7522\u54c1&#8230;\u7b49\uff0c\u90a3\u5982\u679c\u6c92\u6709\u5148\u898f\u5283\u597d\u4e00\u500b\u5927\u76d2\u5b50\u505a\u6b78\u985e\u6703\u5f88\u4e82\uff0c\u800c\u4e14\u76d2\u5b50\u6a21\u578b\u4e5f\u6703\u4e82\u8dd1\u3002<\/p>\n\n\n\n<p><strong><span class=\"has-inline-color has-vivid-red-color\">\u4e00\u822c\u4f5c\u6cd5\u6211\u5011\u6703\u5e0c\u671b\u628a\u4e00\u500b\u5927\u76d2\u5b50\u56fa\u5b9a\u5728\u9801\u9762\u4e2d\u9593<\/span><\/strong>\uff0c\u4e26\u4f7f\u7528 class \u985e\u9078\u64c7\u5668\u505a\u547d\u540d\uff0c\u800c\u5927\u76d2\u5b50\u88e1\u982d\u7684\u5c0f\u76d2\u5b50\u6703\u4f7f\u7528\u6d6e\u52d5\u4f86\u9032\u884c\u4e26\u6392\u5c55\u793a\uff0c\u90a3\u5927\u76d2\u5b50\u5c31\u662f\u5c0f\u76d2\u5b50\u7684\u7236\u89aa\u53c8\u7a31\u70ba<strong><span class=\"has-inline-color has-vivid-red-color\">\u7236\u7d1a\u5143\u7d20<\/span><\/strong>\uff0c\u90a3\u7576\u7136\u5b50\u76d2\u5b50\u662f<strong><span class=\"has-inline-color has-vivid-red-color\">\u5b50\u7d1a\u5143\u7d20<\/span><\/strong>\uff0c\u90a3\u6211\u5011\u518d\u56de\u982d\u770b\u7236\u7d1a\u5143\u7d20\u5c31\u662f\u6a19\u6e96\u6d41\uff0c\u56e0\u70ba\u6211\u5011\u5e0c\u671b\u4f7f\u7528\u8005\u53ef\u4ee5\u5f9e\u4e0a\u5230\u4e0b\u53bb\u700f\u89bd\uff0c\u90a3\u5b50\u76d2\u5b50\u662f\u4f7f\u7528\u6d6e\u52d5\u6240\u4ee5\u6703\u5f62\u6210\u4e26\u6392\u986f\u793a\u6548\u679c<\/p>\n\n\n\n<ul><li><strong>\u4f48\u5c40\u6642\u7236\u7d1a\u5143\u7d20\u76d2\u5b50\u901a\u5e38\u662f\u5e0c\u671b\u662f\u6a19\u6e96\u6d41\u6548\u679c\uff0c\u5f9e\u4e0a\u5230\u4e0b\u5c55\u793a\u76d2\u5b50\u6a21\u578b<\/strong><\/li><li><strong>\u4f48\u5c40\u6642\u5b50\u7d1a\u5143\u7d20\u76d2\u5b50\u901a\u5e38\u662f\u5e0c\u671b\u662f\u6d6e\u52d5\u6548\u679c\uff0c\u5f9e\u5de6\u5230\u53f3\u986f\u793a<\/strong><\/li><li><strong>\u8981\u76e1\u91cf\u907f\u514d\u4e0d\u8981\u4f7f\u7528\u6c92\u6709\u7236\u7d1a\u5143\u7d20\u7684\u5b50\u5143\u7d20\u76d2\u5b50\u6a21\u578b<\/strong><\/li><\/ul>\n\n\n\n<h2><span class=\"ez-toc-section\" id=\"CSS_%E6%B5%AE%E5%8B%95%E4%BD%88%E5%B1%80%E8%A9%B2%E6%B3%A8%E6%84%8F%E4%BB%80%E9%BA%BC\"><\/span>CSS \u6d6e\u52d5\u4f48\u5c40\u8a72\u6ce8\u610f\u4ec0\u9ebc?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"575\" src=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u4f48\u5c40\u8a72\u6ce8\u610f\u4ec0\u9ebc.jpg?resize=1024%2C575&#038;ssl=1\" alt=\"\" class=\"wp-image-1635\" srcset=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u4f48\u5c40\u8a72\u6ce8\u610f\u4ec0\u9ebc.jpg?resize=1024%2C575&amp;ssl=1 1024w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u4f48\u5c40\u8a72\u6ce8\u610f\u4ec0\u9ebc.jpg?resize=300%2C168&amp;ssl=1 300w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u4f48\u5c40\u8a72\u6ce8\u610f\u4ec0\u9ebc.jpg?resize=768%2C431&amp;ssl=1 768w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u4f48\u5c40\u8a72\u6ce8\u610f\u4ec0\u9ebc.jpg?resize=1536%2C863&amp;ssl=1 1536w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u4f48\u5c40\u8a72\u6ce8\u610f\u4ec0\u9ebc.jpg?w=2003&amp;ssl=1 2003w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" title=\"\" data-recalc-dims=\"1\"><\/figure>\n\n\n\n<p>CSS \u6559\u5b78\u4e2d\u57fa\u672c\u4e0a\u6211\u5011\u5df2\u7d93\u53ef\u4ee5\u8aaa\u662f\u53ef\u4ee5\u597d\u597d\u638c\u63e1\u4e86\uff0c\u4f46\u662f\u9084\u662f\u6709\u4e00\u4e9b\u4f60\u5728\u4f7f\u7528 CSS \u6d6e\u52d5\u4f48\u5c40\u6642\u4f60\u9700\u8981\u6ce8\u610f\u7684 2 \u500b\u9ede\uff0c\u6a19\u6e96\u6d41\u6703\u548c\u6d6e\u52d5\u4e00\u8d77\u642d\u914d\u4f7f\u7528\uff0c\u4e5f\u5c31\u662f\u8aaa\u5148\u7528\u6a19\u6e96\u6d41\u7684\u7236\u7d1a\u5143\u7d20\u76d2\u5b50\u6a21\u578b\u5f9e\u4e0a\u5230\u4e0b\u6392\u5217\u4f4d\u7f6e\uff0c\u4e4b\u5f8c\u5167\u90e8\u7684\u5b50\u5143\u7d20\u76d2\u5b50\u6a21\u578b\u5e0c\u671b\u4f7f\u7528\u6d6e\u52d5\u5f9e\u5de6\u5230\u53f3\u6392\u5217\u986f\u793a\u3002<\/p>\n\n\n\n<p>\u7b2c\u4e8c\u9ede\u662f\u8981\u6ce8\u610f<strong><span class=\"has-inline-color has-vivid-red-color\">\u5982\u679c\u8a72\u5143\u7d20\u6d6e\u52d5\u4e86\uff0c\u6ce8\u610f\u6709\u6c92\u6709\u5144\u5f1f\u5143\u7d20\uff0c\u5982\u679c\u6709\u5144\u5f1f\u5143\u7d20\u4e00\u822c\u4e5f\u6703\u8ddf\u8457\u53bb\u6d6e\u52d5<\/span><\/strong>\uff0c\u4e5f\u5c31\u662f\u8aaa\u5b83\u5011\u662f\u6709\u5171\u540c\u7684\u7236\u7d1a\u5143\u7d20\u76d2\u5b50\u6a21\u578b\uff0c\u800c\u9019\u4e9b\u5b69\u5b50\u5143\u7d20\u8981\u99ac\u4e00\u8d77\u6d6e\u52d5\u8981\u99ac\u4e0d\u8981\u6d6e\u52d5\uff0c\u5e7e\u4e4e\u6c92\u6709\u4eba\u8a2d\u8a08\u5b50\u5143\u7d20\u5176\u4e2d\u4e00\u500b\u6d6e\u52d5\u5269\u9918\u7684\u5b50\u76d2\u5b50\u4e0d\u6d6e\u52d5\uff0c\u5982\u679c\u4f60\u8a18\u4e0d\u8d77\u4f86\u6216\u662f\u6c92\u6709\u60f3\u6cd5\uff0c\u5c31\u662f\u9019\u4e9b\u5b50\u7d1a\u5143\u7d20\u5c31\u662f\u5144\u5f1f\uff0c\u5144\u5f1f\u8981\u99ac\u5171\u9032\u9000\u8981\u99ac\u5171\u540c\u800d\u5ee2\u3002<\/p>\n\n\n\n<p>\u8981\u6d6e\u4e00\u8d77\u6d6e\uff0c\u4f60\u53ef\u80fd\u8a8d\u70ba\u6709\u7684\u6d6e\u6709\u7684\u4e0d\u6d6e\u6703\u767c\u751f\u4ec0\u9ebc\u4e8b\uff0c\u4e0b\u5217\u6211\u5c55\u793a\u4e00\u4e0b\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b\u6709\u7684\u6d6e\u6709\u7684\u4e0d\u6d6e\u6703\u767c\u751f\u7684\u72c0\u6cc1\uff0c\u9996\u5148\u6211\u5011\u5275\u5efa\u4e00\u500b\u5168\u65b0\u7684 HTML \u7d50\u69cb\u9aa8\u67b6\u6a19\u7c64\uff0c\u5728\u88e1\u982d\u5beb 1 \u500b\u7236\u7d1a\u76d2\u5b50\u6a21\u578b\u6a19\u7c64\u8207 3 \u500b\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b\u6a19\u7c64\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;body&gt;\n\t&lt;div class=\"box\"&gt;\n\t\t&lt;div class=\"one\"&gt;one&lt;\/div&gt;\n\t\t&lt;div class=\"two\"&gt;two&lt;\/div&gt;\n\t\t&lt;div class=\"three\"&gt;three&lt;\/div&gt;\n\n\t&lt;\/div&gt;\n\n&lt;\/body&gt;\n<\/code><\/pre>\n\n\n\n<p>\u5b8c\u6210 HTML \u7d50\u69cb\u5f8c\u4f60\u9032\u884c\u5b58\u6a94\uff0c\u4f60\u4e00\u6a23\u4e5f\u662f\u5728\u7db2\u9801\u4e0a\u770b\u4e0d\u898b\u7684\u56e0\u70ba\u662f\u900f\u660e\u7684\u76d2\u5b50\uff0c\u9019\u6642\u5019\u5c31\u52e2\u5fc5\u9700\u8981\u7d66 CSS \u5c6c\u6027\u62c9! \u7236\u7d1a\u5143\u7d20\u76d2\u5b50\u6a21\u578b\u7d66\u5927\u4e00\u9ede\u5bec\u5ea6\u8a2d\u7f6e 1000px\u3001\u9ad8\u5ea6\u8a2d\u7f6e 1000px\u3001\u80cc\u666f\u984f\u8272\u8a2d\u7f6e\u7d05\u8272\uff0c\u800c\u5b50\u7d1a\u76d2\u5b50 class \u70ba one \u7684\u5bec\u5ea6\u8a2d\u7f6e 200px\u3001\u9ad8\u5ea6\u8a2d\u7f6e 200px\u3001\u80cc\u666f\u984f\u8272\u8a2d\u7f6e\u7da0\u8272\uff0c\u5b50\u7d1a\u76d2\u5b50 class \u70ba two \u7684\u5bec\u5ea6\u8a2d\u7f6e 300px\u3001\u9ad8\u5ea6\u8a2d\u7f6e 300px\u3001\u80cc\u666f\u984f\u8272\u8a2d\u7f6e\u85cd\u8272\uff0c\u5b50\u7d1a\u76d2\u5b50 class \u70ba three \u7684\u5bec\u5ea6\u8a2d\u7f6e 400px\u3001\u9ad8\u5ea6\u8a2d\u7f6e 400px\u3001\u80cc\u666f\u984f\u8272\u8a2d\u7f6e\u7d2b\u8272\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n\t.box {\n\t\twidth: 1000px;\n\t\theight: 1000px;\n\t\tbackground-color: red;\n}\n\t .one {\n\t\theight: 200px;\n\t\theight: 200px;\n\t\tbackground-color: green;\n\n}\n\t .two {\n\t\theight: 300px;\n\t\theight: 300px;\n\t\tbackground-color: blue;\n\n}\n\t .three {\n\t\theight: 400px;\n\t\theight: 400px;\n\t\tbackground-color: purple;\n\n}\n&lt;\/style&gt;\n<\/code><\/pre>\n\n\n\n<p>\u5b58\u6a94\u5f8c\u4f60\u6703\u5728\u7db2\u9801\u4e2d\u770b\u898b\u4e00\u5806\u76d2\u5b50\u6a21\u578b\u90fd\u662f<strong>\u6a19\u6e96\u6d41\u986f\u793a<\/strong>\uff0c\u4f46\u90a3\u4e0d\u662f\u6211\u5011\u60f3\u8981\u7684\uff0c\u6211\u5011\u9019\u6b21\u662f\u60f3\u8981\u77e5\u9053\u4e00\u90e8\u5206\u4e0d\u6d6e\u52d5\u770b\u6703\u6709\u4ec0\u9ebc\u6548\u679c\uff0c\u6240\u4ee5\u6211\u5011\u7d66 class \u540d\u70ba two \u548c three \u7684\u5de6\u6d6e\u52d5\u5176\u4ed6\u76d2\u5b50\u6a21\u578b\u90fd\u4e0d\u6d6e\u52d5\u6703\u767c\u751f\u4ec0\u9ebc\u4e8b\u5462?<\/p>\n\n\n\n<ul><li><strong>class \u70ba two \u7684\u6703\u6d6e\u5728 one \u7684\u6b63\u4e0a\u9762\uff0c\u800c three \u6703\u6392\u5728 one \u7684\u908a\u7de3\u4e0b\u65b9\u55ce?<\/strong><\/li><li><strong>class \u70ba two \u7684\u6703\u6d6e\u5728 one \u7684\u908a\u7de3\u4e0b\u65b9\uff0c\u800c three \u6703\u5728 two \u7684\u6b63\u4e0b\u65b9\u55ce?<\/strong><\/li><\/ul>\n\n\n\n<p>\u4f60\u8a8d\u70ba\u662f\u54ea\u4e00\u500b\u5462? \u9084\u662f\u9664\u4e86\u9019\u5169\u500b\u9078\u9805\u4f60\u6709\u66f4\u597d\u7684\u7b54\u6848\u5462? \u9019\u662f\u4e00\u500b\u601d\u8003\u984c\u6211\u6703\u5efa\u8b70\u4f60\u505c\u4e0b\u4f86\u597d\u597d\u60f3\u60f3\u770b\uff0c\u4ee5\u524d\u5b78\u7fd2\u5230\u7684\u77e5\u8b58\u5168\u90e8\u62ff\u51fa\u4f86\u61c9\u7528\uff0c\u7b54\u6848\u662f\u7b2c\u4e8c\u500b\u624d\u662f\u6b63\u78ba\u7684\u7b54\u6848\uff0c\u4f60\u53ef\u80fd\u6703\u8aaa\u70ba\u4ec0\u9ebc\u5440? \u5176\u5be6\u5f88\u7c21\u55ae\uff0c\u7b2c\u4e00\u500b one \u76d2\u5b50\u6a21\u578b\u9084\u662f\u6a19\u6e96\u6d41\u4e26\u6703\u7368\u4f54\u4e00\u884c\u3001two \u76d2\u5b50\u6a21\u578b\u5df2\u7d93\u6d6e\u8d77\u4f86\u4e86\u3001three \u4e5f\u662f\u6a19\u6e96\u6d41\u986f\u793a\uff0c\u4f46\u662f\u662f\u5728\u5730\u4e0b\u4e16\u754c\u524d\u9762\u90a3\u4e00\u500b two \u5b50\u6a19\u7c64\u5df2\u7d93\u98db\u751f\u4e86\uff0c\u6240\u4ee5\u6703\u5f80\u524d\u66ff\u88dc\u3002<\/p>\n\n\n\n<ul><li><strong>\u4e26\u4e0d\u662f\u6240\u6709\u6d6e\u52d5\u90fd\u6703\u58d3\u4f4f\u6a19\u6e96\u6d41<\/strong><\/li><li><strong><span class=\"has-inline-color has-vivid-red-color\">\u6d6e\u52d5\u53ea\u6703\u58d3\u4f4f\u5f8c\u9762\u4f86\u7684\u6a19\u6e96\u6d41<\/span>\uff0c\u5982\u679c\u6d6e\u52d5\u524d\u9762\u662f\u6a19\u6e96\u6d41\u53ea\u6703\u8cbc\u5728\u5b83\u7684\u4e0b\u7de3\u8655<\/strong><\/li><li><strong>\u6a19\u6e96\u6d41\u5728\u6d6e\u52d5\u524d\u9762\u6642\uff0c\u6a19\u6e96\u6d41\u6703\u7368\u4f54\u4e00\u884c\u4e0d\u8b93\u6d6e\u52d5\u8fd1\u4f86\u5b83\u7684\u4e0a\u7a7a<\/strong><\/li><\/ul>\n\n\n\n<p>\u90a3\u5728\u554f\u4f60\u5982\u679c\u5b50\u76d2\u5b50 one \u6d6e\u52d5\u3001two \u6a19\u6e96\u6d41\u3001three \u6d6e\u52d5\u6703\u767c\u751f\u4ec0\u9ebc\u4e8b\u5462? \u53ef\u4ee5\u958b\u59cb\u82b1\u500b\u6642\u9593\u4f5c\u7b54\uff0c\u7b54\u6848\u662f two \u6a19\u6e96\u6d41\u53bb one \u6d6e\u52d5\u6b63\u4e0b\u65b9\uff0c\u800c three \u6d6e\u52d5\u6703\u5230 two \u6a19\u6e96\u6d41\u6b63\u4e0b\u65b9\uff0c\u4e0d\u77e5\u9053\u4f60\u6709\u6c92\u6709\u832b\u6389\u5462? \u54c8\u54c8\u5e0c\u671b\u4f60\u6c92\u6709!<\/p>\n\n\n\n<p>\u9084\u662f\u628a\u63e1\u539f\u5247<strong><span class=\"has-inline-color has-vivid-red-color\">\u6d6e\u52d5\u7684\u524d\u65b9\u6709\u4eba\u5148\u5361\u4f4d\u4e5f\u5c31\u662f\u6a19\u6e96\u6d41\u5148\u5230\uff0c\u5b83\u5c31\u6703\u7981\u6b62\u5225\u4eba\u9032\u5165\u4ed6\u5011\u9818\u7a7a<\/span><\/strong>\uff0c\u56e0\u70ba\u4ed6\u5011\u7368\u4f54\u4e00\u884c\u7a7a\u548c\u5730\u3001\u90a3\u6d6e\u52d5\u7684\u5c31\u662f\u7a7a\u4e2d\u6d3e\u7684\u5c0d\u5730\u9762\u6c92\u8208\u8da3\u4e86\uff0c\u4e26\u6703\u9858\u610f\u628a\u5730\u9762\u8b93\u7d66\u8caa\u5fc3\u7684\u5730\u9762\u4eba ( \u6a19\u6e96\u6d41 ) \u6240\u4ee5\u5b83\u5011\u624d\u6703\u5f80\u524d\u66ff\u88dc\uff0c\u4f46\u662f\u5b83\u5011\u9032\u5230\u6d6e\u52d5 ( \u7a7a\u4e2d\u4eba ) \u5730\u76e4\u52e2\u529b\u5c31\u4e0d\u6703\u6436\u7a7a\u4e2d\u4eba\u7684\u9818\u7a7a\u3002<\/p>\n\n\n\n<p>\u53cd\u6b63\u4f60\u628a\u5730\u9762\u4eba ( \u6a19\u6e96\u6d41 ) \u60f3\u6210\u5f88\u8caa\u5fc3\u4e00\u6d3e\u5c31\u5c0d\u4e86\uff0c\u53ea\u8981\u5730\u9762\u4eba\u5148\u5230\u7684\u7a7a\u4e2d\u548c\u5730\u9762\u5c31\u662f\u90fd\u8981\u5168\u5305\uff0c\u5982\u679c\u7576\u4e0b\u7a7a\u4e2d\u4eba ( \u6d6e\u52d5 ) \u5df2\u7d93\u5148\u5728\u7684\u5730\u76e4\uff0c\u5f8c\u4f86\u624d\u4f86\u5230\u7684\u5730\u9762\u4eba ( \u6a19\u6e96\u6d41 ) \u6703\u53bb\u4f54\u9818\u7684\u7a7a\u4e2d\u4eba ( \u6d6e\u52d5 ) \u9678\u5730\u5730\u76e4\uff0c<strong><span class=\"has-inline-color has-vivid-red-color\">\u7a7a\u4e2d\u4eba ( \u6d6e\u52d5 ) \u53ef\u4ee5\u5305\u5bb9\u5730\u9762\u4eba ( \u6a19\u6e96\u6d41 ) \u53ef\u4ee5\u548c\u5e73\u5171\u8655<\/span><\/strong>\uff0c\u90a3\u5982\u679c\u72c0\u6cc1\u76f8\u53cd\u524d\u8005\u662f\u5730\u9762\u4eba ( \u6a19\u6e96\u6d41 ) \u5f8c\u4f86\u8005\u7684\u7a7a\u4e2d\u4eba ( \u6d6e\u52d5 ) \u77e5\u9053\u524d\u9762\u662f\u5730\u9762\u4eba ( \u6a19\u6e96\u6d41 ) \u4e5f\u4e0d\u6703\u8ddf\u5b83\u5011\u6436\u5730\u76e4\u6703\u81ea\u5df1\u5728\u5b83\u5011\u4e0b\u7de3\u8655\u767c\u5c55\u52e2\u529b\uff0c\u4f60\u4ee5\u9019\u6a23\u53bb\u60f3\u6703\u6bd4\u8f03\u597d\u61c2\u8ab0\u5148\u8ab0\u5f8c\u7684\u6982\u5ff5\u5537!<\/p>\n\n\n\n<ul><li><strong><span class=\"has-inline-color has-vivid-red-color\">\u5148\u5230\u7684\u5730\u9762\u4eba<\/span> ( \u6a19\u6e96\u6d41 ) \u4e0d\u6703\u8b93\u7a7a\u4e2d\u4eba ( \u6d6e\u52d5 ) \u9032\u4f86\u4ed6\u5011\u9818\u57df<\/strong><\/li><li><strong><span class=\"has-inline-color has-vivid-red-color\">\u5148\u5230\u7684\u7a7a\u4e2d\u4eba<\/span> ( \u6d6e\u52d5 ) \u6703\u8b93\u9678\u5730\u7d66\u5730\u9762\u4eba ( \u6a19\u6e96\u6d41 ) \u548c\u5e73\u5171\u8655<\/strong><\/li><\/ul>\n\n\n\n<p>CSS \u6d6e\u52d5\u4f60\u9700\u8981\u6ce8\u610f\u7684\u5169\u500b\u91cd\u9ede<\/p>\n\n\n\n<ul><li><strong>CSS \u6d6e\u52d5\u548c\u6a19\u6e96\u6d41\u7684\u7236\u76d2\u5b50\u6703\u642d\u914d\u4f7f\u7528<\/strong><\/li><li><strong>\u4e00\u500b\u5144\u5f1f\u5143\u7d20\u6d6e\u52d5\u5f8c\u5176\u4ed6\u5144\u5f1f\u4e5f\u8981\u6d6e\u52d5<\/strong><\/li><\/ul>\n\n\n\n<a class=\"btn_CTA\" href=\"https:\/\/learningnow.com.tw\/affiliate-marketing-make-money\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u9ede\u6211\u77ad\u89e3 \u5c0f\u9752\u5982\u4f55\u6bcf\u6708\u591a\u8cfa5\u4f4d\u6578\u53f0\u5e63<\/a>\n\n\n\n<p><\/p>\n\n\n\n<h2><span class=\"ez-toc-section\" id=\"CSS_%E6%B5%AE%E5%8B%95%E5%90%84%E9%A1%9E%E5%95%8F%E9%A1%8C\"><\/span>CSS \u6d6e\u52d5\u5404\u985e\u554f\u984c<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"575\" src=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u5404\u985e\u554f\u984c.jpg?resize=1024%2C575&#038;ssl=1\" alt=\"\" class=\"wp-image-1636\" srcset=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u5404\u985e\u554f\u984c.jpg?resize=1024%2C575&amp;ssl=1 1024w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u5404\u985e\u554f\u984c.jpg?resize=300%2C168&amp;ssl=1 300w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u5404\u985e\u554f\u984c.jpg?resize=768%2C431&amp;ssl=1 768w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u5404\u985e\u554f\u984c.jpg?resize=1536%2C863&amp;ssl=1 1536w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u5404\u985e\u554f\u984c.jpg?w=2003&amp;ssl=1 2003w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" title=\"\" data-recalc-dims=\"1\"><\/figure>\n\n\n\n<p>\u57fa\u672c\u4e0a CSS \u6559\u5b78\u4e2d\u7684\u6d6e\u52d5\u4f60\u5df2\u7d93\u5b78\u5b8c\u4e86\uff0c\u63a5\u4e0b\u4f86\u6211\u5011\u9700\u8981\u4f86<strong><span class=\"has-inline-color has-vivid-red-color\">\u60f3\u60f3\u5be6\u969b\u958b\u767c\u4e2d\u4f60\u6703\u9047\u5230\u7684\u554f\u984c<\/span><\/strong>\uff0c\u6309\u7167\u9053\u7406 CSS \u6d6e\u52d5\u5143\u7d20\u76d2\u5b50\u6a21\u578b\u6a19\u7c64\u90fd\u6703\u6709\u4e00\u500b\u6a19\u6e96\u6d41\u7236\u7d1a\u5143\u7d20\u76d2\u5b50\u6a21\u578b\u6a19\u7c64\uff0c\u4e00\u8d77\u642d\u914d\u4f7f\u7528\u5f88\u5c11\u6709\u4eba\u62c6\u958b\u4f86\u4f7f\u7528\u5c24\u5176\u662f\u55ae\u7368\u4f7f\u76d2\u5b50\u6d6e\u52d5\uff0c\u9019\u4f60\u6c92\u554f\u984c\u5427! \u9664\u975e\u4f60\u6709\u4ec0\u9ebc\u7279\u6b8a\u7684\u9700\u6c42\u6216\u662f\u4f60\u975e\u8981\u9019\u500b\u505a\u4e0d\u53ef\uff0c\u4e0d\u7136\u4f60\u4e00\u5b9a\u4e0d\u53ef\u80fd\u5be6\u73fe CSS \u6d6e\u52d5\u6548\u679c\u4e26\u6392\u986f\u793a\uff0c\u6c92\u6709\u4f7f\u7528\u7236\u7d1a\u5143\u7d20\u53bb\u52a0\u4ee5\u9650\u5236\u5728\u76d2\u5b50\u6a21\u578b\u5167\u76d2\u5b50\u5c31\u662f\u6703\u4e82\u8dd1\uff0cOK! \u7236\u7d1a\u5143\u7d20\u9084\u6709\u4e00\u500b\u7279\u9ede! \u6211\u5011\u90fd\u80fd\u5920\u7d66\u9ad8\u5ea6\u8a02\u503c!<\/p>\n\n\n\n<p>\u4f60\u53ef\u80fd\u60f3\u8aaa\u9ad8\u5ea6\u6c92\u4ec0\u9ebc\u5427! \u5c31\u662f\u76d2\u5b50\u7684\u5bec\u5ea6\u8207\u9ad8\u5ea6\uff0c\u8a2d\u8a08\u7684\u6642\u5019\u5bec\u5ea6\u7d66\u8a02\u4e00\u500b\u503c\u3001\u90a3\u9ad8\u5ea6\u4e0d\u662f\u4e5f\u662f\u55ce? \u4f60\u9019\u6a23\u60f3\u6c92\u932f!<strong><span class=\"has-inline-color has-vivid-red-color\"> \u9019\u662f\u4e00\u7a2e\u56fa\u5b9a\u5beb\u6b7b\u7684\u9ad8\u5ea6<\/span><\/strong>\uff0c\u4e00\u822c\u700f\u89bd\u8005\u770b\u898b\u4f60\u9019\u500b\u76d2\u5b50\u6a21\u578b\u5c31\u662f\u5f9e\u4e0a\u81f3\u4e0b\u53bb\u89c0\u770b ( \u6ed1\u9f20\u6efe\u8f2a )\uff0c\u5bec\u5ea6\u4f7f\u7528 CSS \u6d6e\u52d5\u4e26\u6392\u986f\u793a 5 \u500b\uff0c\u90a3\u9ad8\u5ea6\u5047\u8a2d\u8a2d\u7f6e 500px \u80fd\u585e\u4e0b\uff0c\u4e0a\u5230\u4e0b\u7684\u76d2\u5b50\u4e5f\u662f\u4e94\u500b\uff0c\u9019\u5834\u666f\u662f\u4f60\u56fa\u5b9a\u5beb\u6b7b\u65b9\u5f0f\u662f\u53ef\u4ee5\u7684!<\/p>\n\n\n\n<p><strong><span class=\"has-inline-color has-vivid-red-color\">\u4f46\u662f! \u4f46\u662f! \u9084\u6709\u4e00\u7a2e\u8a2d\u8a08\u601d\u8003\uff0c\u5982\u679c\u6211\u8981\u5beb\u7011\u5e03\u6d41\u600e\u9ebc\u8fa6?<\/span><\/strong> \u6211\u9084\u80fd\u628a\u7236\u7d1a\u5143\u7d20\u76d2\u5b50\u6a21\u578b\u6a19\u7c64\u5beb\u6b7b\u55ce? \u90a3\u53ef\u5c31\u4e0d\u884c\u56c9! \u5982\u679c\u5beb\u6b7b\u9ad8\u5ea6\u5c31\u4e0d\u662f\u7011\u5e03\u6d41\u4e86\uff0c\u5047\u8a2d\u4f60\u4e0d\u77e5\u9053\u4ec0\u9ebc\u662f\u7011\u5e03\u6d41\u4f48\u5c40\u8a2d\u8a08\uff0c\u5176\u5be6\u4f60\u662f\u66fe\u7d93\u770b\u904e\u4e26\u4f7f\u7528\u904e\u7684\u5537! \u5c31\u662f\u5f9e\u4e00\u500b\u982d\u90e8\u505a\u8d77\u59cb\u9ede\uff0c\u4e00\u76f4\u5f80\u4e0b\u62c9\u4e00\u76f4\u62c9\u4f60\u662f\u62c9\u4e0d\u5230\u5e95\u90e8\u7684\uff0cFacebook \u7684\u8a2d\u8a08\u9084\u6709 Pinterest \u5c31\u90fd\u662f\u4f7f\u7528\u7011\u5e03\u6d41\u8b93\u4f60\u4e00\u76f4\u62c9\u4e0d\u5230\u5e95\u90e8\u3002<\/p>\n\n\n\n<p><strong><span class=\"has-inline-color has-vivid-red-color\">\u90a3\u6c92\u6709\u5e95\u90e8\u5c31\u662f\u95dc\u9375<\/span><\/strong>\uff0c\u90a3\u5c31\u662f\u7236\u7d1a\u5143\u7d20\u76d2\u5b50\u6a21\u578b\u6a19\u7c64\u6c92\u6709\u9ad8\u5ea6\u5440! \u662f\u4e0d\u662f\u5462?! \u6240\u4ee5\u5c31\u4e0d\u7528\u8a2d\u7f6e\u9ad8\u5ea6\u5c31\u53ef\u4ee5\u505a\u5230\u4e86\u55ce? \u9084\u662f\u7528\u4ec0\u9ebc\u7279\u6b8a\u65b9\u6cd5\u80fd\u505a\u5230\u5462? \u9019\u908a\u5148\u4e0d\u544a\u8a34\u4f60\u7b54\u6848\u8b93\u4f60\u597d\u597d\u601d\u8003\u9019\u554f\u984c\uff0c\u6211\u5728\u5047\u8a2d\u4e00\u500b\u5834\u666f\uff0c\u50cf\u662f\u6709\u4e9b<strong><span class=\"has-inline-color has-vivid-red-color\">\u65b0\u805e\u4ed6\u5011\u6bcf\u7bc7\u5831\u5c0e\u6709\u4e00\u500b\u5340\u584a\u662f\u9700\u8981\u5c55\u793a\u65b0\u805e\u76d2\u5b50\u6a21\u578b<\/span><\/strong>\uff0c\u4e5f\u5c31\u662f\u7236\u7d1a\u5143\u7d20\u76d2\u5b50\u6a21\u578b\uff0c\u9019\u500b\u7236\u7d1a\u5143\u7d20\u6703\u56e0\u70ba\u5831\u5c0e\u7684\u7bc7\u5e45\u6709\u9577\u6709\u77ed\uff0c\u90a3\u7236\u7d1a\u76d2\u5b50\u7684\u9ad8\u5ea6\u662f\u4e0d\u662f\u4e5f\u662f\u4e0d\u9700\u8981\u8a2d\u7f6e\u5462?!<\/p>\n\n\n\n<p>\u4ee5\u4e0a\u6211\u8209\u4f8b\u7684\u5169\u500b\u5728\u771f\u5be6\u4f8b\u5b50\uff0c\u4f60\u5728\u751f\u6d3b\u5834\u666f\u4e00\u5b9a\u78b0\u904e\uff0c\u73fe\u5728\u4f60\u4e5f\u6709\u6240\u611f\u89f8\u5230\u5e95\u662f\u600e\u9ebc\u505a\u7684\u5462? \u7576\u7136\u4f60\u4e5f\u53ef\u4ee5\u6839\u64da\u6bcf\u7bc7\u5831\u5c0e\u7684\u9577\u5ea6\u53bb\u8a2d\u7f6e\u4e00\u500b\u56fa\u5b9a\u7684\u9577\u5ea6\uff0c\u4f46\u662f\u4f60\u53bb\u70ba\u6bcf\u7bc7\u5831\u5c0e\u9032\u884c\u4eba\u5de5\u8a2d\u7f6e\u7236\u7d1a\u76d2\u5b50\u9ad8\u5ea6\u662f\u6709\u9ede\u7d2f\u4eba\u7684\uff0c\u4e00\u5169\u7bc7\u9084\u597d\u90a3\u4e0a\u842c\u7bc7\u5462? \u9084\u9700\u8003\u616e\u5beb\u6587\u7ae0\u7684\u8a18\u8005\u9084\u8981\u6703 CSS \u8a9e\u6cd5\uff0c\u5be6\u5728\u662f\u4e0d\u53cb\u5584\uff0c\u96d6\u7136\u9019\u65b9\u6cd5\u662f\u53ef\u884c\uff0c\u7f3a\u9ede\u5c31\u662f\u4e0d\u592a\u4eba\u6027\u5316\u3002<\/p>\n\n\n\n<p>\u90a3\u5c0d\u65bc\u9019\u500b\u601d\u8003\u554f\u984c\u6211\u5011\u7576\u7136\u662f\u8981\u7528\u6700\u7c21\u55ae\u800c\u4e14\u6700\u597d\u7684\u65b9\u5f0f\uff0c\u56e0\u70ba<strong><span class=\"has-inline-color has-vivid-red-color\">\u6587\u7ae0\u7684\u9577\u77ed\u7236\u7d1a\u76d2\u5b50\u6a21\u578b\u80fd\u5920\u505a\u5230\u56e0\u70ba\u5b50\u7d1a\u5167\u5bb9\u9577\u5ea6\u6703\u8ddf\u8457\u6539\u8b8a<\/span><\/strong>\uff0c\u5b50\u7d1a\u5143\u7d20\u585e\u7684\u8d8a\u591a\u9020\u6210\u7684\u9577\u5ea6\u8d8a\u9577\uff0c\u7236\u7d1a\u76d2\u5b50\u6a21\u578b\u7684\u9577\u5ea6\u81ea\u5df1\u80fd\u5920\u81ea\u52d5\u5339\u914d\u62c9\u9577\u5c31\u53ef\u4ee5\uff0c\u9019\u4e00\u9ede\u662f\u6211\u5011\u671f\u671b\u4e26\u60f3\u8981\u505a\u5230\u7684\uff0c\u9019\u500b\u65b9\u6cd5\u6211\u5011\u5728\u4e0b\u4e00\u7bc0\u6703\u958b\u59cb\u4f86\u63a2\u8a0e\u5982\u4f55\u505a\u5230\u7684!<\/p>\n\n\n\n<ul><li><strong>\u6240\u6709\u7236\u7d1a\u76d2\u5b50\u6a21\u578b\u90fd\u9700\u8981\u8a2d\u7f6e\u9ad8\u5ea6\u55ce?<\/strong><\/li><li><strong>\u6240\u6709\u7236\u7d1a\u76d2\u5b50\u6a21\u578b\u9ad8\u5ea6\u8981\u5beb\u6b7b\u55ce?<\/strong><\/li><\/ul>\n\n\n\n<h2><span class=\"ez-toc-section\" id=\"CSS_%E6%B5%AE%E5%8B%95%E8%83%BD%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8B%95%E5%97%8E\"><\/span>CSS \u6d6e\u52d5\u80fd\u6e05\u9664\u6d6e\u52d5\u55ce?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"575\" src=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u80fd\u6e05\u9664\u6d6e\u52d5\u55ce.jpg?resize=1024%2C575&#038;ssl=1\" alt=\"\" class=\"wp-image-1637\" srcset=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u80fd\u6e05\u9664\u6d6e\u52d5\u55ce.jpg?resize=1024%2C575&amp;ssl=1 1024w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u80fd\u6e05\u9664\u6d6e\u52d5\u55ce.jpg?resize=300%2C168&amp;ssl=1 300w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u80fd\u6e05\u9664\u6d6e\u52d5\u55ce.jpg?resize=768%2C431&amp;ssl=1 768w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u80fd\u6e05\u9664\u6d6e\u52d5\u55ce.jpg?resize=1536%2C863&amp;ssl=1 1536w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u80fd\u6e05\u9664\u6d6e\u52d5\u55ce.jpg?w=2003&amp;ssl=1 2003w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" title=\"\" data-recalc-dims=\"1\"><\/figure>\n\n\n\n<p>OK! \u6839\u64da\u524d\u9762\u7684\u601d\u8003\uff0c\u4f60\u5fc3\u4e2d\u4e00\u5b9a\u6709\u4e00\u500b\u65b9\u6848\uff0c\u6211\u61c2\u4f60\u7684\u5c31\u662f\u76f4\u63a5\u7d66\u7236\u7d1a\u76d2\u5b50\u6a21\u578b\u5143\u7d20\u9ad8\u5ea6\u4e0d\u9032\u884c\u8a2d\u7f6e\uff0c\u9019\u6a23\u5c31\u80fd\u5920\u56e0\u70ba\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b\u53bb\u5339\u914d\uff0c\u4e26\u6490\u5927\u7236\u7d1a\u76d2\u5b50\u6a21\u578b\u7684\u9ad8\u5ea6\u4e86?! \u9019\u7b54\u6848\u5148\u4fdd\u7559\u6211\u5011\u76f4\u63a5\u4f86\u5be6\u505a\u770b\u770b\u5230\u5e95\u662f\u4e0d\u662f\u771f\u7684\u9019\u6a23\u5462?!<\/p>\n\n\n\n<p>\u9996\u5148\u5275\u5efa\u4e00\u500b\u5168\u65b0\u7684 HTML \u7d50\u69cb\u9aa8\u67b6\uff0c\u5728\u88e1\u982d\u65b0\u589e\u4e00\u500b &lt;div&gt; \u76d2\u5b50\u6a21\u578b\u6a19\u7c64\u4e26\u4f7f\u7528 class \u985e\u9078\u64c7\u5668\u547d\u540d\u70ba box \u9019\u4e00\u500b\u76d2\u5b50\u662f\u7236\u7d1a\u5143\u7d20\uff0c\u5728\u7236\u7d1a\u5143\u7d20\u88e1\u982d\u65b0\u589e 2 \u500b\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b\u6a19\u7c64 class \u985e\u9078\u64c7\u5668\u547d\u540d\u70ba one \u548c two\uff0c\u5b58\u6a94\u597d\u5f8c\u4f7f\u7528\u700f\u89bd\u5668\u6253\u958b\uff0c\u7576\u7136\u4f60\u662f\u770b\u4e0d\u898b\u4efb\u4f55\u6771\u897f\u7684!<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;body&gt;\n\t&lt;div class=\"box\"&gt;\n\t\t&lt;div class=\"one\"&gt;one&lt;\/div&gt;\n\t\t&lt;div class=\"two\"&gt;two&lt;\/div&gt;\n\n\t&lt;\/div&gt;\n\n&lt;\/body&gt;\n<\/code><\/pre>\n\n\n\n<p>\u56e0\u70ba &lt;div&gt; \u76d2\u5b50\u6a21\u578b\u5c31\u662f\u900f\u660e\u7684\uff0c\u6240\u4ee5\u6211\u5011\u5fc5\u9808\u65b9\u4fbf\u89c0\u5bdf\u8981\u8a2d\u7f6e\u4e00\u4e0b\u5bec\u5ea6\u8207\u9ad8\u5ea6\u9084\u6709\u80cc\u666f\u984f\u8272\u770b\u5f97\u898b\u76d2\u5b50\u5537! \u7236\u7d1a\u76d2\u5b50\u6a21\u578b box \u8a2d\u7f6e\u5bec\u5ea6 800px\u3001\u9ad8\u5ea6\u4e0d\u8981\u8a2d\u7f6e\u3001\u80cc\u666f\u984f\u8272\u7d05\u8272\uff0c\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b one \u8a2d\u7f6e\u5bec\u5ea6 200px\u3001\u9ad8\u5ea6 200px\u3001\u80cc\u666f\u984f\u8272\u8a2d\u7f6e\u7da0\u8272\uff0c\u53e6\u4e00\u500b\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b two \u8a2d\u7f6e\u5bec\u5ea6 300px\u3001\u9ad8\u5ea6300px\u3001\u80cc\u666f\u984f\u8272\u8a2d\u7f6e\u85cd\u8272\uff0c\u56de\u904e\u982d\u5230\u7236\u7d1a\u5143\u7d20\u628a\u5b83\u8a2d\u7f6e\u5728\u4e2d\u9593\u9084\u6709\u908a\u6846\u7d30\u7dda\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n\t.box {\n\t\twidth: 800px;\n\t\tbackground-color: red;\n\t\tborder: 1px soild black;\n\t\tmargin: 0 auto;\n}\n\t .one {\n\t\theight: 200px;\n\t\theight: 200px;\n\t\tbackground-color: green;\n\n}\n\t .two {\n\t\theight: 300px;\n\t\theight: 300px;\n\t\tbackground-color: blue;\n\n}\n\n&lt;\/style&gt;\n<\/code><\/pre>\n\n\n\n<p>\u5b8c\u6210\u5f8c\u4f60\u9032\u884c\u5b58\u6a94\u4e26\u5728\u700f\u89bd\u5668\u5448\u73fe\u51fa\u4f86\uff0c\u78ba\u5be6\u7236\u7d1a\u76d2\u5b50\u6a21\u578b\u5143\u7d20\u88ab\u6490\u958b\uff0c\u4e5f\u5370\u8b49\u4e86\u4e0d\u8a2d\u7f6e\u9ad8\u5ea6\u65b9\u6cd5\u662f\u53ef\u884c\u7684!!! \u5c0d\u6c92\u6709\u932f\u4f46\u662f\u5225\u5fd8\u4e86\u9019\u662f\u6a19\u6e96\u6d41\u5537! \u6700\u7d42\u6211\u5011\u662f\u5e0c\u671b\u5b50\u76d2\u5b50\u662f\u6d6e\u52d5\u7684\u4e26\u5f98\u986f\u793a\uff0c\u6211\u5011\u52a0\u5165 CSS \u6d6e\u52d5\u5c6c\u6027\u7d66\u90a3 2 \u500b\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b\u6a19\u7c64\u5427!<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n\t.box {\n\t\twidth: 800px;\n\t\tbackground-color: red;\n\t\tborder: 1px soild black;\n\t\tmargin: 0 auto;\n}\n\t .one {\n\t\theight: 200px;\n\t\theight: 200px;\n\t\tbackground-color: green;\n\t\tfloat: left;\n}\n\t .two {\n\t\theight: 300px;\n\t\theight: 300px;\n\t\tbackground-color: blue;\n\t\tfloat: left;\n}\n\n&lt;\/style&gt;\n<\/code><\/pre>\n\n\n\n<p>\u52a0\u5165\u5b8c CSS \u6d6e\u52d5\u5c6c\u6027\u7d66\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b\u9760\u5de6\u4e26\u5f98\u986f\u793a\uff0c\u4f60\u5b58\u6a94\u5f8c\u4f7f\u7528\u700f\u89bd\u5668\u6253\u958b\u4f60\u6703\u767c\u73fe hmmm \u7236\u7d1a\u76d2\u5b50\u6a21\u578b\u8b8a\u6210\u6241\u7684\u62c9! \u6c92\u6709\u9ad8\u5ea6\u4e86\uff0c\u800c\u5b50\u76d2\u5b50\u78ba\u5be6\u4e26\u5f98\u986f\u793a\u4f46\u662f\u662f\u812b\u96e2\u7236\u7d1a\u76d2\u5b50\u6a21\u578b\u963f! \u6c92\u932f\u5537! <strong>\u5982\u679c\u4f60\u6709\u8a8d\u771f\u5b78\u4e26\u5f04\u61c2 CSS \u6d6e\u52d5\u7279\u6027\u4f60\u4e26\u4e0d\u6703\u89ba\u5f97\u5947\u602a<\/strong>\uff0c\u56e0\u70ba\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b\u6d6e\u8d77\u4f86\u5f8c\u5c31\u812b\u96e2\u6a19\u6e96\u6d41\u4e86\uff0c<strong>\u90a3\u6a19\u6e96\u6d41\u7279\u6027\u5c31\u662f\u7368\u4f54\u4e00\u884c<\/strong>\uff0c<strong><span class=\"has-inline-color has-vivid-red-color\">\u6240\u4ee5\u4f60\u624d\u6703\u770b\u898b\u5b50\u7d1a\u76d2\u5b50\u901a\u901a\u88ab\u7236\u7d1a\u76d2\u5b50\u6a21\u578b\u4e1f\u51fa\u53bb\u4e86<\/span><\/strong>\u3002<\/p>\n\n\n\n<p>\u6240\u4ee5\u7236\u7d1a\u76d2\u5b50\u6a21\u578b\u6a19\u7c64\u56e0\u70ba\u6c92\u6709\u4e86\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b\u6a19\u7c64\uff0c\u90a3\u9ad8\u5ea6\u5c31\u6703\u8b8a\u6210 0px \u5c31\u986f\u793a\u6241\u6241\u7684\u62c9! \u56e0\u70ba\u9019\u6a23\u7236\u7d1a\u5143\u7d20\u76d2\u5b50\u6a21\u578b\u8207\u7236\u7d1a\u76d2\u5b50\u6a21\u578b\uff0c\u4e4b\u9593\u662f\u5144\u5f1f\u95dc\u4fc2\u5c31\u6703\u88dc\u4e0a\u4f86\uff0c\u56e0\u70ba\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b\u5df2\u7d93\u6d6e\u52d5\u4e86\u5b83\u5c31\u6703\u8ddf\u7236\u7d1a\u5143\u7d20\u76d2\u5b50\u6a21\u578b\u7684\u5144\u5f1f\u91cd\u758a\u5728\u4e00\u8d77\uff0c\u4f48\u5c40\u6703\u56e0\u70ba\u9019\u6a23\u8b8a\u6210\u5f88\u96e3\u770b\uff0c\u6240\u4ee5\u624d\u9700\u8981\u628a CSS \u6d6e\u52d5\u6e05\u9664\u624d\u6709\u53ef\u80fd\u505a\u5230\u3002<\/p>\n\n\n\n<p><strong>\u7531\u65bc\u7236\u7d1a\u76d2\u5b50\u6a21\u578b\u5f88\u591a\u60c5\u6cc1\u4e0b\u662f\u4e0d\u65b9\u4fbf\u7d66\u9ad8\u5ea6<\/strong>\uff0c\u4f46\u662f! \u4f46\u662f! \u5b50\u7d1a\u76d2\u5b50\u6a21\u578b\u4f7f\u7528 CSS \u6d6e\u52d5\u5f8c\u60f3\u8981\u4e26\u5f98\u986f\u793a\u537b\u56e0\u70ba\u98db\u751f\u4e86! <strong>\u7236\u7d1a\u76d2\u5b50\u6a21\u578b\u9ad8\u5ea6\u5c31\u6703\u8b8a\u6210 0<\/strong>\uff0c\u6b64\u6642\u5c31\u6703\u5f71\u97ff\u5f8c\u9762\u7684\u5144\u5f1f\u7236\u7d1a\u76d2\u5b50\u6a21\u578b\u56e0\u70ba\u662f\u6a19\u6e96\u6d41\u6703\u88dc\u4e0a\u4f4d\u7f6e\u3002<\/p>\n\n\n\n<p><strong><span class=\"has-inline-color has-vivid-red-color\">\u6240\u4ee5\u70ba\u4ec0\u9ebc\u9700\u8981\u6e05\u9664\u6d6e\u52d5\u7684\u5e7e\u500b\u91cd\u9ede:<\/span><\/strong><\/p>\n\n\n\n<ul><li><strong>\u7236\u7d1a\u76d2\u5b50\u6a21\u578b\u4e0d\u8a2d\u7f6e\u9ad8\u5ea6\uff0c\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b\u78ba\u5be6\u53ef\u4ee5\u6490\u5927\u76d2\u5b50\u9ad8\u5ea6\uff0c\u56e0\u70ba\u5169\u8005\u90fd\u662f\u6a19\u6e96\u6d41<\/strong><\/li><li><strong>\u7576\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b\u8a2d\u7f6e\u6d6e\u52d5\u5f8c\u5c31\u4e0d\u5728\u662f\u6a19\u6e96\u6d41\uff0c\u6703\u812b\u96e2\u7236\u7d1a\u76d2\u5b50\u6a21\u578b\u90a3\u9ad8\u5ea6\u5c31\u6703\u8b8a\u6210 0<\/strong><\/li><li><strong>CSS \u6d6e\u52d5\u5143\u7d20\u4e26\u4e0d\u6703\u4f54\u7528\u6a19\u6e96\u6d41\u4f4d\u7f6e\uff0c\u5f8c\u9762\u7684\u6a19\u6e96\u6d41\u6703\u5f80\u524d\u66ff\u88dc\u6d6e\u52d5\u5f8c\u4f4d\u7f6e<\/strong><\/li><li><strong>\u6d6e\u52d5\u5f8c\u7684\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b\u6703\u8207\u539f\u672c\u7236\u7d1a\u76d2\u5b50\u6a21\u578b\u7684\u5144\u5f1f ( \u6a19\u6e96\u6d41 ) \u5448\u73fe\u91cd\u758a\u73fe\u8c61<\/strong><\/li><\/ul>\n\n\n\n<a class=\"btn_CTA\" href=\"https:\/\/learningnow.com.tw\/affiliate-marketing-make-money\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u9ede\u6211\u77ad\u89e3 \u5c0f\u9752\u5982\u4f55\u6bcf\u6708\u591a\u8cfa5\u4f4d\u6578\u53f0\u5e63<\/a>\n\n\n\n<p><\/p>\n\n\n\n<h2><span class=\"ez-toc-section\" id=\"CSS_%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8B%95%E6%9C%AC%E8%B3%AA\"><\/span>CSS \u6e05\u9664\u6d6e\u52d5\u672c\u8cea<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"575\" src=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5\u672c\u8cea.jpg?resize=1024%2C575&#038;ssl=1\" alt=\"\" class=\"wp-image-1638\" srcset=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5\u672c\u8cea.jpg?resize=1024%2C575&amp;ssl=1 1024w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5\u672c\u8cea.jpg?resize=300%2C168&amp;ssl=1 300w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5\u672c\u8cea.jpg?resize=768%2C431&amp;ssl=1 768w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5\u672c\u8cea.jpg?resize=1536%2C863&amp;ssl=1 1536w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5\u672c\u8cea.jpg?w=2003&amp;ssl=1 2003w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" title=\"\" data-recalc-dims=\"1\"><\/figure>\n\n\n\n<p>\u6211\u5011\u53c8\u6839\u64da\u4e0a\u4e00\u7bc0\u7684\u6b63\u5be6\uff0c\u7236\u7d1a\u76d2\u5b50\u6a21\u578b\u4e0d\u52a0\u9ad8\u5ea6\u3001\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b\u4f7f\u7528\u6d6e\u52d5\u5f8c\u4e00\u5b9a\u6703\u812b\u96e2\u958b\u4f86\u53c8\u5448\u73fe\u51fa\u7236\u7d1a\u76d2\u5b50\u6a21\u578b\u9ad8\u5ea6 0 \u7684\u72c0\u6cc1\uff0c\u9019\u7bc0\u5c31\u4f86\u8ac7\u8ac7 CSS \u6e05\u9664\u6d6e\u52d5\u7684\u672c\u8cea\u6709\u54ea\u4e9b\u5462?<\/p>\n\n\n\n<ul><li><strong>\u6e05\u9664\u6d6e\u52d5\u7684\u672c\u8cea\u662f\u6e05\u9664\u6d6e\u52d5\u5143\u7d20\u9020\u6210\u7684\u5f71\u97ff<\/strong><\/li><li><strong>\u5982\u679c\u7236\u7d1a\u76d2\u5b50\u6a21\u578b\u672c\u8eab\u6709\u9ad8\u5ea6\uff0c\u5247\u4e0d\u9700\u8981\u6e05\u9664 CSS \u6d6e\u52d5<\/strong><\/li><li><strong>\u6e05\u9664 CSS \u6d6e\u52d5\u5f8c\uff0c\u7236\u7d1a\u76d2\u5b50\u6a21\u578b\u5c31\u6703\u6839\u64da\u6d6e\u52d5\u5f8c\u7684\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b\u9032\u884c\u81ea\u52d5\u9ad8\u5ea6\u6aa2\u6e2c<\/strong><\/li><li><strong>\u6e05\u9664\u6d6e\u52d5\u7684\u672c\u8cea\u662f\u6e05\u9664\u6d6e\u52d5\u5143\u7d20\uff0c\u812b\u96e2\u6a19\u6e96\u6d41\u9020\u6210\u7684\u5f71\u97ff<\/strong><\/li><\/ul>\n\n\n\n<h2><span class=\"ez-toc-section\" id=\"CSS_%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8B%95%E8%AA%9E%E6%B3%95%E6%98%AF%E4%BB%80%E9%BA%BC\"><\/span>CSS \u6e05\u9664\u6d6e\u52d5\u8a9e\u6cd5\u662f\u4ec0\u9ebc?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"575\" src=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5\u8a9e\u6cd5\u662f\u4ec0\u9ebc.jpg?resize=1024%2C575&#038;ssl=1\" alt=\"\" class=\"wp-image-1639\" srcset=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5\u8a9e\u6cd5\u662f\u4ec0\u9ebc.jpg?resize=1024%2C575&amp;ssl=1 1024w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5\u8a9e\u6cd5\u662f\u4ec0\u9ebc.jpg?resize=300%2C168&amp;ssl=1 300w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5\u8a9e\u6cd5\u662f\u4ec0\u9ebc.jpg?resize=768%2C431&amp;ssl=1 768w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5\u8a9e\u6cd5\u662f\u4ec0\u9ebc.jpg?resize=1536%2C863&amp;ssl=1 1536w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5\u8a9e\u6cd5\u662f\u4ec0\u9ebc.jpg?w=2003&amp;ssl=1 2003w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" title=\"\" data-recalc-dims=\"1\"><\/figure>\n\n\n\n<p>CSS \u6e05\u9664\u6d6e\u52d5\u8a9e\u6cd5\u662f\u4ec0\u9ebc\u5462?! \u5176\u5be6\u5f88\u7c21\u55ae\u7684\u4e26\u4e0d\u96e3\uff0c\u6211\u5011\u4f86\u770b\u770b\u8a9e\u6cd5\u600e\u9ebc\u5beb\u5427!<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\u9078\u64c7\u5668 { clear: \u5c6c\u6027\u503c; }\n<\/code><\/pre>\n\n\n\n<p>\u4f60\u53ea\u8981\u5148\u6307\u5b9a\u4f60\u60f3\u8981\u6539\u8b8a\u7684\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b\u5143\u7d20\uff0c\u5728\u7d66\u5b83 clear \u5c31\u662f\u6e05\u9664\u7684\u610f\u601d\uff0c<strong><span class=\"has-inline-color has-vivid-red-color\">\u4e00\u822c\u6211\u5011\u6703\u5148\u9032\u884c\u9078\u64c7\u5668\u7684\u9078\u5b9a\u518d\u586b\u5165\u5c6c\u6027\u503c<\/span><\/strong>\uff0c\u4e0d\u7136\u4f60\u600e\u9ebc\u8ddf\u7db2\u9801\u8aaa\u4f60\u8981\u6e05\u9664\u5427! \u5c6c\u6027\u503c\u6709 left\u3001right\u3001both\uff0c\u4f46\u662f\u5be6\u969b\u958b\u767c\u524d\u7aef\u5de5\u7a0b\u5e2b\u90fd\u662f\u4f7f\u7528 clear: both;<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td><strong>\u6d6e\u52d5\u6e05\u9664\u5c6c\u6027\u503c<\/strong><\/td><td><strong>\u6d6e\u52d5\u6e05\u9664\u63cf\u8ff0<\/strong><\/td><\/tr><tr><td>left<\/td><td>\u4e0d\u5141\u8a31\u5de6\u5074\u6709\u6d6e\u52d5\u5143\u7d20(\u6e05\u9664\u5de6\u5074\u6d6e\u52d5\u7684\u5f71\u97ff)<\/td><\/tr><tr><td>right<\/td><td>\u4e0d\u5141\u8a31\u53f3\u5074\u6709\u6d6e\u52d5\u5143\u7d20(\u6e05\u9664\u53f3\u5074\u6d6e\u52d5\u7684\u5f71\u97ff)<\/td><\/tr><tr><td>both<\/td><td>\u540c\u6642\u6e05\u9664\u5de6\u53f3\u5169\u5074\u6d6e\u52d5<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u90a3\u5be6\u969b\u4e0a\u662f\u4f7f\u7528 clear ( \u6e05\u9664\u6d6e\u52d5 )\uff0c\u4f46\u662f\u6e05\u9664\u6d6e\u52d5\u5be6\u969b\u4e0a\u662f\u9032\u884c<strong><span class=\"has-inline-color has-vivid-red-color\"><strong>\u9589\u5408<\/strong><\/span><\/strong>\u7684\u52d5\u4f5c\uff0c\u4e5f\u5c31\u662f<strong><span class=\"has-inline-color has-vivid-red-color\">\u9589\u5408\u6d6e\u52d5<\/span><\/strong>\uff0c\u4e4b\u524d\u6211\u5011\u4e0d\u662f\u8aaa\u6d6e\u52d5\u5c31\u662f\u7a7a\u4e2d\u4eba\u55ce? \u4ed6\u5011\u5f88\u6a02\u610f\u8ddf\u6a19\u6e96\u6d41 ( \u5730\u9762\u4eba ) \u548c\u5e73\u5171\u8655\uff0c\u4f46\u662f\u524d\u63d0\u662f\u7a7a\u4e2d\u4eba\u662f\u5148\u5230\u7684\u4ed6\u5011\u5f88\u6a02\u610f\u63a5\u53d7\u6a19\u6e96\u6d41 ( \u5730\u9762\u4eba )\uff0c\u4f46\u662f! \u4f46\u662f! \u4eca\u5929\u7236\u7d1a\u76d2\u5b50\u6a21\u578b\u7684\u6574\u7247\u5730\u9762\u5c31\u662f\u6a19\u6e96\u6d41 ( \u5730\u9762\u4eba )\uff0c\u4eca\u5929\u7a81\u7136\u5728\u4eba\u5bb6\u5730\u76e4\u98db\u751f\u4e00\u5b9a\u88ab\u8d95\u8d70\u5230\u5916\u9762\u53bb\u6240\u4ee5\u624d\u9020\u6210\u9ad8\u5ea6\u662f 0\u3002<\/p>\n\n\n\n<p>\u56e0\u70ba\u60f3\u8981\u98db\u751f\u7684\u6d6e\u52d5 ( \u7a7a\u4e2d\u4eba ) \u5728\u4eba\u5bb6\u5730\u76e4\u4e0a\u5c31\u8981\u8ddf\u6a19\u6e96\u6d41 ( \u5730\u9762\u4eba ) <strong><span class=\"has-inline-color has-vivid-red-color\">\u7c3d\u8a02\u4e00\u4efd\u5408\u7d04<\/span><\/strong>\uff0c\u9019\u4efd\u5408\u7d04\u5c31\u662f\u5fc5\u9808\u8981\u6e05\u9664\u4ee5\u524d\u7684\u5730\u9762\u7684\u6240\u6709\u6b0a\u4e5f\u5c31\u662f clear ( \u6e05\u9664 )\uff0c\u53ea\u8981\u6e05\u9664\u5f8c\u4f60\u5c31\u80fd\u5728\u7236\u7d1a\u76d2\u5b50\u6a21\u578b\u6a19\u6e96\u6d41\u4e2d\uff0c\u6709\u4f7f\u7528\u7a7a\u4e2d\u7684\u6b0a\u5229\uff0c\u9019\u6a23\u4f60\u88e1\u4e86\u89e3\u4e86\u55ce?! \u4f46\u662f\u4f60\u53ea\u80fd\u5728\u7236\u7d1a\u5730\u9762\u4eba\u7684\u9818\u7a7a\u4e0d\u80fd\u5728\u5916\u982d\uff0c\u6240\u4ee5\u624d\u53c8\u8aaa\u9589\u5408\u5728\u5730\u9762\u4eba ( \u6a19\u6e96\u6d41 ) \u88e1\u982d\u3002<\/p>\n\n\n\n<p><strong><span class=\"has-inline-color has-vivid-red-color\">\u90a3\u6e05\u9664\u6d6e\u52d5\u7e3d\u5171\u6709 4 \u7e3d\u65b9\u6cd5\u7b56\u7565\uff0c\u5206\u5225\u662f<\/span><\/strong><\/p>\n\n\n\n<ul><li><strong>\u984d\u5916\u6a19\u7c64\u6cd5\u53c8\u7a31\u70ba\u9694\u7246\u6cd5<\/strong><\/li><li><strong>\u7236\u7d1a\u6dfb\u52a0 overflow<\/strong><\/li><li><strong>\u7236\u7d1a\u6dfb\u52a0 after \u507d\u5143\u7d20<\/strong><\/li><li><strong>\u7236\u7d1a\u6dfb\u52a0\u96d9\u507d\u5143\u7d20<\/strong><\/li><\/ul>\n\n\n\n<p>\u9019\u56db\u7a2e\u65b9\u6cd5\u4f60\u90fd\u5fc5\u9808\u4e86\u89e3\uff0c\u56e0\u70ba\u4e0d\u540c\u5718\u968a\u5728\u9032\u884c\u958b\u767c\u6703\u7d71\u4e00\u4e00\u7a2e\u505a\u6cd5\uff0c\u6216\u662f\u4f60\u5728\u8b80\u5225\u4eba\u7db2\u7ad9\u662f\u7528\u5176\u4e2d\u67d0\u4e00\u7a2e\u65b9\u6cd5\u6642\uff0c\u4f60\u624d\u6703\u77e5\u9053\u539f\u4f86\u9019\u88e1\u5c0d\u65b9\u662f\u4f7f\u7528\u9019\u7a2e\u65b9\u5f0f\u5440! \u6bcf\u4e00\u500b\u65b9\u6cd5\u90fd\u6709\u81ea\u5df1\u7684\u7279\u9ede\u4e26\u4e14\u90fd\u80fd\u5920\u5be6\u73fe\u51fa\u6e05\u9664\u6d6e\u52d5\u7684\u52d5\u4f5c\uff0c\u6c92\u6709\u4e00\u500b\u6700\u5b8c\u7f8e\u53ea\u6709\u770b\u4f60\u7576\u6642\u60f3\u7528\u4ec0\u9ebc\u800c\u5df2\uff0c\u5982\u679c\u786c\u8981\u8aaa\u90a3\u4e9b\u6700\u597d\u53ea\u80fd\u8aaa<strong><span class=\"has-inline-color has-vivid-red-color\">\u5f8c\u9762\u7684 3 \u7a2e\u65b9\u6cd5\u6703\u6bd4\u8f03\u597d\u7528<\/span><\/strong>\u3002<\/p>\n\n\n\n<p>\u4f60\u53ef\u80fd\u6703\u8aaa! \u5947\u602a\u4e0d\u662f\u52a0\u5165 clear \u5c6c\u6027\u5c31\u597d\u4e86\u55ce? \u9084\u6709\u9019\u56db\u7a2e\u65b9\u6cd5??? \u5c0d\u5440! \u4f60\u770b\u7a7a\u4e2d\u4eba\u548c\u5730\u9762\u4eba\u96d6\u7136\u8aaa\u597d\u4e26\u7c3d\u8a02\u5408\u7d04\uff0c\u66ab\u6642\u80fd\u5920\u4f7f\u7528\u7a7a\u6b0a\u4f46\u662f<strong><span class=\"has-inline-color has-vivid-red-color\">\u5408\u7d04\u7d42\u7a76\u662f\u5408\u7d04\uff0c\u6709\u4e9b\u7a7a\u4e2d\u4eba\u9084\u662f\u6703\u9032\u884c\u9055\u7d04\u6216\u662f\u4e0d\u9075\u5b88\u7576\u521d\u7684\u898f\u5247<\/span><\/strong>\uff0c\u5c31\u50cf\u660e\u660e\u7d05\u71c8\u9084\u662f\u6709\u4eba\u6703\u53bb\u95d6\u4e00\u6a23\uff0c\u9019\u6642\u5019\u5730\u9762\u4eba ( \u6a19\u6e96\u6d41 ) \u5c31\u6703\u8a2d\u7f6e\u4e00\u5230\u7246\u4ee5\u9632\u6b62\u6d6e\u52d5 ( \u7a7a\u4e2d\u4eba ) \u8d8a\u754c\u8dd1\u51fa\u53bb\u5916\u9762\u7684\u9818\u7a7a\uff0c\u63d0\u5230\u7684\u56db\u7a2e\u65b9\u6cd5\u5c31\u662f\u7528\u4f86\u963b\u64cb\u6d6e\u52d5 ( \u7a7a\u4e2d\u4eba ) \u7684\u65b9\u6cd5\u5537!<\/p>\n\n\n\n<p>\u9019\u4e9b\u7b56\u7565\u7684\u521d\u8877\u90fd\u662f\u5e0c\u671b\u9032\u884c CSS \u6d6e\u52d5\u7684\u9589\u5408\u505a\u52d5 ( \u7c3d\u8a02\u5408\u7d04 )\uff0c\u53ea\u8b93\u6d6e\u52d5\u5728\u7236\u7d1a\u76d2\u5b50\u6a21\u578b\u5167\u90e8\u4e56\u4e56\u5f85\u8005\u5c31\u597d\uff0c\u4e26\u4e0d\u5e0c\u671b\u6d6e\u52d5\u5f8c\u7684\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b\u4e0d\u4e56\u8dd1\u5230\u5916\u9762\u7684\u5340\u57df\u53bb\u5f71\u97ff\u5230\u5225\u4eba\u7684\u9818\u5730\u4e86\u3002<\/p>\n\n\n\n<h2><span class=\"ez-toc-section\" id=\"CSS_%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8B%95_-_%E9%A1%8D%E5%A4%96%E6%A8%99%E7%B1%A4%E6%B3%95\"><\/span>CSS \u6e05\u9664\u6d6e\u52d5 &#8211; \u984d\u5916\u6a19\u7c64\u6cd5<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"575\" src=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5_\u984d\u5916\u6a19\u7c64\u6cd5.jpg?resize=1024%2C575&#038;ssl=1\" alt=\"\" class=\"wp-image-1640\" srcset=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5_\u984d\u5916\u6a19\u7c64\u6cd5.jpg?resize=1024%2C575&amp;ssl=1 1024w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5_\u984d\u5916\u6a19\u7c64\u6cd5.jpg?resize=300%2C168&amp;ssl=1 300w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5_\u984d\u5916\u6a19\u7c64\u6cd5.jpg?resize=768%2C431&amp;ssl=1 768w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5_\u984d\u5916\u6a19\u7c64\u6cd5.jpg?resize=1536%2C863&amp;ssl=1 1536w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5_\u984d\u5916\u6a19\u7c64\u6cd5.jpg?w=2003&amp;ssl=1 2003w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" title=\"\" data-recalc-dims=\"1\"><\/figure>\n\n\n\n<p>\u4e0d\u9075\u5b88\u898f\u5247\u7684\u6d6e\u52d5 ( \u7a7a\u4e2d\u4eba )\uff0c\u6a19\u6e96\u6d41 ( \u5730\u9762\u4eba ) \u60f3\u51fa\u4e86\u984d\u5916\u6a19\u7c64\u6cd5\u53c8\u7a31\u70ba<strong><span class=\"has-inline-color has-vivid-red-color\">\u9694\u7246\u6cd5<\/span><\/strong>\uff0c\u5c08\u9580\u6cbb\u7406\u90a3\u4e9b\u4e0d\u5b88\u898f\u5247\u7684\u6d6e\u52d5 ( \u7a7a\u4e2d\u4eba )\uff0c\u4f60\u61c9\u8a72\u770b\u898b\u95dc\u9375\u5b57\u4e86\u5427! \u7246\u6703\u8a2d\u4e00\u5230\u7246\u55ce? \u662f\u7684\u6c92\u6709\u932f\uff0c\u4f60\u53ef\u4ee5\u60f3\u60f3\u770b\u9019\u9053\u7246\u6703\u8a2d\u7f6e\u5230\u54ea\u88e1\u5462?<\/p>\n\n\n\n<p>\u7b54\u6848\u662f\u9694\u7246\u6cd5\u6703\u8a2d\u7f6e\u5728\u6703\u6d6e\u52d5\u5143\u7d20\u672b\u5c3e\uff0c\u4e26<strong><span class=\"has-inline-color has-vivid-red-color\">\u6dfb\u52a0\u4e00\u500b\u7a7a\u7684\u5143\u7d20\u6a19\u7c64<\/span><\/strong>\uff0c\u4f60\u53ef\u80fd\u6703\u50bb\u773c\u4ec0\u9ebc\u7a7a\u5143\u7d20\u6a19\u7c64\u963f! \u5c31\u662f\u5728\u9020\u4e00\u500b\u7a7a\u7684 &lt;div&gt; \u76d2\u5b50\u6a21\u578b\uff0c\u5c31\u662f\u9019\u9ebc\u7c21\u55ae\u585e\u5728\u6700\u5f8c\u4e00\u500b\u6d6e\u52d5\u5143\u7d20\u5f8c\u9762\u5c31\u53ef\u4ee5\u4e86\uff0c\u4f8b\u5982\u4e0b\u5217\u8868\u793a\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div style=\" clear: both;\"&gt;&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<p>\u7576\u4f60\u9019\u6a23\u505a\u5c31\u662f\u6703\u5728\u6700\u5f8c\u4e00\u500b\u6d6e\u52d5 ( \u7a7a\u4e2d\u4eba ) \u7684\u5f8c\u9762\u8a2d\u5b9a\u4e00\u9053\u7246\u5728\u90a3\u908a\uff0c\u6d6e\u52d5\u4ed6\u5011\u60f3\u5728\u4e82\u8dd1\u5c31\u4e0d\u80fd\u5920\u8dd1\u51fa\u53bb\u4e86\uff0c\u6211\u5011\u4f86\u5be6\u505a\u5427! \u9996\u5148\u5275\u5efa\u4e00\u500b\u5168\u65b0\u7684 HTML \u7d50\u69cb\u9aa8\u67b6\uff0c\u5728\u88e1\u982d\u65b0\u589e\u4e00\u500b &lt;div&gt; \u76d2\u5b50\u6a21\u578b\u6a19\u7c64\u4e26\u4f7f\u7528 class \u985e\u9078\u64c7\u5668\u547d\u540d\u70ba box \u9019\u4e00\u500b\u76d2\u5b50\u662f\u7236\u7d1a\u5143\u7d20\uff0c\u5728\u7236\u7d1a\u5143\u7d20\u88e1\u982d\u65b0\u589e 3 \u500b\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b\u6a19\u7c64 class \u985e\u9078\u64c7\u5668\u547d\u540d\u70ba one \u548c two\uff0c\u9084\u6709\u4e00\u500b\u5b50\u76d2\u5b50\u6211\u5011\u76f4\u63a5\u628a CSS \u5c6c\u6027 clear \u548c\u5c6c\u6027\u503c both \u90fd\u5beb\u597d\uff0c\u5c31\u662f\u628a\u7246\u8a2d\u5b9a\u597d\uff0c\u5b58\u6a94\u597d\u5f8c\u4f7f\u7528\u700f\u89bd\u5668\u6253\u958b\uff0c\u7576\u7136\u4f60\u662f\u770b\u4e0d\u898b\u4efb\u4f55\u6771\u897f\u7684!<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;body&gt;\n\t&lt;div class=\"box\"&gt;\n\t\t&lt;div class=\"one\"&gt;one&lt;\/div&gt;\n\t\t&lt;div class=\"two\"&gt;two&lt;\/div&gt;\n\t\t&lt;div style=\" clear: both;\"&gt;&lt;\/div&gt;\n\t&lt;\/div&gt;\n\n&lt;\/body&gt;\n<\/code><\/pre>\n\n\n\n<p>\u56e0\u70ba &lt;div&gt; \u76d2\u5b50\u6a21\u578b\u5c31\u662f\u900f\u660e\u7684\uff0c\u6240\u4ee5\u6211\u5011\u5fc5\u9808\u65b9\u4fbf\u89c0\u5bdf\u8981\u8a2d\u7f6e\u4e00\u4e0b\u5bec\u5ea6\u8207\u9ad8\u5ea6\u9084\u6709\u80cc\u666f\u984f\u8272\u770b\u5f97\u898b\u76d2\u5b50\u5537! \u7236\u7d1a\u76d2\u5b50\u6a21\u578b box \u8a2d\u7f6e\u5bec\u5ea6 800px\u3001\u9ad8\u5ea6\u4e0d\u8981\u8a2d\u7f6e\u3001\u80cc\u666f\u984f\u8272\u7d05\u8272\uff0c\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b one \u8a2d\u7f6e\u5bec\u5ea6 200px\u3001\u9ad8\u5ea6 200px\u3001\u80cc\u666f\u984f\u8272\u8a2d\u7f6e\u7da0\u8272\u3001\u5de6\u6d6e\u52d5\uff0c\u53e6\u4e00\u500b\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b two \u8a2d\u7f6e\u5bec\u5ea6300px\u3001\u9ad8\u5ea6 300px\u3001\u80cc\u666f\u984f\u8272\u8a2d\u7f6e\u85cd\u8272\u3001\u5de6\u6d6e\u52d5\uff0c\u56de\u904e\u982d\u5230\u7236\u7d1a\u5143\u7d20\u628a\u5b83\u8a2d\u7f6e\u5728\u4e2d\u9593\u9084\u6709\u908a\u6846\u7d30\u7dda\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n\t.box {\n\t\twidth: 800px;\n\t\tbackground-color: red;\n\t\tborder: 1px soild black;\n\t\tmargin: 0 auto;\n}\n\t .one {\n\t\theight: 200px;\n\t\theight: 200px;\n\t\tbackground-color: green;\n\t\tfloat: left;\n\n}\n\t .two {\n\t\theight: 300px;\n\t\theight: 300px;\n\t\tbackground-color: blue;\n\t\tfloat: left;\n}\n\n&lt;\/style&gt;\n<\/code><\/pre>\n\n\n\n<p>\u7576\u4f60\u5beb\u5b8c CSS \u5b58\u6a94\u5f8c\u4f7f\u7528\u700f\u89bd\u5668\u6253\u958b\u6a94\u6848\uff0c\u4f60\u6703\u767c\u73fe\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b\u6703\u4e56\u4e56\u7684\u4e26\u5f98\u986f\u793a\u4e56\u4e56\u7684\uff0c\u800c\u7236\u7d1a\u76d2\u5b50\u6a21\u578b\u4e5f\u6703\u986f\u793a\u9ad8\u5ea6\u4e86! \u9019\u6a23\u5c31\u80fd\u5920\u5b8c\u6210\u6211\u5011\u4e00\u503c\u5f88\u56f0\u64fe\u7684\u554f\u984c\u5566! \u662f\u4e0d\u662f\u5fc3\u4e2d\u56f0\u60d1\u89e3\u958b\u5566! \u800c\u90a3\u5230\u7246\u4f60\u6216\u8a31\u6709\u4e9b\u7591\u554f\uff0c\u5176\u5be6\u4f60\u4e0d\u9700\u8981\u64d4\u5fc3\u56e0\u70ba\u76d2\u5b50\u6a21\u578b\u672c\u8eab\u662f\u900f\u660e\u7684\u53c8\u8b93\u5b83\u8ce6\u4e88 CSS clear \u5c6c\u6027\uff0c\u5c31\u50cf\u5408\u7d04\u4e00\u6a23\u662f\u4e00\u9053\u96b1\u5f62\u7684\u7246\u5728\u7d04\u675f\u6d6e\u52d5\u5011 ( \u7a7a\u4e2d\u4eba )\u3002<\/p>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"CSS_%E6%B5%AE%E5%8B%95%E9%9A%94%E7%89%86%E6%B3%95%E5%84%AA%E7%BC%BA%E9%BB%9E%E5%88%86%E6%9E%90\"><\/span>CSS \u6d6e\u52d5\u9694\u7246\u6cd5\u512a\u7f3a\u9ede\u5206\u6790<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"575\" src=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u9694\u7246\u6cd5\u512a\u7f3a\u9ede\u5206\u6790.jpg?resize=1024%2C575&#038;ssl=1\" alt=\"\" class=\"wp-image-1641\" srcset=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u9694\u7246\u6cd5\u512a\u7f3a\u9ede\u5206\u6790.jpg?resize=1024%2C575&amp;ssl=1 1024w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u9694\u7246\u6cd5\u512a\u7f3a\u9ede\u5206\u6790.jpg?resize=300%2C168&amp;ssl=1 300w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u9694\u7246\u6cd5\u512a\u7f3a\u9ede\u5206\u6790.jpg?resize=768%2C431&amp;ssl=1 768w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u9694\u7246\u6cd5\u512a\u7f3a\u9ede\u5206\u6790.jpg?resize=1536%2C863&amp;ssl=1 1536w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6d6e\u52d5\u9694\u7246\u6cd5\u512a\u7f3a\u9ede\u5206\u6790.jpg?w=2003&amp;ssl=1 2003w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" title=\"\" data-recalc-dims=\"1\"><\/figure>\n\n\n\n<ul><li><strong>\u512a\u9ede : \u901a\u4fd7\u6613\u61c2\uff0c\u7c21\u55ae\u7528\u65b9\u4fbf<\/strong><\/li><li><strong>\u7f3a\u9ede : \u6dfb\u52a0\u4e00\u4e9b\u7121\u610f\u7fa9\u6a19\u7c64\u5143\u7d20\uff0c\u4f7f HTML \u7d50\u69cb\u6027\u8b8a\u5dee<\/strong><\/li><li><strong>\u7f3a\u9ede : \u6dfb\u52a0\u7684\u7a7a\u6a19\u7c64\u5fc5\u9808\u662f\u584a\u7d1a\u5143\u7d20\u6a19\u7c64!<\/strong><\/li><\/ul>\n\n\n\n<a class=\"btn_CTA\" href=\"https:\/\/learningnow.com.tw\/affiliate-marketing-make-money\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u9ede\u6211\u77ad\u89e3 \u5c0f\u9752\u5982\u4f55\u6bcf\u6708\u591a\u8cfa5\u4f4d\u6578\u53f0\u5e63<\/a>\n\n\n\n<p><\/p>\n\n\n\n<h2><span class=\"ez-toc-section\" id=\"CSS_%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8B%95_-_%E7%88%B6%E7%B4%9A%E6%B7%BB%E5%8A%A0_CSS_%E5%B1%AC%E6%80%A7_overflow\"><\/span>CSS \u6e05\u9664\u6d6e\u52d5 &#8211; \u7236\u7d1a\u6dfb\u52a0 CSS \u5c6c\u6027 overflow<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"575\" src=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5_\u7236\u7d1a\u6dfb\u52a0-SS\u5c6c\u6027overflow.jpg?resize=1024%2C575&#038;ssl=1\" alt=\"\" class=\"wp-image-1642\" srcset=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5_\u7236\u7d1a\u6dfb\u52a0-SS\u5c6c\u6027overflow.jpg?resize=1024%2C575&amp;ssl=1 1024w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5_\u7236\u7d1a\u6dfb\u52a0-SS\u5c6c\u6027overflow.jpg?resize=300%2C168&amp;ssl=1 300w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5_\u7236\u7d1a\u6dfb\u52a0-SS\u5c6c\u6027overflow.jpg?resize=768%2C431&amp;ssl=1 768w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5_\u7236\u7d1a\u6dfb\u52a0-SS\u5c6c\u6027overflow.jpg?resize=1536%2C863&amp;ssl=1 1536w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5_\u7236\u7d1a\u6dfb\u52a0-SS\u5c6c\u6027overflow.jpg?w=2003&amp;ssl=1 2003w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" title=\"\" data-recalc-dims=\"1\"><\/figure>\n\n\n\n<p>\u6211\u5011\u5728\u4f86\u770b\u770b\u7b2c\u4e8c\u7a2e\u7b56\u7565\u65b9\u5f0f\u5427! <strong><span class=\"has-inline-color has-vivid-red-color\">\u7236\u7d1a\u6dfb\u52a0 overflow<\/span><\/strong>\uff0c\u4f60\u53ef\u4ee5\u7d66\u7236\u7d1a\u76d2\u5b50\u6a21\u578b CSS \u5c6c\u6027\u7576\u4e2d\u6dfb\u52a0 overflow \u5c6c\u6027\uff0c\u5c6c\u6027\u503c\u4f60\u53ef\u4ee5\u7d66\u4e09\u7a2e\u65b9\u5f0f<strong><span class=\"has-inline-color has-vivid-red-color\"> hidden\u3001auto\u3001scroll<\/span><\/strong>\uff0c\u9019\u8ddf\u4e0a\u9762\u90a3\u4e00\u500b\u9694\u7246\u6cd5\u7b56\u7565\u5b8c\u5168\u4e0d\u540c\uff0c\u9019\u4e00\u500b\u7b56\u7565\u662f\u7d66\u7236\u7d1a\u76d2\u5b50\u6a21\u578b\u6dfb\u52a0 CSS \u5c6c\u6027\u3002<\/p>\n\n\n\n<p>\u9996\u5148\u5275\u5efa\u4e00\u500b\u5168\u65b0\u7684 HTML \u7d50\u69cb\u9aa8\u67b6\uff0c\u5728\u88e1\u982d\u65b0\u589e\u4e00\u500b &lt;div&gt; \u76d2\u5b50\u6a21\u578b\u6a19\u7c64\u4e26\u4f7f\u7528 class \u985e\u9078\u64c7\u5668\u547d\u540d\u70ba box \u9019\u4e00\u500b\u76d2\u5b50\u662f\u7236\u7d1a\u5143\u7d20\uff0c\u5728\u7236\u7d1a\u5143\u7d20\u88e1\u982d\u65b0\u589e 3 \u500b\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b\u6a19\u7c64 class \u985e\u9078\u64c7\u5668\u547d\u540d\u70ba one \u548c two\uff0c\u5b58\u6a94\u597d\u5f8c\u4f7f\u7528\u700f\u89bd\u5668\u6253\u958b\uff0c\u7576\u7136\u4f60\u662f\u770b\u4e0d\u898b\u4efb\u4f55\u6771\u897f\u7684!<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;body&gt;\n\t&lt;div class=\"box\"&gt;\n\t\t&lt;div class=\"one\"&gt;one&lt;\/div&gt;\n\t\t&lt;div class=\"two\"&gt;two&lt;\/div&gt;\n\t\t\n\t&lt;\/div&gt;\n\n&lt;\/body&gt;\n<\/code><\/pre>\n\n\n\n<p>\u56e0\u70ba &lt;div&gt; \u76d2\u5b50\u6a21\u578b\u5c31\u662f\u900f\u660e\u7684\uff0c\u6240\u4ee5\u6211\u5011\u5fc5\u9808\u65b9\u4fbf\u89c0\u5bdf\u8981\u8a2d\u7f6e\u4e00\u4e0b\u5bec\u5ea6\u8207\u9ad8\u5ea6\u9084\u6709\u80cc\u666f\u984f\u8272\u770b\u5f97\u898b\u76d2\u5b50\u5537! \u7236\u7d1a\u76d2\u5b50\u6a21\u578b box \u8a2d\u7f6e\u5bec\u5ea6 800px\u3001\u9ad8\u5ea6\u4e0d\u8981\u8a2d\u7f6e\u3001\u80cc\u666f\u984f\u8272\u7d05\u8272\uff0c\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b one \u8a2d\u7f6e\u5bec\u5ea6 200px\u3001\u9ad8\u5ea6 200px\u3001\u80cc\u666f\u984f\u8272\u8a2d\u7f6e\u7da0\u8272\u3001\u5de6\u6d6e\u52d5\uff0c\u53e6\u4e00\u500b\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b two \u8a2d\u7f6e\u5bec\u5ea6300px\u3001\u9ad8\u5ea6 300px\u3001\u80cc\u666f\u984f\u8272\u8a2d\u7f6e\u85cd\u8272\u3001\u5de6\u6d6e\u52d5\uff0c\u56de\u904e\u982d\u5230\u7236\u7d1a\u5143\u7d20\u628a\u5b83\u8a2d\u7f6e\u5728\u4e2d\u9593\u9084\u6709\u908a\u6846\u7d30\u7dda\u3002<\/p>\n\n\n\n<p>\u8a18\u5f97\u6700\u91cd\u8981\u7684\u662f\u5728\u7236\u7d1a\u6a19\u7c64\u8a2d\u7f6e\u4e00\u500b\u6211\u5011\u525b\u525b\u5b78\u7684 CSS \u5c6c\u6027 overflow\uff0c\u5c6c\u6027\u503c\u90a3 3 \u7a2e\u90fd\u53ef\u4ee5\u4f46\u662f\u524d\u7aef\u5de5\u7a0b\u5e2b\u6700\u5e38\u662f\u4f7f\u7528 hidden \u5c6c\u6027\u503c\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n\t.box {\n\t\twidth: 800px;\n\t\tbackground-color: red;\n\t\tborder: 1px soild black;\n\t\tmargin: 0 auto;\n\t\toverflow: hidden;\n}\n\t .one {\n\t\theight: 200px;\n\t\theight: 200px;\n\t\tbackground-color: green;\n\t\tfloat: left;\n\n}\n\t .two {\n\t\theight: 300px;\n\t\theight: 300px;\n\t\tbackground-color: blue;\n\t\tfloat: left;\n}\n\n&lt;\/style&gt;\n<\/code><\/pre>\n\n\n\n<p>\u7576\u4f60\u5beb\u5b8c CSS \u5b58\u6a94\u5f8c\u4f7f\u7528\u700f\u89bd\u5668\u6253\u958b\u6a94\u6848\uff0c\u4f60\u6703\u767c\u73fe\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b\u6703\u4e56\u4e56\u7684\u4e26\u5f98\u986f\u793a\u4e56\u4e56\u7684\uff0c\u800c\u7236\u7d1a\u76d2\u5b50\u6a21\u578b\u4e5f\u6703\u986f\u793a\u9ad8\u5ea6\u4e86! \u9019\u6a23\u5c31\u80fd\u5920\u5b8c\u6210\u6211\u5011\u4e00\u503c\u5f88\u56f0\u64fe\u7684\u554f\u984c\u5566! \u9019\u6a23\u4f60\u53c8\u5b78\u5230\u4e00\u7a2e\u65b9\u6cd5\u5566! \u597d\u50cf\u4e0d\u592a\u5c0d\u5537! \u9019\u65b9\u6cd5\u6211\u5011\u5728\u90a3\u7bc7 CSS \u6559\u5b78\u76d2\u5b50\u6a21\u578b\u90a3\u7bc7\u6587\u7ae0\u597d\u50cf\u7528\u904e\u5427! \u4f60\u9084\u8a18\u5f97\u55ce? <strong><span class=\"has-inline-color has-vivid-red-color\">\u5728\u5916\u908a\u8ddd\u5408\u4f75\u7684\u6642\u5019\u6211\u5011\u7528\u904e overflow<\/span><\/strong>\u3002<\/p>\n\n\n\n<p>\u9019 CSS \u8a9e\u6cd5\u592a\u5f37\u4e86\u53ef\u4ee5\u9632\u6b62\u5916\u908a\u8ddd\u5408\u4f75\u3001\u53c8\u80fd\u6e05\u9664\u6d6e\u52d5\uff0c\u5176\u5be6\u9084\u80fd\u505a\u7684\u7684\u4e8b\u60c5\u9084\u5f88\u591a\uff0c\u6211\u5011\u5c31\u5148\u7e7c\u7e8c\u8ce3\u95dc\u5b50\u4e00\u4e0b\u5427! \u9084\u4e0d\u662f\u6b63\u5f0f\u8981\u4ecb\u7d39\u5b83\u7684\u6642\u6a5f\uff0c\u73fe\u5728\u4f60\u53ea\u8981\u77e5\u9053\u5b83\u5f88\u731b\u5f88\u5f37\u5927\u5c31\u5c0d\u4e86!<\/p>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"%E7%88%B6%E7%B4%9A%E6%B7%BB%E5%8A%A0_CSS_%E5%B1%AC%E6%80%A7_overflow_%E5%84%AA%E7%BC%BA%E9%BB%9E%E5%88%86%E6%9E%90\"><\/span>\u7236\u7d1a\u6dfb\u52a0 CSS \u5c6c\u6027 overflow \u512a\u7f3a\u9ede\u5206\u6790<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"575\" src=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u7236\u7d1a\u6dfb\u52a0CSS\u5c6c\u6027overflow\u512a\u7f3a\u9ede\u5206\u6790.jpg?resize=1024%2C575&#038;ssl=1\" alt=\"\" class=\"wp-image-1643\" srcset=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u7236\u7d1a\u6dfb\u52a0CSS\u5c6c\u6027overflow\u512a\u7f3a\u9ede\u5206\u6790.jpg?resize=1024%2C575&amp;ssl=1 1024w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u7236\u7d1a\u6dfb\u52a0CSS\u5c6c\u6027overflow\u512a\u7f3a\u9ede\u5206\u6790.jpg?resize=300%2C168&amp;ssl=1 300w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u7236\u7d1a\u6dfb\u52a0CSS\u5c6c\u6027overflow\u512a\u7f3a\u9ede\u5206\u6790.jpg?resize=768%2C431&amp;ssl=1 768w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u7236\u7d1a\u6dfb\u52a0CSS\u5c6c\u6027overflow\u512a\u7f3a\u9ede\u5206\u6790.jpg?resize=1536%2C863&amp;ssl=1 1536w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u7236\u7d1a\u6dfb\u52a0CSS\u5c6c\u6027overflow\u512a\u7f3a\u9ede\u5206\u6790.jpg?w=2003&amp;ssl=1 2003w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" title=\"\" data-recalc-dims=\"1\"><\/figure>\n\n\n\n<ul><li><strong>\u512a\u9ede : \u4ee3\u78bc\u7c21\u6f54\u3001\u4f7f\u7528\u65b9\u4fbf<\/strong><\/li><li><strong>\u7f3a\u9ede : \u7121\u6cd5\u986f\u793a\u6ea2\u51fa\u90e8\u5206 ( \u5982\u679c\u76d2\u5b50\u9732\u51fa\u53bb\u6703\u76f4\u63a5\u5207\u6389 )<\/strong><\/li><\/ul>\n\n\n\n<h2><span class=\"ez-toc-section\" id=\"CSS_%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8B%95_-_%E7%88%B6%E7%B4%9A%E6%B7%BB%E5%8A%A0_after_%E5%81%BD%E5%85%83%E7%B4%A0\"><\/span>CSS \u6e05\u9664\u6d6e\u52d5 &#8211; \u7236\u7d1a\u6dfb\u52a0 after \u507d\u5143\u7d20<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"575\" src=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5_\u7236\u7d1a\u6dfb\u52a0after\u507d\u5143\u7d20.jpg?resize=1024%2C575&#038;ssl=1\" alt=\"\" class=\"wp-image-1644\" srcset=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5_\u7236\u7d1a\u6dfb\u52a0after\u507d\u5143\u7d20.jpg?resize=1024%2C575&amp;ssl=1 1024w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5_\u7236\u7d1a\u6dfb\u52a0after\u507d\u5143\u7d20.jpg?resize=300%2C168&amp;ssl=1 300w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5_\u7236\u7d1a\u6dfb\u52a0after\u507d\u5143\u7d20.jpg?resize=768%2C431&amp;ssl=1 768w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5_\u7236\u7d1a\u6dfb\u52a0after\u507d\u5143\u7d20.jpg?resize=1536%2C863&amp;ssl=1 1536w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5_\u7236\u7d1a\u6dfb\u52a0after\u507d\u5143\u7d20.jpg?w=2003&amp;ssl=1 2003w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" title=\"\" data-recalc-dims=\"1\"><\/figure>\n\n\n\n<p>\u63a5\u4e0b\u4f86\u6211\u5011\u4f86\u8ac7\u8ac7\u7b2c\u4e09\u7a2e\u65b9\u6cd5\uff0c<strong><span class=\"has-inline-color has-vivid-red-color\">\u7236\u7d1a\u6dfb\u52a0 after \u507d\u5143\u7d20<\/span><\/strong>\uff0c\u9019\u500b\u65b9\u6cd5\u5176\u5be6\u662f\u6a19\u7c64\u6cd5\u7684\u5347\u7d1a\u7248\u4e5f\u5c31\u662f\u706b\u529b\u52a0\u5f37\u7248\u800c\u5df2\uff0c\u5b83\u4e5f\u662f\u7d66\u7236\u7d1a\u76d2\u5b50\u6a21\u578b\u6dfb\u52a0\u4e00\u500b CSS \u5c6c\u6027\uff0c\u81f3\u65bc\u662f\u4ec0\u9ebc\u8a9e\u6cd5\u6211\u5011\u4f86\u770b\u770b\u5427!<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.clearfix:after {\n\tcontent: \"\";\n\tdisplay: block;\n\theight: 0;\n\tclear: both;\n\tvisibility: hidden;\n}\n\n.clearfix {\n\/*IE6\u3001IE7 \u5c08\u7528*\/\n\t*zoom: 1;\n}\n<\/code><\/pre>\n\n\n\n<p>\u4f60\u4e00\u770b\u5230\u9019\u4ee3\u78bc\u4e00\u5b9a\u50bb\u773c\u54c7\u8cfd\u8981\u6253\u9019\u9ebc\u4e00\u5927\u5768\uff0c\u6709\u4e9b\u4f60\u9084\u770b\u4e0d\u61c2\u662f\u4ec0\u9ebc\u610f\u601d\u4e5f&#8230;\u5176\u5be6\u4f60\u73fe\u5728\u53ea\u8981\u6703\u4f7f\u7528\u9019\u5768\u4ee3\u78bc\u5c31\u597d\uff0c\u53ea\u8981\u77e5\u9053\u6709\u9019\u65b9\u6cd5\u5c31\u53ef\u4ee5\u4e86\uff0c\u7576\u4f60\u77e5\u9053\u4ec0\u9ebc\u662f<strong>\u507d\u5143\u7d20<\/strong>\u4e4b\u5f8c\u6211\u5011\u624d\u6703\u53bb\u4ed4\u7d30\u7406\u89e3\u5730\u5e95\u9019\u5768\u6771\u897f\u8868\u9054\u7684\u610f\u601d\u5373\u53ef\u5537!<\/p>\n\n\n\n<p>\u6211\u5011\u4f86\u662f\u770b\u770b\u5427! \u9996\u5148\u5275\u5efa\u4e00\u500b\u5168\u65b0\u7684 HTML \u7d50\u69cb\u9aa8\u67b6\uff0c\u5728\u88e1\u982d\u65b0\u589e\u4e00\u500b &lt;div&gt; \u76d2\u5b50\u6a21\u578b\u6a19\u7c64\u4e26\u4f7f\u7528 class \u985e\u9078\u64c7\u5668\u547d\u540d\u70ba box \u9019\u4e00\u500b\u76d2\u5b50\u662f\u7236\u7d1a\u5143\u7d20\uff0c\u5728\u7236\u7d1a\u5143\u7d20\u88e1\u982d\u65b0\u589e 3 \u500b\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b\u6a19\u7c64 class \u985e\u9078\u64c7\u5668\u547d\u540d\u70ba one \u548c two\uff0c\u5b58\u6a94\u597d\u5f8c\u4f7f\u7528\u700f\u89bd\u5668\u6253\u958b\uff0c\u7576\u7136\u4f60\u662f\u770b\u4e0d\u898b\u4efb\u4f55\u6771\u897f\u7684!<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;body&gt;\n\t&lt;div class=\"box clearfix\"&gt;\n\t\t&lt;div class=\"one\"&gt;one&lt;\/div&gt;\n\t\t&lt;div class=\"two\"&gt;two&lt;\/div&gt;\n\t\t\n\t&lt;\/div&gt;\n\n&lt;\/body&gt;\n<\/code><\/pre>\n\n\n\n<p>\u56e0\u70ba &lt;div&gt; \u76d2\u5b50\u6a21\u578b\u5c31\u662f\u900f\u660e\u7684\uff0c\u6240\u4ee5\u6211\u5011\u5fc5\u9808\u65b9\u4fbf\u89c0\u5bdf\u8981\u8a2d\u7f6e\u4e00\u4e0b\u5bec\u5ea6\u8207\u9ad8\u5ea6\u9084\u6709\u80cc\u666f\u984f\u8272\u770b\u5f97\u898b\u76d2\u5b50\u5537! \u7236\u7d1a\u76d2\u5b50\u6a21\u578b box \u8a2d\u7f6e\u5bec\u5ea6 800px\u3001\u9ad8\u5ea6\u4e0d\u8981\u8a2d\u7f6e\u3001\u80cc\u666f\u984f\u8272\u7d05\u8272\uff0c\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b one \u8a2d\u7f6e\u5bec\u5ea6 200px\u3001\u9ad8\u5ea6 200px\u3001\u80cc\u666f\u984f\u8272\u8a2d\u7f6e\u7da0\u8272\u3001\u5de6\u6d6e\u52d5\uff0c\u53e6\u4e00\u500b\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b two \u8a2d\u7f6e\u5bec\u5ea6300px\u3001\u9ad8\u5ea6 300px\u3001\u80cc\u666f\u984f\u8272\u8a2d\u7f6e\u85cd\u8272\u3001\u5de6\u6d6e\u52d5\uff0c\u56de\u904e\u982d\u5230\u7236\u7d1a\u5143\u7d20\u628a\u5b83\u8a2d\u7f6e\u5728\u4e2d\u9593\u9084\u6709\u908a\u6846\u7d30\u7dda\u3002<\/p>\n\n\n\n<p>\u8a18\u5f97\u6700\u91cd\u8981\u7684\u662f\u5728\u628a\u525b\u525b\u90a3\u4e00\u5927\u5768 after \u507d\u5143\u7d20\u7d66\u8cbc\u9032\u5230 &lt;style&gt; \u6a19\u7c64\u88e1\u982d\uff0c\u9084\u8981\u8a18\u5f97\u5728\u7236\u7d1a\u76d2\u5b50\u6a21\u578b\u6a19\u7c64\u88e1\u982d\u7684 class \u5c6c\u6027\u5728\u88dc\u4e0a clearfix \u56e0\u70ba\u6211\u5011\u8981\u8abf\u7528\u9019\u4e00\u500b CSS \u5c6c\u6027\u5537! \u4e0d\u7136\u5beb\u4e86\u6c92\u7528\u7b49\u65bc\u6c92\u529f\u80fd<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n\t.clearfix:after {\n\t\tcontent: \"\";\n\t\tdisplay: block;\n\t\theight: 0;\n\t\tclear: both;\n\t\tvisibility: hidden;\n}\n\n\t.clearfix {\n\t\/*IE6\u3001IE7 \u5c08\u7528*\/\n\t\t*zoom: 1;\n}\n\t.box {\n\t\twidth: 800px;\n\t\tbackground-color: red;\n\t\tborder: 1px soild black;\n\t\tmargin: 0 auto;\n\n}\n\t .one {\n\t\theight: 200px;\n\t\theight: 200px;\n\t\tbackground-color: green;\n\t\tfloat: left;\n\n}\n\t .two {\n\t\theight: 300px;\n\t\theight: 300px;\n\t\tbackground-color: blue;\n\t\tfloat: left;\n}\n\n&lt;\/style&gt;\n<\/code><\/pre>\n\n\n\n<p>\u7576\u4f60\u5beb\u5b8c CSS \u5b58\u6a94\u5f8c\u4f7f\u7528\u700f\u89bd\u5668\u6253\u958b\u6a94\u6848\uff0c\u4f60\u6703\u767c\u73fe\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b\u6703\u4e56\u4e56\u7684\u4e26\u5f98\u986f\u793a\u4e56\u4e56\u7684\uff0c\u800c\u7236\u7d1a\u76d2\u5b50\u6a21\u578b\u4e5f\u6703\u986f\u793a\u9ad8\u5ea6\u4e86! \u9019\u6a23\u5c31\u80fd\u5920\u89e3\u6c7a\u6211\u5011\u4e00\u76f4\u5f88\u56f0\u64fe\u7684\u554f\u984c\u5566! \u9019\u6a23\u5b50\u4f60\u53c8\u6703\u5b78\u5230\u4e00\u7a2e\u65b9\u6cd5\u5566! \u4f46\u662f\u9019\u500b\u65b9\u6cd5\u662f\u4f7f\u7528\u5230\u507d\u5143\u7d20\u7684\u65b9\u6cd5\uff0c\u81f3\u65bc\u507d\u5143\u7d20\u6211\u5011\u9084\u6c92\u5b78\u5230\u4f60\u5148\u77e5\u9053\u6709\u9019\u65b9\u6cd5\u5c31\u53ef\u4ee5\u4e86\uff0c\u9019\u4e00\u500b\u4f5c\u6cd5\u4e5f\u662f\u5728\u6700\u5f8c\u4e00\u500b\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b\u65b0\u589e\u4e00\u500b\u900f\u660e\u7684\u76d2\u5b50\u5537\uff0c\u5c31\u662f\u751f\u6210\u96b1\u5f62\u76d2\u5b50\u4f46\u662f\u662f\u4f7f\u7528 CSS \u53bb\u751f\u6210\u3002<\/p>\n\n\n\n<a class=\"btn_CTA\" href=\"https:\/\/learningnow.com.tw\/affiliate-marketing-make-money\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u9ede\u6211\u77ad\u89e3 \u5c0f\u9752\u5982\u4f55\u6bcf\u6708\u591a\u8cfa5\u4f4d\u6578\u53f0\u5e63<\/a>\n\n\n\n<p><\/p>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"%E7%88%B6%E7%B4%9A%E6%B7%BB%E5%8A%A0_after_%E5%81%BD%E5%85%83%E7%B4%A0%E5%84%AA%E7%BC%BA%E9%BB%9E%E5%88%86%E6%9E%90\"><\/span>\u7236\u7d1a\u6dfb\u52a0 after \u507d\u5143\u7d20\u512a\u7f3a\u9ede\u5206\u6790<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"575\" src=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u7236\u7d1a\u6dfb\u52a0after\u507d\u5143\u7d20\u512a\u7f3a\u9ede\u5206\u6790.jpg?resize=1024%2C575&#038;ssl=1\" alt=\"\" class=\"wp-image-1645\" srcset=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u7236\u7d1a\u6dfb\u52a0after\u507d\u5143\u7d20\u512a\u7f3a\u9ede\u5206\u6790.jpg?resize=1024%2C575&amp;ssl=1 1024w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u7236\u7d1a\u6dfb\u52a0after\u507d\u5143\u7d20\u512a\u7f3a\u9ede\u5206\u6790.jpg?resize=300%2C168&amp;ssl=1 300w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u7236\u7d1a\u6dfb\u52a0after\u507d\u5143\u7d20\u512a\u7f3a\u9ede\u5206\u6790.jpg?resize=768%2C431&amp;ssl=1 768w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u7236\u7d1a\u6dfb\u52a0after\u507d\u5143\u7d20\u512a\u7f3a\u9ede\u5206\u6790.jpg?resize=1536%2C863&amp;ssl=1 1536w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u7236\u7d1a\u6dfb\u52a0after\u507d\u5143\u7d20\u512a\u7f3a\u9ede\u5206\u6790.jpg?w=2003&amp;ssl=1 2003w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" title=\"\" data-recalc-dims=\"1\"><\/figure>\n\n\n\n<ul><li><strong>\u512a\u9ede : \u6c92\u6709\u6dfb\u52a0\u584a\u7d1a\u6a19\u7c64\u5143\u7d20\uff0c\u4f7f HTML \u7d50\u69cb\u66f4\u7c21\u6f54<\/strong><\/li><li><strong>\u7f3a\u9ede : \u7121\u6cd5\u7167\u9867\u5230\u4f4e\u7248\u672c\u700f\u89bd\u5668\uff0c\u6216\u662f\u4e0d\u77e5\u540d\u700f\u89bd\u5668<\/strong><\/li><\/ul>\n\n\n\n<h2><span class=\"ez-toc-section\" id=\"CSS_%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8B%95_-_%E7%88%B6%E7%B4%9A%E6%B7%BB%E5%8A%A0%E9%9B%99%E5%81%BD%E5%85%83%E7%B4%A0\"><\/span>CSS \u6e05\u9664\u6d6e\u52d5 &#8211; \u7236\u7d1a\u6dfb\u52a0\u96d9\u507d\u5143\u7d20<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"575\" src=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5_\u7236\u7d1a\u6dfb\u52a0\u96d9\u507d\u5143\u7d20.jpg?resize=1024%2C575&#038;ssl=1\" alt=\"\" class=\"wp-image-1646\" srcset=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5_\u7236\u7d1a\u6dfb\u52a0\u96d9\u507d\u5143\u7d20.jpg?resize=1024%2C575&amp;ssl=1 1024w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5_\u7236\u7d1a\u6dfb\u52a0\u96d9\u507d\u5143\u7d20.jpg?resize=300%2C168&amp;ssl=1 300w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5_\u7236\u7d1a\u6dfb\u52a0\u96d9\u507d\u5143\u7d20.jpg?resize=768%2C431&amp;ssl=1 768w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5_\u7236\u7d1a\u6dfb\u52a0\u96d9\u507d\u5143\u7d20.jpg?resize=1536%2C863&amp;ssl=1 1536w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5_\u7236\u7d1a\u6dfb\u52a0\u96d9\u507d\u5143\u7d20.jpg?w=2003&amp;ssl=1 2003w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" title=\"\" data-recalc-dims=\"1\"><\/figure>\n\n\n\n<p>\u63a5\u4e0b\u4f86\u4f86\u8a0e\u8ad6\u7b2c 4 \u7a2e\u65b9\u6cd5\u4e5f\u662f\u6700\u5f8c\u4e00\u7a2e\u65b9\u6cd5\u4e86\uff0c\u9019\u7a2e\u65b9\u5f0f\u4e5f\u662f\u7d66\u7236\u7d1a\u5143\u7d20\u6dfb\u52a0\u4e00\u6bb5 CSS \u8a9e\u6cd5\uff0c\u6211\u5011\u4f86\u770b\u770b\u8a9e\u6cd5\u662f\u4ec0\u9ebc\u5427!<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.clearfix:before, .clearfix:after {\n\tcontent: \"\";\n\tdisplay: table;\n\n}\n.clearfix:after {\n\tclear: both;\n}\n.clearfix {\n\/*IE6\u3001IE7 \u5c08\u7528*\/\n\t*zoom:1;\n}\n<\/code><\/pre>\n\n\n\n<p>\u54c7\u52d2!!! \u4e5f\u662f\u4e00\u5927\u5768\uff0c\u4f46\u662f\u4f60\u4ed4\u7d30\u770b\u4f60\u5176\u5be6\u662f\u53ef\u4ee5\u770b\u5f97\u61c2\u7684\uff0c\u4e00\u6a23\u505a\u6cd5\u4e5f\u662f\u65b0\u589e\u4e00\u9053\u7246\uff0c\u901a\u904e\u4e0a\u4e00\u7bc0\u505a\u6cd5\u6211\u77e5\u9053\u507d\u5143\u7d20\u5c31\u662f\u6703\u63d2\u5165\u4e00\u9053\u7246\uff0c\u90a3\u4f60\u770b\u5230\u9019\u6b21\u5beb before \u662f\u524d\u9762\u7684\u610f\u601d\uff0c\u800c after \u662f\u5f8c\u9762\u7684\u610f\u601d\uff0c\u90a3\u6211\u5011\u53ef\u4ee5\u731c\u5c31\u662f<strong><span class=\"has-inline-color has-vivid-red-color\">\u524d\u9762\u585e\u4e00\u9053\u7246\u3001\u5f8c\u9762\u4e5f\u585e\u4e00\u9053\u7246\u5c0d\u55ce?<\/span><\/strong> \u6c92\u932f\u5537! \u5c31\u662f\u9019\u6a23\uff0c\u4e5f\u5c31\u662f\u8aaa\u5728\u7236\u7d1a\u76d2\u5b50\u6a21\u578b\u5143\u7d20\u7684\u5167\u90e8\u524d\u9762\u548c\u5f8c\u9762\u90fd\u6ce8\u5165\u4e00\u5230\u7246\uff0c\u9019\u6a23\u6d6e\u52d5 ( \u7a7a\u4e2d\u4eba ) \u5c31\u4e0d\u6703\u5f80\u524d\u8dd1\u6216\u662f\u5f80\u5f8c\u8dd1\u4e86\u3002<\/p>\n\n\n\n<p>\u6211\u5011\u4f86\u662f\u770b\u770b\u5427! \u9996\u5148\u5275\u5efa\u4e00\u500b\u5168\u65b0\u7684 HTML \u7d50\u69cb\u9aa8\u67b6\uff0c\u5728\u88e1\u982d\u65b0\u589e\u4e00\u500b &lt;div&gt; \u76d2\u5b50\u6a21\u578b\u6a19\u7c64\u4e26\u4f7f\u7528 class \u985e\u9078\u64c7\u5668\u547d\u540d\u70ba box \u9019\u4e00\u500b\u76d2\u5b50\u662f\u7236\u7d1a\u5143\u7d20\uff0c\u5728\u7236\u7d1a\u5143\u7d20\u88e1\u982d\u65b0\u589e 3 \u500b\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b\u6a19\u7c64 class\u985e\u9078\u64c7\u5668\u547d\u540d\u70ba one \u548c two\uff0c\u5b58\u6a94\u597d\u5f8c\u4f7f\u7528\u700f\u89bd\u5668\u6253\u958b\uff0c\u7576\u7136\u4f60\u662f\u770b\u4e0d\u898b\u4efb\u4f55\u6771\u897f\u7684!<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;body&gt;\n\t&lt;div class=\"box clearfix\"&gt;\n\t\t&lt;div class=\"one\"&gt;one&lt;\/div&gt;\n\t\t&lt;div class=\"two\"&gt;two&lt;\/div&gt;\n\t\t\n\t&lt;\/div&gt;\n\n&lt;\/body&gt;\n<\/code><\/pre>\n\n\n\n<p>\u56e0\u70ba &lt;div&gt; \u76d2\u5b50\u6a21\u578b\u5c31\u662f\u900f\u660e\u7684\uff0c\u6240\u4ee5\u6211\u5011\u5fc5\u9808\u65b9\u4fbf\u89c0\u5bdf\u8981\u8a2d\u7f6e\u4e00\u4e0b\u5bec\u5ea6\u8207\u9ad8\u5ea6\u9084\u6709\u80cc\u666f\u984f\u8272\u770b\u5f97\u898b\u76d2\u5b50\u5537! \u7236\u7d1a\u76d2\u5b50\u6a21\u578b box \u8a2d\u7f6e\u5bec\u5ea6 800px\u3001\u9ad8\u5ea6\u4e0d\u8981\u8a2d\u7f6e\u3001\u80cc\u666f\u984f\u8272\u7d05\u8272\uff0c\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b one \u8a2d\u7f6e\u5bec\u5ea6 200px\u3001\u9ad8\u5ea6 200px\u3001\u80cc\u666f\u984f\u8272\u8a2d\u7f6e\u7da0\u8272\u3001\u5de6\u6d6e\u52d5\uff0c\u53e6\u4e00\u500b\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b two \u8a2d\u7f6e\u5bec\u5ea6300px\u3001\u9ad8\u5ea6 300px\u3001\u80cc\u666f\u984f\u8272\u8a2d\u7f6e\u85cd\u8272\u3001\u5de6\u6d6e\u52d5\uff0c\u56de\u904e\u982d\u5230\u7236\u7d1a\u5143\u7d20\u628a\u5b83\u8a2d\u7f6e\u5728\u4e2d\u9593\u9084\u6709\u908a\u6846\u7d30\u7dda\u3002<\/p>\n\n\n\n<p>\u8a18\u5f97\u6700\u91cd\u8981\u7684\u662f\u5728\u628a\u525b\u525b\u90a3\u4e00\u5927\u5768\u96d9\u507d\u5143\u7d20\u7d66\u8cbc\u9032\u5230 &lt;style&gt; \u6a19\u7c64\u88e1\u982d\uff0c\u9084\u8981\u8a18\u5f97\u5728\u7236\u7d1a\u76d2\u5b50\u6a21\u578b\u6a19\u7c64\u88e1\u982d\u7684 class \u5c6c\u6027\u5728\u88dc\u4e0a clearfix \u56e0\u70ba\u6211\u5011\u8981\u8abf\u7528\u9019\u4e00\u500b CSS \u5c6c\u6027\u5537! \u4e0d\u7136\u5beb\u4e86\u6c92\u7528\u7b49\u65bc\u6c92\u529f\u80fd\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n\t.clearfix:before, .clearfix:after {\n\t\tcontent: \"\";\n\t\tdisplay: table;\n\n}\n\t.clearfix:after {\n\t\tclear: both;\n}\n\t.clearfix {\n\t\/*IE6\u3001IE7 \u5c08\u7528*\/\n\t\t*zoom:1;\n}\n\t.box {\n\t\twidth: 800px;\n\t\tbackground-color: red;\n\t\tborder: 1px soild black;\n\t\tmargin: 0 auto;\n\n}\n\t .one {\n\t\theight: 200px;\n\t\theight: 200px;\n\t\tbackground-color: green;\n\t\tfloat: left;\n\n}\n\t .two {\n\t\theight: 300px;\n\t\theight: 300px;\n\t\tbackground-color: blue;\n\t\tfloat: left;\n}\n\n&lt;\/style&gt;\n<\/code><\/pre>\n\n\n\n<p>\u7576\u4f60\u5beb\u5b8c CSS \u5b58\u6a94\u5f8c\u4f7f\u7528\u700f\u89bd\u5668\u6253\u958b\u6a94\u6848\uff0c\u4f60\u6703\u767c\u73fe\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b\u6703\u4e56\u4e56\u7684\u4e26\u5f98\u986f\u793a\u4e56\u4e56\u7684\uff0c\u800c\u7236\u7d1a\u76d2\u5b50\u6a21\u578b\u4e5f\u6703\u986f\u793a\u9ad8\u5ea6\u4e86! \u9019\u6a23\u5c31\u80fd\u5920\u5b8c\u6210\u6211\u5011\u4e00\u76f4\u5f88\u56f0\u64fe\u7684\u554f\u984c\u5566! \u9019\u6a23\u4f60\u53c8\u6703\u5b78\u5230\u4e00\u7a2e\u65b9\u6cd5\u5566! \u4f46\u662f\u9019\u500b\u65b9\u6cd5\u662f\u4f7f\u7528\u5230\u96d9\u507d\u5143\u7d20\u7684\u65b9\u6cd5\uff0c\u81f3\u65bc\u507d\u5143\u7d20\u6211\u5011\u9084\u6c92\u5b78\u5230\u4f60\u5148\u77e5\u9053\u6709\u9019\u65b9\u6cd5\u5c31\u53ef\u4ee5\u4e86\uff0c\u9019\u4e00\u500b\u4f5c\u6cd5\u662f\u5728\u7236\u7d1a\u5143\u7d20\u88e1\u7684\u5167\u90e8\u65b0\u589e 2 \u500b\u900f\u660e\u7684\u76d2\u5b50\uff0c\u4e00\u500b\u5728 before ( \u524d ) \u4e00\u500b\u5728 after ( \u5f8c )\uff0c\u5c31\u662f\u751f\u6210\u96b1\u5f62\u76d2\u5b50\u4f46\u662f\u662f\u4f7f\u7528 CSS \u53bb\u751f\u6210\u3002<\/p>\n\n\n\n<a class=\"btn_CTA\" href=\"https:\/\/learningnow.com.tw\/affiliate-marketing-make-money\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u9ede\u6211\u77ad\u89e3 \u5c0f\u9752\u5982\u4f55\u6bcf\u6708\u591a\u8cfa5\u4f4d\u6578\u53f0\u5e63<\/a>\n\n\n\n<p><\/p>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"%E7%88%B6%E7%B4%9A%E6%B7%BB%E5%8A%A0%E9%9B%99%E5%81%BD%E5%85%83%E7%B4%A0%E5%84%AA%E7%BC%BA%E9%BB%9E%E5%88%86%E6%9E%90\"><\/span>\u7236\u7d1a\u6dfb\u52a0\u96d9\u507d\u5143\u7d20\u512a\u7f3a\u9ede\u5206\u6790<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"575\" src=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u7236\u7d1a\u6dfb\u52a0\u96d9\u507d\u5143\u7d20\u512a\u7f3a\u9ede\u5206\u6790.jpg?resize=1024%2C575&#038;ssl=1\" alt=\"\" class=\"wp-image-1647\" srcset=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u7236\u7d1a\u6dfb\u52a0\u96d9\u507d\u5143\u7d20\u512a\u7f3a\u9ede\u5206\u6790.jpg?resize=1024%2C575&amp;ssl=1 1024w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u7236\u7d1a\u6dfb\u52a0\u96d9\u507d\u5143\u7d20\u512a\u7f3a\u9ede\u5206\u6790.jpg?resize=300%2C168&amp;ssl=1 300w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u7236\u7d1a\u6dfb\u52a0\u96d9\u507d\u5143\u7d20\u512a\u7f3a\u9ede\u5206\u6790.jpg?resize=768%2C431&amp;ssl=1 768w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u7236\u7d1a\u6dfb\u52a0\u96d9\u507d\u5143\u7d20\u512a\u7f3a\u9ede\u5206\u6790.jpg?resize=1536%2C863&amp;ssl=1 1536w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_\u7236\u7d1a\u6dfb\u52a0\u96d9\u507d\u5143\u7d20\u512a\u7f3a\u9ede\u5206\u6790.jpg?w=2003&amp;ssl=1 2003w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" title=\"\" data-recalc-dims=\"1\"><\/figure>\n\n\n\n<ul><li><strong>\u512a\u9ede : \u6c92\u6709\u6dfb\u52a0\u584a\u7d1a\u6a19\u7c64\u5143\u7d20\uff0c\u4f7f HTML \u7d50\u69cb\u66f4\u7c21\u6f54<\/strong><\/li><li><strong>\u512a\u9ede : \u4f7f\u7528\u65b9\u5f0f\u6bd4 after \u507d\u5143\u7d20\u65b9\u6cd5\u7c21\u55ae<\/strong><\/li><li><strong>\u7f3a\u9ede : \u7121\u6cd5\u7167\u9867\u5230\u4f4e\u7248\u672c\u700f\u89bd\u5668\uff0c\u6216\u662f\u4e0d\u77e5\u540d\u700f\u89bd\u5668<\/strong><\/li><\/ul>\n\n\n\n<h2><span class=\"ez-toc-section\" id=\"CSS_%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8B%95%E7%B8%BD%E7%B5%90\"><\/span>CSS \u6e05\u9664\u6d6e\u52d5\u7e3d\u7d50<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"575\" src=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5\u7e3d\u7d50.jpg?resize=1024%2C575&#038;ssl=1\" alt=\"\" class=\"wp-image-1626\" srcset=\"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5\u7e3d\u7d50.jpg?resize=1024%2C575&amp;ssl=1 1024w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5\u7e3d\u7d50.jpg?resize=300%2C168&amp;ssl=1 300w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5\u7e3d\u7d50.jpg?resize=768%2C431&amp;ssl=1 768w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5\u7e3d\u7d50.jpg?resize=1536%2C863&amp;ssl=1 1536w, https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6559\u5b78_CSS\u6e05\u9664\u6d6e\u52d5\u7e3d\u7d50.jpg?w=2003&amp;ssl=1 2003w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" title=\"\" data-recalc-dims=\"1\"><\/figure>\n\n\n\n<p>\u9019\u7bc7 CSS \u6559\u5b78\u6587\u7ae0\u5f88\u9577\u4e5f\u5beb\u4e86\u5f88\u591a\u7bc7\u5e45\uff0c\u6700\u5f8c\u6211\u5011\u4f86\u5e6b CSS \u6d6e\u52d5\u505a\u500b\u7e3d\u7d50\u5427! <strong><span class=\"has-inline-color has-vivid-red-color\">\u70ba\u4ec0\u9ebc\u9700\u8981\u6e05\u9664\u6d6e\u52d5\u6211\u60f3\u4f60\u61c9\u8a72\u77e5\u9053\u7b54\u6848\u4e86<\/span><\/strong>\uff0c\u5c0f\u9752\u6211\u6b78\u7d0d\u51fa 3 \u500b\u91cd\u9ede\u6eff\u8db3\u9019\u5e7e\u9ede\u5f8c\uff0c\u4f60\u624d\u80fd\u5b8c\u6574\u500b\u5448\u73fe\u51fa\u7236\u7d1a\u76d2\u5b50\u6a21\u578b\u662f\u6a19\u6e96\u6d41 ( \u4e0a\u81f3\u4e0b )\u3001\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b\u662f\u6d6e\u52d5 ( \u5de6\u81f3\u53f3 )<\/p>\n\n\n\n<ol><li><strong>\u7236\u7d1a\u76d2\u5b50\u6a21\u578b\u5fc5\u9808\u4e0d\u8a2d\u7f6e\u9ad8\u5ea6<\/strong><\/li><li><strong>\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b\u5fc5\u9808\u8a2d\u7f6e\u6d6e\u52d5<\/strong><\/li><li><strong>\u7531\u65bc\u6d6e\u52d5\u5f8c\u7684\u5b50\u7d1a\u76d2\u5b50\u6a21\u578b\uff0c\u6703\u98c4\u8d70\u6240\u4ee5\u9700\u8981\u4f7f\u7528\u6e05\u9664\u6d6e\u52d5 ( \u65b9\u6cd5\u6709\u56db\u7a2e )<\/strong><\/li><\/ol>\n\n\n\n<figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td><strong>\u6e05\u9664\u6d6e\u52d5\u7684\u7b56\u7565\u65b9\u6cd5<\/strong><\/td><td><strong>\u512a\u9ede<\/strong><\/td><td><strong>\u7f3a\u9ede<\/strong><\/td><\/tr><tr><td>\u984d\u5916\u6a19\u7c64\u6cd5(\u9694\u7246\u6cd5)<\/td><td>\u901a\u4fd7\u6613\u61c2\u3001\u64b0\u5beb\u65b9\u4fbf<\/td><td>\u6dfb\u52a0\u8a31\u591a\u7a7a\u6a19\u7c64\u3001HTML\u7d50\u69cb\u5dee<\/td><\/tr><tr><td>\u7236\u7d1aoverflow:hidden;<\/td><td>\u64b0\u5beb\u7c21\u55ae\u4ee3\u78bc\u7c21\u6f54<\/td><td>\u6ea2\u51fa\u6703\u88ab\u5361\u6389<\/td><\/tr><tr><td>\u7236\u7d1aafter\u507d\u5143\u7d20<\/td><td>HTML \u7d50\u69cb\u66f4\u7c21\u6f54<\/td><td>\u4e0d\u592a\u652f\u63f4\u4e0d\u77e5\u540d\u700f\u89bd\u5668<\/td><\/tr><tr><td>\u7236\u7d1a\u96d9\u507d\u5143\u7d20<\/td><td>HTML \u7d50\u69cb\u66f4\u7c21\u6f54<\/td><td>\u4e0d\u592a\u652f\u63f4\u4e0d\u77e5\u540d\u700f\u89bd\u5668<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<a class=\"btn_CTA\" href=\"https:\/\/learningnow.com.tw\/affiliate-marketing-make-money\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u9ede\u6211\u77ad\u89e3 \u5c0f\u9752\u5982\u4f55\u6bcf\u6708\u591a\u8cfa5\u4f4d\u6578\u53f0\u5e63<\/a>\n","protected":false},"excerpt":{"rendered":"<p>\u901a\u904e\u4e0a\u4e00\u6b21\u7684 CSS \u6559\u5b78\u6211\u5011\u5b78\u7fd2\u4e86 CSS \u76d2\u5b50\u6a21\u578b\uff0c\u5df2\u7d93\u80fd\u5920\u5c0d\u4e00\u500b\u5340\u57df\u9032\u884c\u4f48\u5c40\u4e86\u4f46\u662f\u7db2\u9801\u5f88\u5927\uff0c\u7db2\u9801\u4e5f\u662f\u85c9\u7531 &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/learningnow.com.tw\/css-float\/\"> <span class=\"screen-reader-text\">\u3010CSS\u6559\u5b78\u3011Day10 \u2013 CSS\u6d6e\u52d5\u5982\u4f55\u5f71\u97ff\u4f48\u5c40?\u4f60\u77e5\u9053\u6d6e\u52d5\u7684\u91cd\u8981\u55ce? (\u8a73\u7d30\u89e3\u8aaa)<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":1651,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true},"categories":[16,7],"tags":[],"modified_by":"\u5c0f\u9752","jetpack_featured_media_url":"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u6d6e\u52d5.jpg?fit=2003%2C1125&ssl=1","jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":1655,"url":"https:\/\/learningnow.com.tw\/css-position\/","url_meta":{"origin":1621,"position":0},"title":"\u3010CSS\u6559\u5b78\u3011Day11 \u2013 CSS\u5b9a\u4f4d\u5230\u5e95\u6709\u4ec0\u9ebc\u7528?\u4f60\u77e5\u9053\u5b9a\u4f4d\u7684\u91cd\u8981\u55ce? (\u8a73\u7d30\u89e3\u8aaa)","date":"2020 \u5e74 12 \u6708 30 \u65e5","format":false,"excerpt":"CSS \u6559\u5b78\u4e2d CSS \u5b9a\u4f4d\u61c9\u8a72\u53ef\u4ee5\u8aaa\u662f\u6700\u91cd\u8981\u7684\u90e8\u5206\uff0c\u4f46\u662f\u4f60\u8981\u5148\u60f3\u60f3\u70ba\u4ec0\u9ebc\u9700\u8981\u5b78\u7fd2 CSS \u5b9a\u4f4d\u5c31\u7b97\u2026","rel":"","context":"\u5728\u300c\u6280\u80fd\u300d\u4e2d","img":{"alt_text":"CSS\u5b9a\u4f4d","src":"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u5b9a\u4f4d.jpg?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1556,"url":"https:\/\/learningnow.com.tw\/css-box-model\/","url_meta":{"origin":1621,"position":1},"title":"\u3010CSS\u6559\u5b78\u3011Day09\u2013 CSS\u76d2\u5b50\u6a21\u578b\u5982\u4f55\u4f7f\u7528?\u4f60\u77e5\u9053\u76d2\u5b50\u7684\u7d44\u6210\u55ce? (\u8a73\u7d30\u89e3\u8aaa)","date":"2020 \u5e74 12 \u6708 5 \u65e5","format":false,"excerpt":"\u5728 CSS \u6559\u5b78\u4e2d\u6700\u91cd\u8981\u7684\u6838\u5fc3\u90e8\u5206\u61c9\u8a72\u53ef\u4ee5\u8aaa\u662f\u76d2\u5b50\u6a21\u578b ( Box Model ) \u4e86\uff0c\u5982\u679c\u4f60\u5b78\u7fd2\u597d\u2026","rel":"","context":"\u5728\u300c\u6280\u80fd\u300d\u4e2d","img":{"alt_text":"CSS\u76d2\u5b50\u6a21\u578b","src":"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u76d2\u5b50\u6a21\u578b.jpg?fit=1200%2C674&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1539,"url":"https:\/\/learningnow.com.tw\/css-features\/","url_meta":{"origin":1621,"position":2},"title":"\u3010CSS\u6559\u5b78\u3011Day08\u2013 CSS\u6709\u4ec0\u9ebc\u7279\u6027?\u4f60\u77e5\u9053\u7279\u6027\u6703\u5f71\u97ff\u4ec0\u9ebc\u55ce? (\u8a73\u7d30\u89e3\u8aaa)","date":"2020 \u5e74 12 \u6708 3 \u65e5","format":false,"excerpt":"\u63a5\u4e0b\u4f86\u7684 CSS \u6559\u5b78\u6211\u5011\u4f86\u5b78\u7fd2 CSS \u7684\u4e09\u5927\u7279\u6027\uff0c\u70ba\u4ec0\u9ebc\u8981\u5b78\u7fd2\u9019\u4e09\u5927\u7279\u6027\u5462? \u9019\u662f\u56e0\u70ba\u4f60\u5230\u6642\u5019\u5728\u2026","rel":"","context":"\u5728\u300cCSS\u5b78\u7fd2\u6307\u5357\u300d\u4e2d","img":{"alt_text":"CSS\u7279\u6027","src":"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u7279\u6027.jpg?fit=1200%2C674&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1499,"url":"https:\/\/learningnow.com.tw\/css-background\/","url_meta":{"origin":1621,"position":3},"title":"\u3010CSS\u6559\u5b78\u3011Day07 \u2013 CSS\u7684\u80cc\u666f\u5982\u4f55\u4f7f\u7528?\u4f60\u77e5\u9053\u80cc\u666f\u6709\u5e7e\u7a2e\u55ce? (\u8a73\u7d30\u89e3\u8aaa)","date":"2020 \u5e74 12 \u6708 1 \u65e5","format":false,"excerpt":"\u63a5\u4e0b\u4f86\u7684 CSS \u6559\u5b78\u6211\u5011\u4f86\u4e86\u89e3\u4e00\u4e0b CSS \u7684\u80cc\u666f\u8a2d\u7f6e\uff0c\u5728 CSS \u7576\u4e2d\u6211\u5011\u53ef\u4ee5\u901a\u904e\u7d66\u4e88 CSS \u2026","rel":"","context":"\u5728\u300cCSS\u5b78\u7fd2\u6307\u5357\u300d\u4e2d","img":{"alt_text":"CSS\u80cc\u666f","src":"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u80cc\u666f.jpg?fit=1200%2C674&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1470,"url":"https:\/\/learningnow.com.tw\/css-display-mode\/","url_meta":{"origin":1621,"position":4},"title":"\u3010CSS\u6559\u5b78\u3011Day06 \u2013 CSS\u986f\u793a\u6a21\u5f0f\uff0c\u4f60\u77e5\u9053\u5143\u7d20\u80fd\u4e92\u76f8\u8f49\u63db\u55ce? (\u8a73\u7d30\u89e3\u8aaa)","date":"2020 \u5e74 12 \u6708 1 \u65e5","format":false,"excerpt":"\u5728\u9019\u6b21\u7684 CSS \u6559\u5b78\u70ba\u4ec0\u9ebc\u6211\u5011\u9700\u8981\u5b78\u7fd2\u548c\u4e86\u89e3\u5143\u7d20\u7684\u986f\u793a\u6a21\u5f0f\u5462? \u5728\u4f60\u5be6\u969b\u4e0a\u61c9\u7528\u6642\u4f60\u662f\u4e0d\u662f\u5df2\u7d93\u958b\u59cb\u6ce8\u2026","rel":"","context":"\u5728\u300cCSS\u5b78\u7fd2\u6307\u5357\u300d\u4e2d","img":{"alt_text":"CSS\u986f\u793a\u6a21\u5f0f","src":"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/12\/CSS\u986f\u793a\u6a21\u5f0f.jpg?fit=1200%2C674&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1329,"url":"https:\/\/learningnow.com.tw\/what-is-css\/","url_meta":{"origin":1621,"position":5},"title":"\u3010CSS\u6307\u5357\u3011Day01 &#8211; CSS\u662f\u4ec0\u9ebc?\u5165\u9580\u4e00\u5b9a\u8981\u5148\u77e5\u9053\u9019\u4e9b\u898f\u5247 (\u6700\u8a73\u7d30\u8aaa\u660e)","date":"2020 \u5e74 11 \u6708 19 \u65e5","format":false,"excerpt":"\u70ba\u4ec0\u9ebc\u5b78\u7fd2\u5b8c HTML \u9084\u9700\u8981\u5b78\u7fd2 CSS \u6280\u8853\u5462? \u5f88\u591a\u4eba\u53ef\u80fd\u6703\u6709\u9019\u500b\u7591\u554f\u4e00\u76f4\u5f88\u56f0\u60d1\u8457\u8aaa\u5b78\u5b8c HT\u2026","rel":"","context":"\u5728\u300cCSS\u5b78\u7fd2\u6307\u5357\u300d\u4e2d","img":{"alt_text":"CSS\u662f\u4ec0\u9ebc","src":"https:\/\/i0.wp.com\/learningnow.com.tw\/wp-content\/uploads\/2020\/11\/CSS\u662f\u4ec0\u9ebc.jpg?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/learningnow.com.tw\/wp-json\/wp\/v2\/posts\/1621"}],"collection":[{"href":"https:\/\/learningnow.com.tw\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learningnow.com.tw\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learningnow.com.tw\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/learningnow.com.tw\/wp-json\/wp\/v2\/comments?post=1621"}],"version-history":[{"count":0,"href":"https:\/\/learningnow.com.tw\/wp-json\/wp\/v2\/posts\/1621\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/learningnow.com.tw\/wp-json\/wp\/v2\/media\/1651"}],"wp:attachment":[{"href":"https:\/\/learningnow.com.tw\/wp-json\/wp\/v2\/media?parent=1621"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learningnow.com.tw\/wp-json\/wp\/v2\/categories?post=1621"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learningnow.com.tw\/wp-json\/wp\/v2\/tags?post=1621"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}