{"id":2697,"date":"2017-06-18T12:49:17","date_gmt":"2017-06-18T04:49:17","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=2697"},"modified":"2017-06-18T12:49:17","modified_gmt":"2017-06-18T04:49:17","slug":"%e5%8a%a0%e6%b7%b1%e4%b8%80%e4%b8%8b%e5%af%b9css%e7%9b%92%e6%a8%a1%e5%9e%8b%e7%9a%84%e7%90%86%e8%a7%a3","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=2697","title":{"rendered":"\u52a0\u6df1\u4e00\u4e0b\u5bf9css\u76d2\u6a21\u578b\u7684\u7406\u89e3"},"content":{"rendered":"

\u5f00\u5934\u5148\u63d0\u95ee\u4e00\u4e2a\u95ee\u9898\uff0c\u4e00\u4e2a\u8bbe\u7f6e\u4e86width\u4e3a100px\u7684div\uff0c\u5b83\u7684\u5bbd\u5ea6\u5c31\u4e00\u5b9a\u662f100px\u5417\uff1f\uff1f\u8fd9100px\u662f\u4ec0\u4e48\u5bbd\u5462\uff1f\uff1f
\n\u8fd9\u5c31\u8981\u63d0\u5230\u4e00\u4e2a\u5c5e\u6027\uff1abox-sizing<\/b>\uff1a\u67093\u4e2a\u503c\u4f9b\u9009\u62e9 content-box|border-box|inherit<\/b>;
\ncontent-box\uff1a\u5bbd\u5ea6\u548c\u9ad8\u5ea6\u5206\u522b\u5e94\u7528\u5230\u5143\u7d20\u7684\u5185\u5bb9\u6846\uff0c\u5728\u5bbd\u5ea6\u548c\u9ad8\u5ea6\u4e4b\u5916\u7ed8\u5236\u5143\u7d20\u7684\u5185\u8fb9\u8ddd\u548c\u8fb9\u6846\u3002\uff08\u9ed8\u8ba4\uff09
\nborder-box\uff1a\u4e3a\u5143\u7d20\u6307\u5b9a\u7684\u4efb\u4f55\u5185\u8fb9\u8ddd\u548c\u8fb9\u6846\u90fd\u5c06\u5728\u5df2\u8bbe\u5b9a\u7684\u5bbd\u5ea6\u548c\u9ad8\u5ea6\u5185\u8fdb\u884c\u7ed8\u5236\uff0c\u901a\u8fc7\u4ece\u5df2\u8bbe\u5b9a\u7684\u5bbd\u5ea6\u548c\u9ad8\u5ea6\u5206\u522b\u51cf\u53bb\u8fb9\u6846\u548c\u5185\u8fb9\u8ddd\u624d\u80fd\u5f97\u5230\u5185\u5bb9\u7684\u5bbd\u5ea6\u548c\u9ad8\u5ea6\u3002
\n\u4e3e\u4e2a\u6817\u5b50\u770b\u7684\u66f4\u660e\u767d<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title><\/title>\r\n\t<style type=\"text\/css\">\r\n\t\t.d1 {\r\n\t\t\twidth: 100px;\r\n\t\t\theight: 100px;\r\n\t\t\tpadding: 5px;\r\n\t\t\tborder: 5px solid red;\r\n\t\t\tmargin: 10px;\r\n\t\t}\r\n\t\t.d2 {\r\n\t\t\tbox-sizing: border-box;\r\n\t\t\twidth: 100px;\r\n\t\t\theight: 100px;\r\n\t\t\tpadding: 5px;\r\n\t\t\tborder: 5px solid red;\r\n\t\t\tmargin: 10px;\r\n\t\t}\r\n\t<\/style>\r\n<body>\r\n<div class=\"d1\">d1<\/div>\r\n<hr>\r\n<div class=\"d2\">d2<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
\u5728\u6d4f\u89c8\u5668\u4e2d\u6548\u679c\u66f4\u660e\u663e
\nd1\u7684\u5bbd\u5ea6\u4e3a\uff1acontent(100)+padding(5*2)+border(5*2) = 120
\nd2\u7684\u5bbd\u5ea6\u4e3a\uff1a100
\n\u7531\u6b64\u5f97\u51fa\u7ed3\u8bba\uff1a
\ncontent-box\u4e2d\uff1a\u8bbe\u7f6e\u7684width:100px\u53ea\u662f\u5355\u7eaf\u5185\u5bb9\u533a\u57df\u7684\u5bbd\u5ea6
\nborder-box\u4e2d\uff1a\u8bbe\u7f6e\u7684width:100px\u4e0d\u4ec5\u5305\u62ecconent\uff0c\u8fd8\u6709padding\u548cborder\uff0c\u4ed6\u4eec\u6324\u5360\u4e86content\uff0c\u8fd9\u65f6content\u53d8\u6210\u4e8680px
\n\u7531\u6b64\u4e5f\u56de\u7b54\u4e86\u6700\u5f00\u59cb\u63d0\u51fa\u7684\u95ee\u9898\uff1a
\n\u82e5\u662fcontent-box(\u9ed8\u8ba4)\uff1adiv\u7684\u5bbd\u4e0d\u4e00\u5b9a\u5c31\u662f100px\uff0c100px\u53ea\u662fdiv\u5185\u5bb9\u7684\u5bbd\u5ea6
\n\u82e5\u662fborder-box\uff1adiv\u7684\u5bbd\u5ea6\u4e00\u5b9a\u662f100px<\/p>\n
\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a\u524d\u7aefABC<\/a> » \u52a0\u6df1\u4e00\u4e0b\u5bf9css\u76d2\u6a21\u578b\u7684\u7406\u89e3<\/a><\/p>","protected":false},"excerpt":{"rendered":"
\u5f00\u5934\u5148\u63d0\u95ee\u4e00\u4e2a\u95ee\u9898\uff0c\u4e00\u4e2a\u8bbe\u7f6e\u4e86width\u4e3a100px\u7684div\uff0c\u5b83\u7684\u5bbd\u5ea6\u5c31\u4e00\u5b9a\u662f100px\u5417\uff1f\uff1f\u8fd9100px\u662f\u4ec0\u4e48\u5bbd\u5462\uff1f\uff1f \u8fd9\u5c31\u8981\u63d0\u5230\u4e00\u4e2a\u5c5e\u6027\uff1abox-sizing\uff1a\u67093\u4e2a\u503c\u4f9b\u9009\u62e9 content-bo […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[28,384],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2697"}],"collection":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2697"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2697\/revisions"}],"predecessor-version":[{"id":2698,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2697\/revisions\/2698"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2697"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2697"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}