{"id":1316,"date":"2010-07-13T19:46:04","date_gmt":"2010-07-13T11:46:04","guid":{"rendered":"http:\/\/www.ddcat.net\/blog\/?p=1316"},"modified":"2010-07-13T19:46:04","modified_gmt":"2010-07-13T11:46:04","slug":"css%e6%a0%b8%e5%bf%83%ef%bc%9a%e5%86%8d%e8%af%b4%e6%a1%86%e6%a8%a1%e5%9e%8b%ef%bc%88box-model%ef%bc%89","status":"publish","type":"post","link":"http:\/\/www.ddcat.net\/blog\/index.php\/2010\/07\/13\/css%e6%a0%b8%e5%bf%83%ef%bc%9a%e5%86%8d%e8%af%b4%e6%a1%86%e6%a8%a1%e5%9e%8b%ef%bc%88box-model%ef%bc%89\/","title":{"rendered":"CSS\u6838\u5fc3\uff1a\u518d\u8bf4\u6846\u6a21\u578b\uff08Box Model\uff09"},"content":{"rendered":"<p>\u6846\u6a21\u578b\uff08Box model\uff0c\u4e5f\u8bd1\u4f5c\u201c\u76d2\u6a21\u578b\u201d\uff09\u662fCSS\u975e\u5e38\u91cd\u8981\u7684\u6982\u5ff5\uff0c\u4e5f\u662f\u6bd4\u8f83\u62bd\u8c61\u7684\u6982\u5ff5\u3002<\/p>\n<p>\u6587\u6863\u6811\u4e2d\u7684\u5143\u7d20\u90fd\u4ea7\u751f\u77e9\u5f62\u7684\u6846\uff08Box\uff09\uff0c\u8fd9\u4e9b\u6846\u5f71\u54cd\u4e86\u5143\u7d20\u5185\u5bb9\u4e4b\u95f4\u7684\u8ddd\u79bb\u3001\u5143\u7d20\u5185\u5bb9\u7684\u4f4d\u7f6e\u3001\u80cc\u666f\u56fe\u7247\u7684\u4f4d\u7f6e\u7b49\u7b49\u3002\u800c\u6d4f\u89c8\u5668\u6839\u636e\u89c6\u89c9\u683c\u5f0f\u5316\u6a21\u578b\uff08Visual formatting model\uff09\u6765\u5c06\u8fd9\u4e9b\u6846\u5e03\u5c40\u6210\u8bbf\u95ee\u8005\u770b\u5230\u7684\u6837\u5b50\u3002<\/p>\n<p>\u56e0\u6b64\uff0c\u8981\u638c\u63e1\u4f7f\u7528CSS\u5e03\u5c40\u7684\u6280\u5de7\uff0c\u5c31\u9700\u8981\u6df1\u5165\u4e86\u89e3\u6846\u6a21\u578b\u548c\u89c6\u89c9\u683c\u5f0f\u5316\u6a21\u578b\u7684\u539f\u7406\u3002<br \/>\n<!--more--><\/p>\n<h3>1 \u6846\u6a21\u578b\uff08Box Model\uff09<\/h3>\n<p>\u6d4f\u89c8\u5668\u5185\u663e\u793a\u7684\u5143\u7d20\u90fd\u53ef\u4ee5\u770b\u4f5c\u662f\u4e00\u4e2a\u88c5\u4e86\u4e1c\u897f\u7684\u77e9\u5f62\u7684\u76d2\u5b50\uff0c\u8fd9\u4e9b\u77e9\u5f62\u7684\u76d2\u5b50\u5d4c\u5957\u3001\u53e0\u52a0\u6216\u8005\u5e76\u5217\u5728\u4e00\u8d77\uff0c\u5f62\u6210\u4e86\u9875\u9762\u3002<\/p>\n<p class=\"tips\"><span>\u63d0\u793a\uff1a<\/span>\u201cbox model\u201d\u5f80\u5f80\u88ab\u8bd1\u4e3a\u201c\u76d2\u6a21\u578b\u201d\u3002\u4f46\u662f\u76d2\u5b50\u662f\u5177\u6709\u539a\u5ea6\u7684\uff0c\u4e5f\u5c31\u662f\u8bf4\u76d2\u5b50\u662f\u4e09\u7ef4\u7684\uff0c\u800c\u6846\u5219\u6ca1\u6709\u539a\u5ea6\uff0c\u662f\u4e8c\u7ef4\u7684\uff0c\u56e0\u6b64\u672c\u4e66\u91c7\u7528\u4e86\u201c\u6846\u6a21\u578b\u201d\u8fd9\u4e2a\u8bd1\u6cd5\u3002<\/p>\n<p>\u56fe1\u663e\u793a\u4e86\u6bcf\u4e00\u4e2a\u5143\u7d20\u7684\u201c\u6846\uff08Box\uff09\u201d\u7531\u51e0\u90e8\u5206\u7ec4\u6210\uff1a<\/p>\n<div style=\"width: 548px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"\u56fe1 \u6846\uff08Box\uff09\u7684\u7ec4\u6210\" src=\"\/web\/css\/boxmodel\/001.png\" alt=\"\u56fe1 \u6846\uff08Box\uff09\u7684\u7ec4\u6210\" width=\"538\" height=\"475\" \/><p class=\"wp-caption-text\">\u56fe1 \u6846\uff08Box\uff09\u7684\u7ec4\u6210<\/p><\/div>\n<dl>\n<dt>\u5185\u5bb9\uff08content\uff09<\/dt>\n<dd>\u4f8b\u5982\uff1a\u6587\u5b57\u3001\u56fe\u7247\u6216\u8005\u5176\u4ed6\u5143\u7d20\u7b49\uff0c\u5185\u5bb9\u4e5f\u53ef\u4ee5\u770b\u4f5c\u662f\u4e00\u4e2a\u957f\u65b9\u5f62\u7684\u6846\uff0cwidth\uff08\u5bbd\u5ea6\uff09\u548cheight\uff08\u9ad8\u5ea6\uff092\u4e2aCSS\u5c5e\u6027\u8bbe\u5b9a\u7684\u5c31\u662f\u5185\u5bb9\u6846\u7684\u5bbd\u5ea6\u548c\u9ad8\u5ea6\u3002<\/dd>\n<dt>\u8fb9\u6846\uff08border\uff09<\/dt>\n<dd>\u8fb9\u6846\uff08\u4e5f\u8bd1\u4e3a\u8fb9\u754c\uff09\u662f\u53ef\u4ee5\u5177\u4f53\u663e\u793a\u51fa\u6765\u7684\uff0c\u53ef\u4ee5\u8bbe\u5b9a\u5bbd\u5ea6\u3001\u5916\u89c2\u6837\u5f0f\u548c\u989c\u8272\u3002<\/dd>\n<dt>\u8865\u767d\uff08padding\uff09<\/dt>\n<dd>\u8865\u767d\uff08\u4e5f\u8bd1\u4e3a\u586b\u5145\u3001\u5185\u8fb9\u8ddd\u3001\u5185\u8865\u4e01\u7b49\uff09\u662f\u5185\u5bb9\u6846\u4e0e\u8fb9\u6846\u4e4b\u95f4\u7684\u8ddd\u79bb\uff0c\u8865\u767d\u90e8\u5206\u663e\u793a\u7684\u662f\u80cc\u666f\u3002<\/dd>\n<dt>\u8fb9\u8ddd\uff08margin\uff09<\/dt>\n<dd>\u8fb9\u8ddd\uff08\u4e5f\u8bd1\u4e3a\u8fb9\u767d\u3001\u5916\u8fb9\u8ddd\u3001\u5916\u8865\u4e01\u7b49\uff09\u662f\u8fb9\u6846\u5916\u7684\u900f\u660e\u533a\u57df\uff0c\u7528\u6765\u8bbe\u5b9a\u672c\u5143\u7d20\u4e0e\u5176\u5b83\u5143\u7d20\u4e4b\u95f4\u7684\u8ddd\u79bb\u3002<\/dd>\n<\/dl>\n<p>\u4e00\u4e2a\u5143\u7d20\u6846\uff0c\u53c8\u6709\u4e0a\u3001\u53f3\u3001\u4e0b\u3001\u5de6\u56db\u4e2a\u65b9\u5411\u7684\u8fb9\uff0c\u5982\u56fe2\u6240\u793a\u3002<\/p>\n<div style=\"width: 563px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"\u56fe2 \u6846\u7ec4\u6210\u90e8\u5206\u7684\u8fb9\u7f18\u5212\u5206\" src=\"\/web\/css\/boxmodel\/002.png\" alt=\"\u56fe2 \u6846\u7ec4\u6210\u90e8\u5206\u7684\u8fb9\u7f18\u5212\u5206\" width=\"553\" height=\"490\" \/><p class=\"wp-caption-text\">\u56fe2 \u6846\u7ec4\u6210\u90e8\u5206\u7684\u8fb9\u7f18\u5212\u5206<\/p><\/div>\n<p>\u7531\u56fe2\u5927\u5bb6\u53ef\u4ee5\u53d1\u73b0\uff0c1\u4e2a\u5143\u7d20\u6240\u5360\u7684\u533a\u57df\u5176\u5b9e\u662f\u7531\u51e0\u4e2a\u77e9\u5f62\u6846\u7ec4\u6210\uff1a\u5143\u7d20\u7684\u5185\u5bb9\u6846\u3001\u8865\u767d\u5f62\u6210\u7684\u6846\u3001\u5143\u7d20\u7684\u8fb9\u6846\u4ee5\u53ca\u8fb9\u8ddd\u5f62\u6210\u7684\u6846\u3002\u8fd9\u4e9b\u6846\u7684\u8fb9\u7f18\u53c8\u6709\u5982\u4e0b\u5b9a\u4e49\uff1a<\/p>\n<ul>\n<li>\u5143\u7d20\u5185\u5bb9\u6846\u7684\u8fb9\u7f18\uff0c\u79f0\u4e3a\u201c\u5185\u5bb9\u8fb9\uff08content edge\uff09\u201d\u6216\u201c\u5185\u8fb9\uff08inner edge\uff09\u201d\uff0c4\u6761\u5185\u5bb9\u8fb9\u5f62\u6210\u201c\u5185\u5bb9\u6846\uff08content box\uff09\u201d\u3002<\/li>\n<li>\u8865\u767d\u5f62\u6210\u7684\u6846\u7684\u5916\u8fb9\u7f18\uff0c\u79f0\u4e3a\u201c\u8865\u767d\u8fb9\uff08padding edge\uff09\u201d\uff0c\u8865\u767d\u8fb9\u56f4\u7ed5\u6846\u7684\u8865\u767d\u3002\u5982\u679c\u8865\u767d\u5bbd\u5ea6\u4e3a0\uff0c\u5219\u8865\u767d\u8fb9\u548c\u5185\u5bb9\u8fb9\u91cd\u5408\u30024\u6761\u8865\u767d\u8fb9\u5f62\u6210\u201c\u8865\u767d\u6846\uff08padding box\uff09\u201d\u3002<\/li>\n<li>\u8fb9\u6846\u5f62\u6210\u7684\u6846\u7684\u5916\u8fb9\u7f18\uff0c\u79f0\u4e3a\u201c\u8fb9\u6846\u8fb9\uff08border edge\uff09\u201d\u3002\u5982\u679c\u8fb9\u6846\u5bbd\u5ea6\u4e3a0\uff0c\u5219\u8fb9\u6846\u8fb9\u548c\u8865\u767d\u8fb9\u91cd\u5408\u30024\u6761\u8fb9\u6846\u8fb9\u5f62\u6210\u201c\u8fb9\u6846\u6846\uff08border box\uff09\u201d\u3002<\/li>\n<li>\u8fb9\u8ddd\u5f62\u6210\u7684\u6846\u7684\u5916\u8fb9\u7f18\uff0c\u79f0\u4e3a\u201c\u8fb9\u8ddd\u8fb9\uff08margin edge\uff09\u201d\u6216\u201c\u5916\u8fb9\uff08outer edge\uff09\u201d\uff0c\u8fb9\u8ddd\u8fb9\u56f4\u7ed5\u6846\u7684\u8fb9\u8ddd\u3002\u5982\u679c\u8fb9\u8ddd\u5bbd\u5ea6\u4e3a0\uff0c\u5219\u8fb9\u8ddd\u8fb9\u548c\u8fb9\u6846\u8fb9\u91cd\u5408\u30024\u6761\u8fb9\u8ddd\u8fb9\u5f62\u6210\u201c\u8fb9\u8ddd\u6846\uff08margin  box\uff09\u201d\u3002<\/li>\n<\/ul>\n<p>\u5185\u5bb9\u6846\u7684\u5c3a\u5bf8\uff08\u5bbd\u5ea6\u548c\u9ad8\u5ea6\uff09\u53d6\u51b3\u4e8e\u82e5\u5e72\u4e2a\u56e0\u7d20\uff0c\u4f8b\u5982\uff1a<\/p>\n<ul>\n<li>\u4ea7\u751f\u6846\u7684\u5143\u7d20\u662f\u5426\u8bbe\u5b9a\u4e86width\u5c5e\u6027\u6216height\u5c5e\u6027\uff1b<\/li>\n<li>\u6846\u662f\u5426\u5305\u542b\u6587\u672c\u6216\u5176\u5b83\u6846\uff1b<\/li>\n<li>\u6846\u662f\u5426\u662f\u4e00\u4e2a\u8868\u683c\u7b49\u7b49\u3002<\/li>\n<\/ul>\n<p>\u4f8b\u5982<a title=\"\u70b9\u51fb\u67e5\u770b\u5b9e\u4f8b\u9875\u9762\" href=\"\/web\/css\/boxmodel\/box_model.html\">\u4e0b\u5217\u4ee3\u7801\uff08\u67e5\u770b\u5b9e\u4f8b\uff09<\/a>\u5176\u5185\u5bb9\u6846\u4e0e\u6846\u4e4b\u95f4\u7684\u5173\u7cfb\uff0c\u5982\u56fe3\u3001\u56fe4\u6240\u793a\u3002<\/p>\n<div class=\"code\">\n<pre class=\"css\">* { margin:0; padding:0; color:#666;} \/* \u6e05\u9664\u6d4f\u89c8\u5668\u9ed8\u8ba4\u7684\u6837\u5f0f *\/\ndiv { border:4px solid #F90; background:#FC6;}\nul { list-style:none; margin:10px; padding:10px; background:#FC6;}\nli { padding : 10px 0 10px 10px; background : #FF9;margin : 15px;}\n.sample { margin-right:0; border:5px dashed #F90;}<\/pre>\n<pre class=\"html\">&lt;ul&gt;\n  &lt;li&gt;\u7b2c1\u4e2ali\u91cc\u9762\u7684\u793a\u4f8b\u6587\u5b57\u793a\u4f8b\u6587\u5b57&lt;\/li&gt;\n  &lt;li&gt;\u7b2c2\u4e2ali\u91cc\u9762\u7684\u793a\u4f8b\u6587\u5b57&lt;\/li&gt;\n&lt;\/ul&gt;\n&lt;div&gt;ul\u4e0b\u9762\u7684div&lt;\/div&gt;<\/pre>\n<\/div>\n<div style=\"width: 525px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"\u56fe3 \u5185\u5bb9\u6846\u4e0e\u6846\u7684\u5173\u7cfb\" src=\"\/web\/css\/boxmodel\/003.png\" alt=\"\u56fe3 \u5185\u5bb9\u6846\u4e0e\u6846\u7684\u5173\u7cfb\" width=\"515\" height=\"369\" \/><p class=\"wp-caption-text\">\u56fe3 \u5185\u5bb9\u6846\u4e0e\u6846\u7684\u5173\u7cfb<\/p><\/div>\n<p style=\"text-align: center;\">\n<div style=\"width: 412px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"\u56fe4 \u5185\u5bb9\u7684\u5c3a\u5bf8\u4e0e\u6846\u7684\u5173\u7cfb\" src=\"\/web\/css\/boxmodel\/004.png\" alt=\"\u56fe4 \u5185\u5bb9\u7684\u5c3a\u5bf8\u4e0e\u6846\u7684\u5173\u7cfb\" width=\"402\" height=\"369\" \/><p class=\"wp-caption-text\">\u56fe4 \u5185\u5bb9\u7684\u5c3a\u5bf8\u4e0e\u6846\u7684\u5173\u7cfb<\/p><\/div>\n<p style=\"text-align: center;\">\n<p>\u7531\u56fe3\u548c\u56fe4\uff0c\u6211\u4eec\u53ef\u4ee5\u53d1\u73b0\uff1a<\/p>\n<blockquote>\n<div>\u5143\u7d20\u7684\u6846\u5bbd\u5ea6 = \u5de6\u8fb9\u8ddd\uff08margin-left\uff09 + \u5de6\u8fb9\u6846\u5bbd\uff08border-left-width\uff09 + \u5de6\u8865\u767d\uff08padding-left\uff09 + \u5185\u5bb9\u5bbd\u5ea6\uff08width\uff09 + \u53f3\u8865\u767d\uff08padding-right\uff09 + \u53f3\u8fb9\u6846\u5bbd\uff08border-right-width\uff09 + \u53f3\u8fb9\u8ddd\uff08margin-right\uff09<\/div>\n<div>\u5143\u7d20\u7684\u6846\u9ad8\u5ea6 = \u4e0a\u8fb9\u8ddd\uff08margin-top\uff09 + \u4e0a\u8fb9\u6846\u5bbd\uff08border-top-width\uff09 + \u4e0a\u8865\u767d\uff08padding-top\uff09 + \u5185\u5bb9\u9ad8\u5ea6\uff08height\uff09 + \u4e0b\u8865\u767d\uff08padding-bottom\uff09 + \u4e0b\u8fb9\u6846\u5bbd\uff08border-bottom-width\uff09 + \u4e0b\u8fb9\u8ddd\uff08margin-bottom\uff09<\/div>\n<\/blockquote>\n<p class=\"tips\"><span>\u63d0\u793a\uff1a<\/span>\u5173\u4e8emargin\u5728\u5782\u76f4\u65b9\u5411\u91cd\u53e0\u7684\u60c5\u51b5\uff0c\u8bf7\u53c2\u89c1\u672c\u7ae0[8.9.2.2 \u8fb9\u8ddd\u7684\u91cd\u53e0]\u4e00\u8282\u3002<\/p>\n<p>\u5728IE 5.5\u53ca\u66f4\u65e9\u7684\u7248\u672c\uff0c\u4ee5\u53ca\u5728\u602a\u5f02\u6a21\u5f0f\u4e2d\u7684IE 6.0\/7.0\u4e2d\uff0c\u4f1a\u9519\u8bef\u5730\u5c06\u6846\u6a21\u578b\u7406\u89e3\u4e3a\uff1a<\/p>\n<blockquote>\n<div>width = border-left + padding-left + \u5185\u5bb9\u5bbd\u5ea6 + padding-right + border-right<\/div>\n<div>height = border-top + padding-top + \u5185\u5bb9\u9ad8\u5ea6 + padding-bottom + border-bottom<\/div>\n<\/blockquote>\n<p>\u4e5f\u5c31\u662f\u8bf4\uff0c\u9519\u8bef\u7684\u6846\u6a21\u578b\u628awidth\u548cheight\u7406\u89e3\u4e3a\u8fb9\u6846\u6846\u7684\u5bbd\u5ea6\u548c\u9ad8\u5ea6\uff0c\u800c\u4e0d\u662f\u5185\u5bb9\u6846\u7684\u3002\uff08\u5f53\u7136\uff0c\u5f88\u591a\u4eba\u90fd\u8ba4\u4e3a\u8fd9\u6837\u7684\u8bbe\u5b9a\u66f4\u5bb9\u6613\u8ba1\u7b97\u5e03\u5c40\u7684\u5c3a\u5bf8\u3002\uff09<\/p>\n<p>\u4f8b\u5982\u4e0b\u5217\u4ee3\u7801\uff1a<\/p>\n<div class=\"code\">\n<pre class=\"css\">div { width:300px; margin:10px; padding:15px; border:5px solid #ccc;}<\/pre>\n<\/div>\n<p>\u5219div\u7684\u6846\u5bbd\u5ea6\u5e94\u4e3a360px\uff0810px + 5px + 15px + 300px + 15px + 5px +10px\uff09\uff0c\u800c\u5728IE\u7684\u9519\u8bef\u6846\u6a21\u578b\u4e2d\uff0c\u6846\u7684\u5bbd\u5ea6\u4e3a320px\uff0810px + 300px +10px\uff09\uff0c\u5b9e\u9645\u7684\u5185\u5bb9\u5bbd\u5ea6\u4e3a260px\uff08300px \u2013 15px*2 \u2013 5px*2\uff09\u3002<\/p>\n<p>\u56e0\u6b64\u4f1a\u9020\u6210\u5143\u7d20\u5c3a\u5bf8\u663e\u793a\u7684\u4e0d\u6b63\u786e\u3002<\/p>\n<p class=\"tips\"><span>\u63d0\u793a\uff1a<\/span>\u5728CSS 3\u4e2d\uff0c\u5236\u4f5c\u8005\u53ef\u4ee5\u901a\u8fc7\u201cbox-sizing \u201d\u5c5e\u6027\u6765\u6307\u5b9awidth\u548cheight\u7684\u503c\u5e94\u7528\u5728\u5185\u5bb9\u6846\u6216\u8005\u8fb9\u6846\u6846\u4e0a\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u6846\u6a21\u578b\uff08Box model\uff0c\u4e5f\u8bd1\u4f5c\u201c\u76d2\u6a21\u578b\u201d\uff09\u662fCSS\u975e\u5e38\u91cd\u8981\u7684\u6982\u5ff5\uff0c\u4e5f\u662f\u6bd4\u8f83\u62bd\u8c61\u7684\u6982\u5ff5\u3002 \u6587\u6863\u6811\u4e2d\u7684\u5143\u7d20\u90fd\u4ea7 [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,4,20],"tags":[38,44,224,266],"class_list":["post-1316","post","type-post","status-publish","format-standard","hentry","category-web","category-biejuguangmang","category-web-css","tag-box-model","tag-css","tag-224","tag-266"],"_links":{"self":[{"href":"http:\/\/www.ddcat.net\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1316","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.ddcat.net\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.ddcat.net\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.ddcat.net\/blog\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.ddcat.net\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=1316"}],"version-history":[{"count":0,"href":"http:\/\/www.ddcat.net\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1316\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.ddcat.net\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=1316"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.ddcat.net\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=1316"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.ddcat.net\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=1316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}