{"id":172,"date":"2023-06-12T23:06:07","date_gmt":"2023-06-12T15:06:07","guid":{"rendered":"https:\/\/www.qzdd.net\/?p=172"},"modified":"2023-06-12T23:06:07","modified_gmt":"2023-06-12T15:06:07","slug":"css-%e7%bb%8f%e5%85%b8%e5%b8%83%e5%b1%80%e5%ae%9e%e7%8e%b0-%e5%9c%a3%e6%9d%af%e5%b8%83%e5%b1%80%e3%80%81%e5%8f%8c%e9%a3%9e%e7%bf%bc%e5%b8%83%e5%b1%80","status":"publish","type":"post","link":"https:\/\/www.qzdd.net\/?p=172","title":{"rendered":"CSS \u7ecf\u5178\u5e03\u5c40\u5b9e\u73b0-\u5723\u676f\u5e03\u5c40\u3001\u53cc\u98de\u7ffc\u5e03\u5c40"},"content":{"rendered":"\n<p>\u524d\u8a00<\/p>\n\n\n\n<p>\u672c\u6587\u4ecb\u7ecd\u4e86\u5723\u676f\u5e03\u5c40\u4e0e\u53cc\u98de\u7ffc\u5e03\u5c40\u51fa\u73b0\u7684\u539f\u56e0\u3001\u5b9e\u73b0\u548c\u7f3a\u70b9\u3002<\/p>\n\n\n\n<p>\u5723\u676f\u5e03\u5c40\u4e0e\u53cc\u98de\u7ffc\u5e03\u5c40\u90fd\u662f\u524d\u7aef\u5e03\u5c40\u7684\u91cd\u8981\u5185\u5bb9\uff0c\u867d\u7136\u4ee5 flex \u5e03\u5c40\u6216 grid \u5e03\u5c40\u4e3a\u4e3b\u7684\u73b0\u4ee3\u5e03\u5c40\u65b9\u5f0f\u6b63\u5728\u9010\u6e10\u66ff\u4ee3\u4ee5 float\u3001position \u4e3a\u4e3b\u7684\u4f20\u7edf\u5e03\u5c40\u65b9\u5f0f\uff0c\u4f46\u53e4\u65e9\u65f6\u671f\u4e3a\u4e86\u89e3\u51b3\u5e03\u5c40\u95ee\u9898\u800c\u8bde\u751f\u7684\u7ecf\u5178\u6a21\u677f\u4ecd\u7136\u503c\u5f97\u6211\u4eec\u7814\u7a76\u4e0e\u601d\u8003\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u4e24\u79cd\u5e03\u5c40\u90fd\u5c06\u628a\u4e3b\u5217\u653e\u5728\u6587\u6863\u6d41\u6700\u524d\u9762\uff0c\u5b9e\u73b0\u4f18\u5148\u52a0\u8f7d\u3002<\/li>\n\n\n\n<li>\u4e24\u79cd\u5e03\u5c40\u7684\u5b9e\u73b0\u601d\u8def\u90fd\u662f\u5c06\u4e09\u5217\u6d6e\u52a8\uff0c\u7136\u540e\u901a\u8fc7\u8d1f\u5916\u8fb9\u8ddd\u5f62\u6210\u4e09\u5217\u5e03\u5c40\u3002<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u5723\u676f\u5e03\u5c40<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u4e3a\u4ec0\u4e48\u4f1a\u6709\u5723\u676f\u5e03\u5c40<\/h3>\n\n\n\n<p>\u6211\u4eec\u5e0c\u671b\u6709\u4e00\u79cd\u7b80\u5355\u9ad8\u6548\u7684\u4e09\u680f\u5e03\u5c40\u65b9\u5f0f\u53ef\u4ee5\u5b9e\u73b0\u4ee5\u4e0b\u8981\u6c42\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u4e24\u8fb9\u56fa\u5b9a\u5bbd\u5ea6\uff0c\u4e2d\u95f4\u81ea\u9002\u5e94<\/li>\n\n\n\n<li>\u5148\u52a0\u8f7d\u4e2d\u95f4\u7684\u5185\u5bb9\uff08\u56e0\u4e3a\u4e24\u8fb9\u662f\u5bfc\u822a\u680f\u548c\u5e7f\u544a\u680f\uff0c\u4e2d\u95f4\u662f\u5185\u5bb9\u533a\uff09<\/li>\n<\/ul>\n\n\n\n<p>\u4e3a\u4e86\u89e3\u51b3\u8be5\u95ee\u9898\u8bde\u751f\u4e86\u8bb8\u591a\u4f18\u79c0\u7684\u6a21\u677f\uff0c\u4f46\u51e0\u4e4e\u90fd\u5145\u6ee1\u4e86\u59a5\u534f\uff0c\u800c\u5723\u676f\u5e03\u5c40\u4ece\u4e2d\u8131\u9896\u800c\u51fa\u3002<\/p>\n\n\n\n<p>2006 \u5e74\uff0c\u5723\u676f\u5e03\u5c40\u5728 Matthew Levine \u7684\u6587\u7ae0 <a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Falistapart.com%2Farticle%2Fholygrail%2F\" target=\"_blank\" rel=\"noreferrer noopener\">In Search of the Holy Grail<\/a> \u4e2d\u88ab\u63d0\u51fa\u3002\u4e5f\u8bb8\u662f\u56e0\u4e3a\u5f53\u65f6\u8be5\u6a21\u677f\u6709\u6548\u7684\u89e3\u51b3\u4e86\u4ee5\u4e0a\u9700\u6c42\uff08\u201c\u5723\u676f\u201d\u8c61\u5f81\u201c\u6e34\u6c42\u4e4b\u7269\u201d\uff09\uff0c\u53c8\u6216\u8005\u662f\u56e0\u4e3a\u5c06\u5de6\u53f3\u4e24\u680f\u5b9a\u4f4d\u5230\u4e24\u4fa7\u7684\u8fc7\u7a0b\u5341\u5206\u50cf\u676f\u628a\uff08\u5723\u676f\u6709\u676f\u628a\u5417\uff1f\uff09\uff0c\u5b83\u88ab\u547d\u540d\u4e3a\u201c\u5723\u676f\u201d\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u5b9e\u73b0<\/h3>\n\n\n\n<p>\u5723\u676f\u5e03\u5c40\u9700\u8981\u5c06\u4e2d\u95f4\u680f\u653e\u5728\u524d\u9762\u4f18\u5148\u6e32\u67d3\u3002<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>&lt;div class = \"container\">\n  &lt;div class = \"center\">center&lt;\/div>\n  &lt;div class = \"left\">left&lt;\/div>\n  &lt;div class = \"right\">right&lt;\/div>\n&lt;\/div>\n<\/code><\/pre>\n\n\n\n<p>\u5723\u676f\u5e03\u5c40\u5229\u7528\u6d6e\u52a8\u3001\u8d1f\u8fb9\u8ddd\u3001\u76f8\u5bf9\u5b9a\u4f4d\u6765\u5b9e\u73b0\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u7236\u5143\u7d20 <code>container<\/code> \u8bbe\u7f6e\u5de6\u53f3 <code>padding<\/code> \u7a7a\u51fa\u5de6\u53f3\u4e24\u680f\u4f4d\u7f6e\u3002<\/li>\n\n\n\n<li>\u4e09\u680f\u5747\u8bbe\u7f6e\u5411\u5de6\u6d6e\u52a8\uff0c\u4e2d\u95f4\u680f\u8bbe\u7f6e <code>width: 100%;<\/code> \uff0c\u5373\u4e0e\u7236\u5143\u7d20\u5bbd\u5ea6\u4e00\u6837\uff0c\u5c06\u5de6\u53f3\u4e24\u680f\u6324\u5230\u4e0b\u9762\u3002<\/li>\n\n\n\n<li>\u8bbe\u7f6e <code>margin<\/code> \u5c5e\u6027\u4e3a\u8d1f\u503c\u5c06\u5de6\u53f3\u4e24\u680f\u79fb\u5230\u4e0a\u9762\uff0c<code>margin-left: -100%;<\/code> \u53ef\u4ee5\u4e0a\u79fb\u5230\u4e0a\u4e00\u884c\u6700\u5de6\u8fb9\uff0c <code>margin-left: -100px;<\/code> \u53ef\u4ee5\u4e0a\u79fb\u5230\u4e0a\u4e00\u884c\u6700\u53f3\u8fb9\uff08100px \u662f\u53f3\u8fb9\u680f\u5bbd\u5ea6\uff09\u3002<\/li>\n\n\n\n<li>\u5229\u7528\u76f8\u5bf9\u5b9a\u4f4d\uff0c\u5c06\u5de6\u53f3\u4e24\u680f\u5b9a\u4f4d\u5230\u4e24\u8fb9\u3002<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>.container {\n  padding: 0px 100px;\n  min-width: 300px;\n  overflow: hidden;\n}\n.left {\n  float: left;\n  position: relative;\n  left: -100px;\n  margin-left: -100%;\n  width: 100px;\n  background-color: red;\n}\n.center {\n  float: left;\n  width: 100%;\n  background-color: green;\n}\n.right {\n  float: left;\n  position: relative;\n  left: 100px;\n  margin-left: -100px;\n  width: 100px;\n  background-color: blue;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u7f3a\u9677<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u67d0\u4e00\u5217\u5185\u5bb9\u6ea2\u51fa\u65f6\uff0c\u4e09\u680f\u4e0d\u662f\u7b49\u9ad8\u7684\u3002\uff08\u8fdb\u884c\u7b49\u9ad8\u5e03\u5c40\u89e3\u51b3\uff09<\/li>\n\n\n\n<li>\u4e2d\u95f4\u680f\u7684\u6700\u5c0f\u5bbd\u5ea6\u4e0d\u80fd\u5c0f\u4e8e\u5de6\u53f3\u4e24\u680f\u7684\u5bbd\u5ea6\uff0c\u5426\u5219\u5de6\u53f3\u4e24\u680f\u4f1a\u6389\u5230\u4e0b\u4e00\u884c\u3002\uff08\u8bbe\u7f6e <code>min-width<\/code> \u89e3\u51b3\uff09<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u53cc\u98de\u7ffc\u5e03\u5c40<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u4e3a\u4ec0\u4e48\u4f1a\u6709\u53cc\u98de\u7ffc\u5e03\u5c40<\/h3>\n\n\n\n<p>\u5bf9\u4e8e\u5723\u676f\u5e03\u5c40\u5b58\u5728\u7684\u7f3a\u9677\uff0c\u6dd8\u5b9d\u56e2\u961f\u8fdb\u884c\u4e86\u4f18\u5316\uff0c\u63d0\u51fa\u4e86\u53cc\u98de\u7ffc\u5e03\u5c40\uff0c\u6b63\u5982\u5176\u540d\uff0c\u50cf\u662f\u98de\u884c\u7684\u53cc\u7ffc\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u5b9e\u73b0<\/h3>\n\n\n\n<p>\u53cc\u98de\u7ffc\u5e03\u5c40\u5728\u4e2d\u95f4\u680f\u589e\u52a0\u4e86\u4e00\u4e2a\u8282\u70b9 <code>inner<\/code> \u6765\u4f7f\u5de6\u53f3\u4e24\u4fa7\u7684\u7a7a\u95f4\u7a7a\u5f00\u3002<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>&lt;div class=\"container\">\n  &lt;div class=\"center\">\n    &lt;div class=\"inner\">inner&lt;\/div>\n  &lt;\/div>\n  &lt;div class=\"left\">left&lt;\/div>\n  &lt;div class=\"right\">right&lt;\/div>\n&lt;\/div>\n<\/code><\/pre>\n\n\n\n<p>\u76f8\u5bf9\u4e8e\u5723\u676f\u5e03\u5c40\uff0c\u53cc\u98de\u7ffc\u5e03\u5c40\u5de6\u53f3\u4e24\u680f\u4f4d\u7f6e\u7684\u4fdd\u7559\u901a\u8fc7\u8bbe\u7f6e\u4e2d\u95f4\u680f\u7684 <code>margin<\/code> \u6765\u5b9e\u73b0\uff0c\u5176\u4ed6\u65b9\u9762\u540c\u6837\u5229\u7528\u6d6e\u52a8\u548c\u8d1f\u8fb9\u8ddd\u5b9e\u73b0\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u4e09\u680f\u5747\u8bbe\u7f6e\u5411\u5de6\u6d6e\u52a8\uff0c\u4e2d\u95f4\u680f\u8bbe\u7f6e <code>width: 100%;<\/code>\uff0c\u5c06\u5de6\u53f3\u4e24\u680f\u6324\u5230\u4e0b\u9762\uff0c\u540c\u5723\u676f\u5e03\u5c40\u3002<\/li>\n\n\n\n<li>\u8bbe\u7f6e <code>margin<\/code> \u5c5e\u6027\u4e3a\u8d1f\u503c\u5c06\u5de6\u53f3\u4e24\u680f\u79fb\u5230\u4e0a\u9762\uff0c\u540c\u5723\u676f\u5e03\u5c40\uff0c\u6b64\u65f6\u5de6\u53f3\u4e24\u680f\u5404\u5728\u6700\u5de6\u8fb9\u548c\u6700\u53f3\u8fb9\u3002<\/li>\n\n\n\n<li>\u8bbe\u7f6e <code>inner<\/code> \u76d2\u5b50\u7684 <code>margin<\/code> \u5c5e\u6027\u5c06\u4e24\u4fa7\u7a7a\u5f00\u3002<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>.container {\n  overflow: hidden;\n}\n.left {\n  float: left;\n  margin-left: -100%;\n  width: 100px;\n  background-color: red;\n}\n.center {\n  float: left;\n  width: 100%;\n}\n.main {\n  margin: 0px 100px;\n  background-color: green;\n}\n.right {\n  float: left;\n  margin-left: -100px;\n  width: 100px;\n  background-color: blue;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u4f18\u70b9\u4e0e\u7f3a\u70b9<\/h3>\n\n\n\n<p>\u4f18\u70b9\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u53cc\u98de\u7ffc\u5e03\u5c40\u7701\u53bb\u4e86\u5f88\u591a css\uff0c\u7531\u4e8e\u4e0d\u4f7f\u7528\u5b9a\u4f4d\uff0c\u4e2d\u95f4\u680f\u7684\u6700\u5c0f\u5bbd\u5ea6\u4e0d\u518d\u53d7\u9650\u4e8e\u5de6\u53f3\u4e24\u680f\u5bbd\u5ea6\u3002<\/li>\n<\/ul>\n\n\n\n<p>\u7f3a\u70b9\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u53cc\u98de\u7ffc\u5e03\u5c40\u591a\u52a0\u4e00\u5c42 dom \u6811\u8282\u70b9\uff0c\u589e\u52a0\u6e32\u67d3\u6811\u751f\u6210\u7684\u8ba1\u7b97\u91cf\uff0c dom \u7ed3\u6784\u4e0d\u5982\u5723\u676f\u5e03\u5c40\u7b80\u5355\u76f4\u89c2\u3002<\/li>\n\n\n\n<li>\u4e09\u5217\u7b49\u9ad8\u95ee\u9898\u4ecd\u7136\u8981\u5355\u72ec\u89e3\u51b3\u3002<\/li>\n<\/ul>\n\n\n\n<p>\u4f5c\u8005\uff1a\u540c\u4e50<br>\u94fe\u63a5\uff1a<a href=\"https:\/\/juejin.cn\/post\/7195889798095618109\" data-type=\"URL\" data-id=\"https:\/\/juejin.cn\/post\/7195889798095618109\">https:\/\/juejin.cn\/post\/7195889798095618109<\/a><br>\u6765\u6e90\uff1a\u7a00\u571f\u6398\u91d1<br>\u8457\u4f5c\u6743\u5f52\u4f5c\u8005\u6240\u6709\u3002\u5546\u4e1a\u8f6c\u8f7d\u8bf7\u8054\u7cfb\u4f5c\u8005\u83b7\u5f97\u6388\u6743\uff0c\u975e\u5546\u4e1a\u8f6c\u8f7d\u8bf7\u6ce8\u660e\u51fa\u5904\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u524d\u8a00 \u672c\u6587\u4ecb\u7ecd\u4e86\u5723\u676f\u5e03\u5c40\u4e0e\u53cc\u98de\u7ffc\u5e03\u5c40\u51fa\u73b0\u7684\u539f\u56e0\u3001\u5b9e\u73b0\u548c\u7f3a\u70b9\u3002 \u5723\u676f\u5e03\u5c40\u4e0e\u53cc\u98de\u7ffc\u5e03\u5c40\u90fd\u662f\u524d\u7aef\u5e03\u5c40\u7684\u91cd\u8981\u5185\u5bb9\uff0c\u867d\u7136 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[73,74],"class_list":["post-172","post","type-post","status-publish","format-standard","hentry","category-base","tag-73","tag-74"],"_links":{"self":[{"href":"https:\/\/www.qzdd.net\/index.php?rest_route=\/wp\/v2\/posts\/172","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.qzdd.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.qzdd.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.qzdd.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.qzdd.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=172"}],"version-history":[{"count":0,"href":"https:\/\/www.qzdd.net\/index.php?rest_route=\/wp\/v2\/posts\/172\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.qzdd.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=172"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.qzdd.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=172"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.qzdd.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}