CSS\uff0bDIV\u662f\u7f51\u7ad9\u6807\u51c6\uff08\u6216\u79f0\u201cWEB\u6807\u51c6\u201d\uff09\u4e2d\u5e38\u7528\u7684\u672f\u8bed\u4e4b\u4e00\uff0c\u901a\u5e38\u4e3a\u4e86\u8bf4\u660e\u4e0e HTML\u7f51\u9875\u8bbe\u8ba1\u8bed\u8a00\u4e2d\u7684\u8868\u683c\uff08table\uff09\u5b9a\u4f4d\u65b9\u5f0f\u7684\u533a\u522b\uff0c\u56e0\u4e3aXHTML\u7f51\u7ad9\u8bbe\u8ba1\u6807\u51c6\u4e2d\uff0c\u4e0d\u518d\u4f7f\u7528\u8868\u683c\u5b9a\u4f4d\u6280\u672f\uff0c\u800c\u662f\u91c7\u7528css+div\u7684\u65b9\u5f0f\u5b9e\u73b0\u5404\u79cd\u5b9a\u4f4d\u3002\u5e94\u7528\u5e94\u7528DIV+CSS\u7f16\u7801\u65f6\u5f88\u5bb9\u6613\u72af\u4e00\u4e9b\u9519\u8bef\u3002\u672c\u6587\u5217\u4e3e\u4e86\u4e00\u4e9b\u5e38\u89c1\u7684\u9519\u8bef\uff1a<\/p>\n
1. \u68c0\u67e5HTML\u5143\u7d20\u662f\u5426\u6709\u62fc\u5199\u9519\u8bef\u3001\u662f\u5426\u5fd8\u8bb0\u7ed3\u675f\u6807\u8bb0<\/p>\n
\u5373\u4f7f\u662f\u8001\u624b\u4e5f\u7ecf\u5e38\u4f1a\u5f04\u9519div\u7684\u5d4c\u5957\u5173\u7cfb\u3002\u53ef\u4ee5\u7528dreamweaver\u7684\u9a8c\u8bc1\u529f\u80fd\u68c0\u67e5\u4e00\u4e0b\u6709\u65e0\u9519\u8bef\u3002<\/p>\n
2. \u68c0\u67e5CSS\u662f\u5426\u6b63\u786e<\/p>\n
\u68c0\u67e5\u4e00\u4e0b\u6709\u65e0\u62fc\u5199\u9519\u8bef\u3001\u662f\u5426\u5fd8\u8bb0\u7ed3\u5c3e\u7684 } \u7b49\u3002\u53ef\u4ee5\u5229\u7528CleanCSS\u6765\u68c0\u67e5 CSS\u7684\u62fc\u5199\u9519\u8bef\u3002CleanCSS\u672c\u662f\u4e3aCSS\u51cf\u80a5\u7684\u5de5\u5177\uff0c\u4f46\u4e5f\u80fd\u68c0\u67e5\u51fa\u62fc\u5199\u9519\u8bef\u3002<\/p>\n
3. \u786e\u5b9a\u9519\u8bef\u53d1\u751f\u7684\u4f4d\u7f6e<\/p>\n
\u5982\u679c\u9519\u8bef\u5f71\u54cd\u4e86\u6574\u4f53\u5e03\u5c40\uff0c\u5219\u53ef\u4ee5\u9010\u4e2a\u5220\u9664div\u5757\uff0c\u76f4\u5230\u5220\u9664\u67d0\u4e2adiv\u5757\u540e\u663e\u793a\u6062\u590d\u6b63\u5e38\uff0c\u5373\u53ef\u786e\u5b9a\u9519\u8bef\u53d1\u751f\u7684\u4f4d\u7f6e\u3002<\/p>\n
4. \u5229\u7528border\u5c5e\u6027\u786e\u5b9a\u51fa\u9519\u5143\u7d20\u7684\u5e03\u5c40\u7279\u6027<\/p>\n
\u4f7f\u7528float\u5c5e\u6027\u5e03\u5c40\u4e00\u4e0d\u5c0f\u5fc3\u5c31\u4f1a\u51fa\u9519\u3002\u8fd9\u65f6\u4e3a\u5143\u7d20\u6dfb\u52a0border\u5c5e\u6027\u786e\u5b9a\u5143\u7d20\u8fb9\u754c\uff0c\u9519\u8bef\u539f\u56e0\u5373\u6c34\u843d\u77f3\u51fa\u3002<\/p>\n
5. float\u5143\u7d20\u7684\u7236\u5143\u7d20\u4e0d\u80fd\u6307\u5b9aclear\u5c5e\u6027<\/p>\n
MacIE\u4e0b\u5982\u679c\u5bf9float\u7684\u5143\u7d20\u7684\u7236\u5143\u7d20\u4f7f\u7528clear\u5c5e\u6027\uff0c\u5468\u7684float\u5143\u7d20\u5e03\u5c40\u5c31\u4f1a\u6df7\u4e71\u3002\u8fd9\u662fMacIE\u7684\u8457\u540d\u7684bug\uff0c\u5018\u82e5\u4e0d\u77e5\u9053\u5c31\u4f1a\u8d70\u5f2f\u8def\u3002<\/p>\n
6. float\u5143\u7d20\u52a1\u5fc5\u6307\u5b9awidth\u5c5e\u6027<\/p>\n
\u5f88\u591a\u6d4f\u89c8\u5668\u5728\u663e\u793a\u672a\u6307\u5b9awidth\u7684float\u5143\u7d20\u65f6\u4f1a\u6709bug\u3002\u6240\u4ee5\u4e0d\u7ba1float\u5143\u7d20\u7684\u5185\u5bb9\u5982\u4f55\uff0c\u4e00\u5b9a\u8981\u4e3a\u5176\u6307\u5b9awidth\u5c5e\u6027\u3002<\/p>\n
\u53e6\u5916\u6307\u5b9a\u5143\u7d20\u65f6\u5c3d\u91cf\u4f7f\u7528em\u800c\u4e0d\u662fpx\u505a\u5355\u4f4d\u3002<\/p>\n
7. float\u5143\u7d20\u4e0d\u80fd\u6307\u5b9amargin\u548cpadding\u7b49\u5c5e\u6027<\/p>\n
IE\u5728\u663e\u793a\u6307\u5b9a\u4e86margin\u548cpadding\u7684float\u5143\u7d20\u65f6\u6709bug\u3002\u56e0\u6b64\u4e0d\u8981\u5bf9float\u5143\u7d20\u6307\u5b9amargin\u548cpadding\u5c5e\u6027(\u53ef\u4ee5\u5728float\u5143\u7d20\u5185\u90e8\u5d4c\u5957\u4e00\u4e2adiv\u6765\u8bbe\u7f6emargin\u548cpadding)\u3002\u4e5f\u53ef\u4ee5\u4f7f\u7528hack\u65b9\u6cd5\u4e3aIE\u6307\u5b9a\u7279\u522b\u7684\u503c\u3002<\/p>\n
8. float\u5143\u7d20\u7684\u5bbd\u5ea6\u4e4b\u548c\u8981\u5c0f\u4e8e100%<\/p>\n
\u5982\u679cfloat\u5143\u7d20\u7684\u5bbd\u5ea6\u4e4b\u548c\u6b63\u597d\u662f100%\uff0c\u67d0\u4e9b\u53e4\u8001\u7684\u6d4f\u89c8\u5668\u5c06\u4e0d\u80fd\u6b63\u5e38\u663e\u793a\u3002\u56e0\u6b64\u8bf7\u4fdd\u8bc1\u5bbd\u5ea6\u4e4b\u548c\u5c0f\u4e8e99%\u3002<\/p>\n
9. \u662f\u5426\u91cd\u8bbe\u4e86\u9ed8\u8ba4\u7684\u6837\u5f0f?<\/p>\n
\u67d0\u4e9b\u5c5e\u6027\u5982margin\u3001padding\u7b49\uff0c\u4e0d\u540c\u6d4f\u89c8\u5668\u4f1a\u6709\u4e0d\u540c\u7684\u89e3\u91ca\u3002\u56e0\u6b64\u6700\u597d\u5728\u5f00\u53d1\u524d\u9996\u5148\u5c06\u5168\u4f53\u7684margin\u3001padding\u8bbe\u7f6e\u4e3a0\u3001\u5217\u8868\u6837\u5f0f\u8bbe\u7f6e\u4e3anone\u7b49\u3002<\/p>\n
10. \u662f\u5426\u5fd8\u8bb0\u4e86\u5199DTD?<\/p>\n
\u5982\u679c\u65e0\u8bba\u600e\u6837\u8c03\u6574\u4e0d\u540c\u6d4f\u89c8\u5668\u663e\u793a\u7ed3\u679c\u8fd8\u662f\u4e0d\u4e00\u6837\uff0c\u90a3\u4e48\u53ef\u4ee5\u68c0\u67e5\u4e00\u4e0b\u9875\u9762\u5f00\u5934\u662f\u4e0d\u662f\u5fd8\u4e86\u5199\u4e0b\u9762\u8fd9\u884cDTD\uff1a<\/p>\n
\u4ee5\u4e0b\u4e3a\u5f15\u7528\u7684\u5185\u5bb9\uff1a
<\/p>\n","protected":false},"excerpt":{"rendered":"
CSS\uff0bDIV\u662f\u7f51\u7ad9\u6807\u51c6\uff08\u6216\u79f0\u201cWEB\u6807\u51c6\u201d\uff09\u4e2d\u5e38\u7528\u7684\u672f\u8bed\u4e4b\u4e00\uff0c\u901a\u5e38\u4e3a\u4e86\u8bf4\u660e\u4e0e HTML\u7f51\u9875\u8bbe\u8ba1\u8bed\u8a00\u4e2d\u7684\u8868\u683c\uff08 […]<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[2061,2064,2065,1141],"class_list":["post-1447","post","type-post","status-publish","format-standard","hentry","category-4","tag-css","tag-div","tag-2065","tag-1141","category-4-id","post-seq-1","post-parity-odd","meta-position-corners","fix"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.icocean.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1447","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.icocean.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.icocean.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.icocean.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.icocean.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1447"}],"version-history":[{"count":0,"href":"https:\/\/www.icocean.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1447\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.icocean.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1447"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.icocean.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1447"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.icocean.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1447"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}