{"id":256,"date":"2026-03-16T23:18:55","date_gmt":"2026-03-16T15:18:55","guid":{"rendered":"https:\/\/www.resilence.cn\/?p=256"},"modified":"2026-03-16T23:18:55","modified_gmt":"2026-03-16T15:18:55","slug":"day-14-%e7%9b%92%e6%a8%a1%e5%9e%8b%e4%b8%8e%e5%b8%83%e5%b1%80","status":"publish","type":"post","link":"https:\/\/www.resilence.cn\/?p=256","title":{"rendered":"Day-14-\u76d2\u6a21\u578b\u4e0e\u5e03\u5c40"},"content":{"rendered":"<h1>Day 14: \u76d2\u6a21\u578b\u4e0e\u5e03\u5c40<\/h1>\n<h2>\ud83c\udfaf \u5b66\u4e60\u76ee\u6807<\/h2>\n<ul>\n<li>\u6df1\u5165\u7406\u89e3 CSS \u76d2\u6a21\u578b<\/li>\n<li>\u638c\u63e1 display \u5c5e\u6027\u548c\u5e38\u89c1\u5e03\u5c40\u65b9\u6848<\/li>\n<li>\u5b66\u4f1a\u4f7f\u7528 Flexbox \u8fdb\u884c\u4e00\u7ef4\u5e03\u5c40<\/li>\n<li>\u4e86\u89e3 Grid \u5e03\u5c40\u7684\u57fa\u672c\u6982\u5ff5<\/li>\n<li>\u5b9e\u73b0\u5e38\u89c1\u7684\u9875\u9762\u5e03\u5c40\u6a21\u5f0f<\/li>\n<\/ul>\n<h2>\ud83d\udca1 \u6838\u5fc3\u6982\u5ff5<\/h2>\n<h3>CSS \u76d2\u6a21\u578b\u56de\u987e<\/h3>\n<p>\u6bcf\u4e2a HTML \u5143\u7d20\u90fd\u88ab\u8868\u793a\u4e3a\u4e00\u4e2a\u77e9\u5f62\u7684\u76d2\u5b50\uff0c\u5305\u542b\u56db\u4e2a\u90e8\u5206\uff1a<\/p>\n<pre><code>\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502           Margin (\u5916\u8fb9\u8ddd)               \u2502  \u2190 \u5143\u7d20\u5916\u90e8\u7a7a\u95f4\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502         Border (\u8fb9\u6846)                  \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502       Padding (\u5185\u8fb9\u8ddd)                 \u2502\n\u2502   \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510       \u2502\n\u2502   \u2502    Content (\u5185\u5bb9\u533a\u57df)       \u2502       \u2502  \u2190 \u5b9e\u9645\u5185\u5bb9\n\u2502   \u2502                            \u2502       \u2502\n\u2502   \u2502   width \u00d7 height           \u2502       \u2502\n\u2502   \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518       \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n<\/code><\/pre>\n<h3>box-sizing \u5c5e\u6027\u8be6\u89e3<\/h3>\n<pre><code class=\"language-css\">\/* content-box\uff08\u9ed8\u8ba4 W3C \u6807\u51c6\u76d2\u6a21\u578b\uff09 *\/\n.element {\n    box-sizing: content-box;\n    width: 200px;\n    padding: 20px;     \/* \u603b\u5bbd\u5ea6 = 200 + 20\u00d72 = 240px *\/\n    border: 5px solid; \/* \u603b\u5bbd\u5ea6 = 240 + 5\u00d72 = 250px *\/\n}\n\n\/* border-box\uff08IE \u76d2\u6a21\u578b\uff0c\u63a8\u8350\u4f7f\u7528\uff09*\/\n.element {\n    box-sizing: border-box;\n    width: 200px;\n    padding: 20px;     \/* \u5185\u5bb9\u5bbd\u5ea6 = 200 - 20\u00d72 - 5\u00d72 = 150px *\/\n    border: 5px solid; \/* \u603b\u5bbd\u5ea6\u4fdd\u6301 200px *\/\n}\n<\/code><\/pre>\n<p><strong>\u6700\u4f73\u5b9e\u8df5<\/strong>\uff1a<\/p>\n<pre><code class=\"language-css\">\/* \u5168\u5c40\u8bbe\u7f6e\u4e3a border-box *\/\n* {\n    box-sizing: border-box;\n}\n\n\/* \u6216\u9488\u5bf9\u7279\u5b9a\u5143\u7d20 *\/\n.container {\n    box-sizing: border-box;\n}\n<\/code><\/pre>\n<h2>\ud83d\udcdd Display \u5c5e\u6027<\/h2>\n<h3>display \u503c\u8be6\u89e3<\/h3>\n<pre><code class=\"language-css\">\/* 1. \u5757\u7ea7\u5143\u7d20 *\/\ndisplay: block;\n\n\/* \u7279\u70b9\uff1a\n   - \u72ec\u5360\u4e00\u884c\n   - \u53ef\u8bbe\u7f6e width\u3001height\n   - margin\u3001padding \u4e0a\u4e0b\u5de6\u53f3\u90fd\u6709\u6548\n   - \u793a\u4f8b\uff1adiv\u3001p\u3001h1-h6\u3001ul\u3001li\n*\/\n\n\/* 2. \u884c\u5185\u5143\u7d20 *\/\ndisplay: inline;\n\n\/* \u7279\u70b9\uff1a\n   - \u4e0d\u72ec\u5360\u4e00\u884c\n   - \u4e0d\u80fd\u8bbe\u7f6e width\u3001height\n   - \u53ea\u6709\u5de6\u53f3 margin\u3001padding \u6709\u6548\n   - \u793a\u4f8b\uff1aspan\u3001a\u3001strong\u3001em\n*\/\n\n\/* 3. \u884c\u5185\u5757\u5143\u7d20 *\/\ndisplay: inline-block;\n\n\/* \u7279\u70b9\uff1a\n   - \u4e0d\u72ec\u5360\u4e00\u884c\n   - \u53ef\u4ee5\u8bbe\u7f6e width\u3001height\n   - \u6240\u6709\u65b9\u5411 margin\u3001padding \u90fd\u6709\u6548\n   - \u793a\u4f8b\uff1aimg\u3001input\u3001button\uff08\u9ed8\u8ba4\uff09\n*\/\n\n\/* 4. \u9690\u85cf\u5143\u7d20 *\/\ndisplay: none;\n\n\/* \u5143\u7d20\u5b8c\u5168\u4ece\u6587\u6863\u6d41\u4e2d\u79fb\u9664\uff0c\u4e0d\u5360\u7528\u7a7a\u95f4 *\/\n\n\/* 5. Flexbox \u5e03\u5c40 *\/\ndisplay: flex;\n\n\/* 6. Grid \u5e03\u5c40 *\/\ndisplay: grid;\n<\/code><\/pre>\n<h3>\u793a\u4f8b\uff1adisplay \u5bf9\u6bd4<\/h3>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt;\n    .block {\n        display: block;\n        background-color: #f44336;\n        padding: 10px;\n        margin: 10px 0;\n    }\n\n    .inline {\n        display: inline;\n        background-color: #4CAF50;\n        padding: 10px;\n        margin: 10px;\n    }\n\n    .inline-block {\n        display: inline-block;\n        background-color: #2196F3;\n        padding: 10px;\n        margin: 10px;\n        width: 100px;\n        height: 50px;\n    }\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div class=&quot;block&quot;&gt;\u5757\u7ea7\u5143\u7d20 1&lt;\/div&gt;\n    &lt;div class=&quot;block&quot;&gt;\u5757\u7ea7\u5143\u7d20 2&lt;\/div&gt;\n\n    &lt;hr&gt;\n\n    &lt;span class=&quot;inline&quot;&gt;\u884c\u5185\u5143\u7d20 1&lt;\/span&gt;\n    &lt;span class=&quot;inline&quot;&gt;\u884c\u5185\u5143\u7d20 2&lt;\/span&gt;\n    &lt;span class=&quot;inline&quot;&gt;\u884c\u5185\u5143\u7d20 3&lt;\/span&gt;\n\n    &lt;hr&gt;\n\n    &lt;div class=&quot;inline-block&quot;&gt;\u884c\u5185\u5757 1&lt;\/div&gt;\n    &lt;div class=&quot;inline-block&quot;&gt;\u884c\u5185\u5757 2&lt;\/div&gt;\n    &lt;div class=&quot;inline-block&quot;&gt;\u884c\u5185\u5757 3&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<h2>\ud83c\udfa8 Flexbox \u5e03\u5c40\uff08\u5f39\u6027\u76d2\u5b50\uff09<\/h2>\n<h3>\u4ec0\u4e48\u662f Flexbox\uff1f<\/h3>\n<p><strong>Flexbox\uff08Flexible Box\uff09<\/strong> \u662f\u4e00\u79cd\u4e00\u7ef4\u5e03\u5c40\u6a21\u578b\uff0c\u4e3b\u8981\u7528\u4e8e\u5728\u5bb9\u5668\u4e2d\u5206\u914d\u7a7a\u95f4\u548c\u5bf9\u9f50\u9879\u76ee\u3002<\/p>\n<p><strong>\u6838\u5fc3\u6982\u5ff5<\/strong>\uff1a<\/p>\n<ul>\n<li><strong>Flex \u5bb9\u5668\uff08Flex Container\uff09<\/strong>\uff1a\u7236\u5143\u7d20<\/li>\n<li><strong>Flex \u9879\u76ee\uff08Flex Items\uff09<\/strong>\uff1a\u5b50\u5143\u7d20<\/li>\n<\/ul>\n<h3>Flex \u5bb9\u5668\u5c5e\u6027<\/h3>\n<h4>1. flex-direction\uff08\u4e3b\u8f74\u65b9\u5411\uff09<\/h4>\n<pre><code class=\"language-css\">.container {\n    display: flex;\n    flex-direction: row;            \/* \u9ed8\u8ba4\uff0c\u6c34\u5e73\u65b9\u5411 *\/\n    \/* flex-direction: row-reverse;  \u6c34\u5e73\u53cd\u5411 *\/\n    \/* flex-direction: column;       \u5782\u76f4\u65b9\u5411 *\/\n    \/* flex-direction: column-reverse; \u5782\u76f4\u53cd\u5411 *\/\n}\n<\/code><\/pre>\n<p><strong>\u793a\u610f\u56fe<\/strong>\uff1a<\/p>\n<pre><code>row:           \u2192 \u2192 \u2192 \u2192 \u2192\nrow-reverse:   \u2190 \u2190 \u2190 \u2190 \u2190\n\ncolumn:        \u2193 \u2193 \u2193 \u2193 \u2193\ncolumn-reverse:\u2191 \u2191 \u2191 \u2191 \u2191\n<\/code><\/pre>\n<h4>2. flex-wrap\uff08\u6362\u884c\uff09<\/h4>\n<pre><code class=\"language-css\">.container {\n    flex-wrap: nowrap;      \/* \u9ed8\u8ba4\uff0c\u4e0d\u6362\u884c *\/\n    \/* flex-wrap: wrap;     \u6362\u884c\uff0c\u7b2c\u4e00\u884c\u5728\u4e0a\u65b9 *\/\n    \/* flex-wrap: wrap-reverse; \u6362\u884c\uff0c\u7b2c\u4e00\u884c\u5728\u4e0b\u65b9 *\/\n}\n<\/code><\/pre>\n<h4>3. flex-flow\uff08\u7b80\u5199\uff09<\/h4>\n<pre><code class=\"language-css\">.container {\n    flex-flow: row wrap;  \/* = flex-direction + flex-wrap *\/\n}\n<\/code><\/pre>\n<h4>4. justify-content\uff08\u4e3b\u8f74\u5bf9\u9f50\uff09<\/h4>\n<pre><code class=\"language-css\">.container {\n    justify-content: flex-start;    \/* \u9ed8\u8ba4\uff0c\u8d77\u70b9\u5bf9\u9f50 *\/\n    \/* justify-content: flex-end;    \u7ec8\u70b9\u5bf9\u9f50 *\/\n    \/* justify-content: center;      \u5c45\u4e2d\u5bf9\u9f50 *\/\n    \/* justify-content: space-between; \u4e24\u7aef\u5bf9\u9f50\uff0c\u9879\u76ee\u95f4\u9694\u76f8\u7b49 *\/\n    \/* justify-content: space-around; \u6bcf\u4e2a\u9879\u76ee\u4e24\u4fa7\u95f4\u9694\u76f8\u7b49 *\/\n    \/* justify-content: space-evenly; \u6240\u6709\u95f4\u9694\u76f8\u7b49 *\/\n}\n<\/code><\/pre>\n<p><strong>\u793a\u610f\u56fe<\/strong>\uff08\u4e3b\u8f74\u4e3a\u6c34\u5e73\uff09\uff1a<\/p>\n<pre><code>flex-start:    [\u25a3] [\u25a3] [\u25a3]\ncenter:          [\u25a3] [\u25a3] [\u25a3]\nspace-between: [\u25a3] --- [\u25a3] --- [\u25a3]\nspace-around:  - [\u25a3] - [\u25a3] - [\u25a3] -\n<\/code><\/pre>\n<h4>5. align-items\uff08\u4ea4\u53c9\u8f74\u5bf9\u9f50\uff09<\/h4>\n<pre><code class=\"language-css\">.container {\n    align-items: stretch;       \/* \u9ed8\u8ba4\uff0c\u62c9\u4f38\u586b\u6ee1 *\/\n    \/* align-items: flex-start;  \u8d77\u70b9\u5bf9\u9f50 *\/\n    \/* align-items: flex-end;    \u7ec8\u70b9\u5bf9\u9f50 *\/\n    \/* align-items: center;      \u5c45\u4e2d\u5bf9\u9f50 *\/\n    \/* align-items: baseline;    \u57fa\u7ebf\u5bf9\u9f50 *\/\n}\n<\/code><\/pre>\n<h4>6. align-content\uff08\u591a\u884c\u5bf9\u9f50\uff09<\/h4>\n<pre><code class=\"language-css\">.container {\n    align-content: stretch;       \/* \u9ed8\u8ba4 *\/\n    \/* align-content: flex-start; *\/\n    \/* align-content: flex-end; *\/\n    \/* align-content: center; *\/\n    \/* align-content: space-between; *\/\n    \/* align-content: space-around; *\/\n}\n<\/code><\/pre>\n<h3>Flex \u9879\u76ee\u5c5e\u6027<\/h3>\n<h4>1. flex-grow\uff08\u653e\u5927\u6bd4\u4f8b\uff09<\/h4>\n<pre><code class=\"language-css\">.item {\n    flex-grow: 0;  \/* \u9ed8\u8ba4\uff0c\u4e0d\u653e\u5927 *\/\n    \/* flex-grow: 1;  \u6240\u6709\u9879\u76ee\u5e73\u5206\u5269\u4f59\u7a7a\u95f4 *\/\n    \/* flex-grow: 2;  \u5360\u7528 2 \u4efd\u5269\u4f59\u7a7a\u95f4 *\/\n}\n<\/code><\/pre>\n<h4>2. flex-shrink\uff08\u7f29\u5c0f\u6bd4\u4f8b\uff09<\/h4>\n<pre><code class=\"language-css\">.item {\n    flex-shrink: 1;  \/* \u9ed8\u8ba4\uff0c\u53ef\u4ee5\u7f29\u5c0f *\/\n    \/* flex-shrink: 0;  \u4e0d\u7f29\u5c0f *\/\n}\n<\/code><\/pre>\n<h4>3. flex-basis\uff08\u57fa\u7840\u5927\u5c0f\uff09<\/h4>\n<pre><code class=\"language-css\">.item {\n    flex-basis: auto;  \/* \u9ed8\u8ba4 *\/\n    \/* flex-basis: 200px;  \u56fa\u5b9a\u57fa\u7840\u5927\u5c0f *\/\n    \/* flex-basis: 30%;  \u767e\u5206\u6bd4 *\/\n}\n<\/code><\/pre>\n<h4>4. flex\uff08\u7b80\u5199\uff09<\/h4>\n<pre><code class=\"language-css\">.item {\n    flex: 0 1 auto;  \/* \u9ed8\u8ba4 *\/\n    \/* flex: 1;       = flex: 1 1 0% *\/\n    \/* flex: 2;       = flex: 2 1 0% *\/\n    \/* flex: auto;    = flex: 1 1 auto *\/\n    \/* flex: none;    = flex: 0 0 auto *\/\n}\n<\/code><\/pre>\n<p><strong>\u5e38\u7528\u503c<\/strong>\uff1a<\/p>\n<pre><code class=\"language-css\">\/* \u5e73\u5206\u7a7a\u95f4 *\/\n.item {\n    flex: 1;\n}\n\n\/* \u56fa\u5b9a\u5bbd\u5ea6\uff0c\u4e0d\u653e\u5927\u4e0d\u7f29\u5c0f *\/\n.item {\n    flex: 0 0 200px;\n}\n\n\/* \u653e\u5927\u4f46\u4e0d\u7f29\u5c0f *\/\n.item {\n    flex: 1 0 auto;\n}\n<\/code><\/pre>\n<h4>5. align-self\uff08\u5355\u72ec\u5bf9\u9f50\uff09<\/h4>\n<pre><code class=\"language-css\">.item {\n    align-self: auto;  \/* \u9ed8\u8ba4\uff0c\u7ee7\u627f\u5bb9\u5668\u7684 align-items *\/\n    \/* align-self: flex-start; *\/\n    \/* align-self: flex-end; *\/\n    \/* align-self: center; *\/\n}\n<\/code><\/pre>\n<h2>\ud83c\udfae Flexbox \u793a\u4f8b<\/h2>\n<h3>\u793a\u4f8b 1: \u6c34\u5e73\u5c45\u4e2d<\/h3>\n<pre><code class=\"language-html\">&lt;style&gt;\n    .container {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        height: 200px;\n        background-color: #f0f0f0;\n    }\n\n    .box {\n        width: 100px;\n        height: 100px;\n        background-color: #4CAF50;\n    }\n&lt;\/style&gt;\n\n&lt;div class=&quot;container&quot;&gt;\n    &lt;div class=&quot;box&quot;&gt;\u5c45\u4e2d&lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<h3>\u793a\u4f8b 2: \u4e09\u680f\u5e03\u5c40<\/h3>\n<pre><code class=\"language-html\">&lt;style&gt;\n    .container {\n        display: flex;\n        height: 300px;\n    }\n\n    .sidebar-left {\n        flex: 0 0 200px;\n        background-color: #f44336;\n    }\n\n    .main {\n        flex: 1;\n        background-color: #2196F3;\n    }\n\n    .sidebar-right {\n        flex: 0 0 150px;\n        background-color: #4CAF50;\n    }\n&lt;\/style&gt;\n\n&lt;div class=&quot;container&quot;&gt;\n    &lt;div class=&quot;sidebar-left&quot;&gt;\u5de6\u4fa7\u680f&lt;\/div&gt;\n    &lt;div class=&quot;main&quot;&gt;\u4e3b\u5185\u5bb9&lt;\/div&gt;\n    &lt;div class=&quot;sidebar-right&quot;&gt;\u53f3\u4fa7\u680f&lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<h3>\u793a\u4f8b 3: \u5bfc\u822a\u680f<\/h3>\n<pre><code class=\"language-html\">&lt;style&gt;\n    .navbar {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        background-color: #333;\n        padding: 0 20px;\n        height: 60px;\n    }\n\n    .logo {\n        color: white;\n        font-size: 24px;\n        font-weight: bold;\n    }\n\n    .nav-links {\n        display: flex;\n        gap: 20px;\n    }\n\n    .nav-links a {\n        color: white;\n        text-decoration: none;\n    }\n&lt;\/style&gt;\n\n&lt;div class=&quot;navbar&quot;&gt;\n    &lt;div class=&quot;logo&quot;&gt;Logo&lt;\/div&gt;\n    &lt;div class=&quot;nav-links&quot;&gt;\n        &lt;a href=&quot;#&quot;&gt;\u9996\u9875&lt;\/a&gt;\n        &lt;a href=&quot;#&quot;&gt;\u4ea7\u54c1&lt;\/a&gt;\n        &lt;a href=&quot;#&quot;&gt;\u5173\u4e8e&lt;\/a&gt;\n        &lt;a href=&quot;#&quot;&gt;\u8054\u7cfb&lt;\/a&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<h3>\u793a\u4f8b 4: \u5361\u7247\u7f51\u683c<\/h3>\n<pre><code class=\"language-html\">&lt;style&gt;\n    .card-grid {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 20px;\n        padding: 20px;\n    }\n\n    .card {\n        flex: 0 0 calc(33.333% - 20px);\n        background-color: white;\n        border-radius: 8px;\n        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n        padding: 20px;\n    }\n\n    @media (max-width: 768px) {\n        .card {\n            flex: 0 0 calc(50% - 20px);\n        }\n    }\n\n    @media (max-width: 480px) {\n        .card {\n            flex: 0 0 100%;\n        }\n    }\n&lt;\/style&gt;\n\n&lt;div class=&quot;card-grid&quot;&gt;\n    &lt;div class=&quot;card&quot;&gt;\u5361\u7247 1&lt;\/div&gt;\n    &lt;div class=&quot;card&quot;&gt;\u5361\u7247 2&lt;\/div&gt;\n    &lt;div class=&quot;card&quot;&gt;\u5361\u7247 3&lt;\/div&gt;\n    &lt;div class=&quot;card&quot;&gt;\u5361\u7247 4&lt;\/div&gt;\n    &lt;div class=&quot;card&quot;&gt;\u5361\u7247 5&lt;\/div&gt;\n    &lt;div class=&quot;card&quot;&gt;\u5361\u7247 6&lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<h2>\ud83c\udfa8 Grid \u5e03\u5c40\u7b80\u4ecb<\/h2>\n<h3>\u4ec0\u4e48\u662f Grid\uff1f<\/h3>\n<p><strong>CSS Grid<\/strong> \u662f\u4e00\u79cd\u4e8c\u7ef4\u5e03\u5c40\u7cfb\u7edf\uff0c\u53ef\u4ee5\u540c\u65f6\u5904\u7406\u884c\u548c\u5217\u3002<\/p>\n<h3>\u57fa\u672c\u8bed\u6cd5<\/h3>\n<pre><code class=\"language-css\">.container {\n    display: grid;\n    grid-template-columns: 1fr 2fr 1fr;  \/* \u4e09\u5217\uff0c\u6bd4\u4f8b 1:2:1 *\/\n    grid-template-rows: 100px 200px;    \/* \u4e24\u884c\uff0c\u56fa\u5b9a\u9ad8\u5ea6 *\/\n    gap: 20px;                          \/* \u95f4\u8ddd *\/\n}\n\n.item {\n    grid-column: 1 \/ 3;  \/* \u8de8\u8d8a\u4e24\u5217 *\/\n    grid-row: 1 \/ 2;     \/* \u7b2c\u4e00\u884c *\/\n}\n<\/code><\/pre>\n<h3>Grid \u793a\u4f8b<\/h3>\n<pre><code class=\"language-html\">&lt;style&gt;\n    .grid-container {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        gap: 20px;\n        padding: 20px;\n    }\n\n    .grid-item {\n        background-color: #4CAF50;\n        padding: 20px;\n        text-align: center;\n        color: white;\n    }\n&lt;\/style&gt;\n\n&lt;div class=&quot;grid-container&quot;&gt;\n    &lt;div class=&quot;grid-item&quot;&gt;1&lt;\/div&gt;\n    &lt;div class=&quot;grid-item&quot;&gt;2&lt;\/div&gt;\n    &lt;div class=&quot;grid-item&quot;&gt;3&lt;\/div&gt;\n    &lt;div class=&quot;grid-item&quot;&gt;4&lt;\/div&gt;\n    &lt;div class=&quot;grid-item&quot;&gt;5&lt;\/div&gt;\n    &lt;div class=&quot;grid-item&quot;&gt;6&lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<h2>\u26a0\ufe0f \u91cd\u8981\u6ce8\u610f\u4e8b\u9879<\/h2>\n<h3>1. box-sizing \u7684\u91cd\u8981\u6027<\/h3>\n<pre><code class=\"language-css\">\/* \u5168\u5c40\u8bbe\u7f6e\uff0c\u907f\u514d\u5e03\u5c40\u610f\u5916 *\/\n* {\n    box-sizing: border-box;\n}\n<\/code><\/pre>\n<h3>2. \u54cd\u5e94\u5f0f\u8bbe\u8ba1<\/h3>\n<pre><code class=\"language-css\">\/* \u79fb\u52a8\u4f18\u5148 *\/\n.container {\n    display: flex;\n    flex-direction: column;  \/* \u79fb\u52a8\u7aef\u5782\u76f4 *\/\n}\n\n@media (min-width: 768px) {\n    .container {\n        flex-direction: row;  \/* \u684c\u9762\u7aef\u6c34\u5e73 *\/\n    }\n}\n<\/code><\/pre>\n<h3>3. \u6d4f\u89c8\u5668\u517c\u5bb9\u6027<\/h3>\n<pre><code class=\"language-css\">\/* Flexbox \u9700\u8981\u5382\u5546\u524d\u7f00\uff08\u65e7\u6d4f\u89c8\u5668\uff09*\/\n.container {\n    display: -webkit-flex;\n    display: -ms-flexbox;\n    display: flex;\n}\n<\/code><\/pre>\n<p><strong>\u73b0\u4ee3\u6d4f\u89c8\u5668\u652f\u6301<\/strong>\uff1a<\/p>\n<ul>\n<li>Flexbox\uff1aIE 11+\uff08\u90e8\u5206\u652f\u6301\uff09<\/li>\n<li>Grid\uff1aIE 11-\uff08\u4e0d\u652f\u6301\uff0c\u9700\u524d\u7f00\uff09<\/li>\n<\/ul>\n<h2>\u270d\ufe0f \u7ec3\u4e60\u4efb\u52a1<\/h2>\n<h3>\u7ec3\u4e60 1: \u5b8c\u6574\u7684\u9875\u9762\u5e03\u5c40<\/h3>\n<p><strong>\u8981\u6c42<\/strong>\uff1a<\/p>\n<ol>\n<li>\u56fa\u5b9a\u5934\u90e8\uff08\u9ad8\u5ea6 60px\uff09<\/li>\n<li>\u4e09\u680f\u5185\u5bb9\u533a\uff08\u5de6\u4fa7 200px\uff0c\u53f3\u4fa7 150px\uff0c\u4e2d\u95f4\u81ea\u9002\u5e94\uff09<\/li>\n<li>\u56fa\u5b9a\u5e95\u90e8\uff08\u9ad8\u5ea6 40px\uff09<\/li>\n<li>\u4f7f\u7528 Flexbox \u5b9e\u73b0<\/li>\n<\/ol>\n<p><strong>\u63d0\u793a<\/strong>\uff1a<\/p>\n<pre><code class=\"language-css\">body {\n    display: flex;\n    flex-direction: column;\n    min-height: 100vh;\n}\n<\/code><\/pre>\n<h3>\u7ec3\u4e60 2: \u54cd\u5e94\u5f0f\u56fe\u7247\u7f51\u683c<\/h3>\n<p><strong>\u8981\u6c42<\/strong>\uff1a<\/p>\n<ol>\n<li>\u5927\u5c4f\u5e55\uff1a4 \u5217<\/li>\n<li>\u4e2d\u7b49\u5c4f\u5e55\uff1a3 \u5217<\/li>\n<li>\u5c0f\u5c4f\u5e55\uff1a2 \u5217<\/li>\n<li>\u8d85\u5c0f\u5c4f\u5e55\uff1a1 \u5217<\/li>\n<li>\u56fe\u7247\u7b49\u9ad8\u3001\u7b49\u5bbd<\/li>\n<\/ol>\n<p><strong>\u63d0\u793a<\/strong>\uff1a\u4f7f\u7528 <code>@media<\/code> \u67e5\u8be2<\/p>\n<h3>\u7ec3\u4e60 3: \u5c45\u4e2d\u5404\u79cd\u5143\u7d20<\/h3>\n<p><strong>\u8981\u6c42<\/strong>\uff1a<\/p>\n<ol>\n<li>\u5757\u7ea7\u5143\u7d20\u6c34\u5e73\u5c45\u4e2d<\/li>\n<li>\u884c\u5185\u5143\u7d20\u6c34\u5e73\u5c45\u4e2d<\/li>\n<li>\u5143\u7d20\u5782\u76f4\u5c45\u4e2d<\/li>\n<li>\u5143\u7d20\u5b8c\u5168\u5c45\u4e2d\uff08\u6c34\u5e73+\u5782\u76f4\uff09<\/li>\n<\/ol>\n<p><strong>\u63d0\u793a<\/strong>\uff1a<\/p>\n<ul>\n<li>\u6c34\u5e73\u5c45\u4e2d\uff1a<code>margin: 0 auto<\/code> \u6216 <code>justify-content: center<\/code><\/li>\n<li>\u5782\u76f4\u5c45\u4e2d\uff1a<code>align-items: center<\/code> + <code>min-height<\/code><\/li>\n<\/ul>\n<h2>\ud83c\udf93 \u4eca\u65e5\u6311\u6218<\/h2>\n<h3>\u5b9e\u73b0\uff1a\u54cd\u5e94\u5f0f\u4e2a\u4eba\u4f5c\u54c1\u96c6\u9875\u9762<\/h3>\n<p><strong>\u5e03\u5c40\u8981\u6c42<\/strong>\uff1a<\/p>\n<ol>\n<li>\n<p><strong>\u54cd\u5e94\u5f0f\u5bfc\u822a\u680f<\/strong><\/p>\n<ul>\n<li>\u79fb\u52a8\u7aef\uff1a\u6c49\u5821\u83dc\u5355<\/li>\n<li>\u684c\u9762\u7aef\uff1a\u6c34\u5e73\u83dc\u5355<\/li>\n<li>\u4f7f\u7528 Flexbox<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>Hero \u533a\u57df<\/strong><\/p>\n<ul>\n<li>\u5168\u5c4f\u80cc\u666f<\/li>\n<li>\u5185\u5bb9\u5c45\u4e2d<\/li>\n<li>CTA \u6309\u94ae\u7ec4<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u6280\u80fd\u5c55\u793a<\/strong><\/p>\n<ul>\n<li>\u6280\u80fd\u6807\u7b7e\u4e91<\/li>\n<li>\u8fdb\u5ea6\u6761<\/li>\n<li>\u4f7f\u7528 Grid \u5e03\u5c40<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u4f5c\u54c1\u5c55\u793a<\/strong><\/p>\n<ul>\n<li>\u5361\u7247\u7f51\u683c<\/li>\n<li>\u60ac\u505c\u6548\u679c<\/li>\n<li>\u54cd\u5e94\u5f0f\uff084\u21923\u21922\u21921 \u5217\uff09<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u8054\u7cfb\u8868\u5355<\/strong><\/p>\n<ul>\n<li>\u4e24\u5217\u5e03\u5c40\uff08\u4fe1\u606f + \u8868\u5355\uff09<\/li>\n<li>\u79fb\u52a8\u7aef\u5355\u5217<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p><strong>\u6280\u672f\u8981\u70b9<\/strong>\uff1a<\/p>\n<ul>\n<li>Flexbox + Grid \u6df7\u5408\u4f7f\u7528<\/li>\n<li>\u54cd\u5e94\u5f0f\u65ad\u70b9\uff1a768px\u3001480px<\/li>\n<li>\u5e73\u6ed1\u8fc7\u6e21\u6548\u679c<\/li>\n<\/ul>\n<h2>\ud83d\udca1 \u5e38\u89c1\u95ee\u9898 FAQ<\/h2>\n<h3>Q1: Flexbox \u548c Grid \u5982\u4f55\u9009\u62e9\uff1f<\/h3>\n<p><strong>A<\/strong>:<\/p>\n<table>\n<thead>\n<tr>\n<th>\u573a\u666f<\/th>\n<th>Flexbox<\/th>\n<th>Grid<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>\u4e00\u7ef4\u5e03\u5c40<\/strong><\/td>\n<td>\u2705 \u63a8\u8350<\/td>\n<td>\u274c \u8fc7\u5ea6<\/td>\n<\/tr>\n<tr>\n<td><strong>\u4e8c\u7ef4\u5e03\u5c40<\/strong><\/td>\n<td>\u274c \u590d\u6742<\/td>\n<td>\u2705 \u63a8\u8350<\/td>\n<\/tr>\n<tr>\n<td><strong>\u5185\u5bb9\u9a71\u52a8<\/strong><\/td>\n<td>\u2705 \u7075\u6d3b<\/td>\n<td>\u26a0\ufe0f \u9700\u8ba1\u7b97<\/td>\n<\/tr>\n<tr>\n<td><strong>\u5e03\u5c40\u9a71\u52a8<\/strong><\/td>\n<td>\u26a0\ufe0f \u590d\u6742<\/td>\n<td>\u2705 \u7b80\u5355<\/td>\n<\/tr>\n<tr>\n<td><strong>\u6d4f\u89c8\u5668\u652f\u6301<\/strong><\/td>\n<td>\u2705 \u66f4\u597d<\/td>\n<td>\u26a0\ufe0f \u8f83\u65b0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>\u5efa\u8bae<\/strong>\uff1a<\/p>\n<ul>\n<li>\u7b80\u5355\u5e03\u5c40 \u2192 Flexbox<\/li>\n<li>\u590d\u6742\u4e8c\u7ef4\u5e03\u5c40 \u2192 Grid<\/li>\n<li>\u4e24\u8005\u53ef\u4ee5\u6df7\u5408\u4f7f\u7528<\/li>\n<\/ul>\n<h3>Q2: \u5982\u4f55\u5b9e\u73b0\u5b8c\u7f8e\u7684\u5782\u76f4\u5c45\u4e2d\uff1f<\/h3>\n<p><strong>A<\/strong>:<\/p>\n<pre><code class=\"language-css\">\/* \u65b9\u6cd51\uff1aFlexbox\uff08\u63a8\u8350\uff09*\/\n.parent {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n\n\/* \u65b9\u6cd52\uff1aGrid *\/\n.parent {\n    display: grid;\n    place-items: center;\n}\n\n\/* \u65b9\u6cd53\uff1a\u7edd\u5bf9\u5b9a\u4f4d + transform *\/\n.parent {\n    position: relative;\n}\n\n.child {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n}\n<\/code><\/pre>\n<h3>Q3: flex: 1 \u548c flex: auto \u6709\u4ec0\u4e48\u533a\u522b\uff1f<\/h3>\n<p><strong>A<\/strong>:<\/p>\n<pre><code class=\"language-css\">\/* flex: 1 = flex: 1 1 0% *\/\n.item {\n    flex: 1;\n    \/* \u5ffd\u7565\u5185\u5bb9\u5927\u5c0f\uff0c\u5b8c\u5168\u5e73\u5206\u7a7a\u95f4 *\/\n}\n\n\/* flex: auto = flex: 1 1 auto *\/\n.item {\n    flex: auto;\n    \/* \u8003\u8651\u5185\u5bb9\u5927\u5c0f\uff0c\u7136\u540e\u5e73\u5206\u5269\u4f59\u7a7a\u95f4 *\/\n}\n<\/code><\/pre>\n<p><strong>\u793a\u4f8b<\/strong>\uff1a<\/p>\n<pre><code class=\"language-html\">&lt;div style=&quot;display: flex; width: 600px;&quot;&gt;\n    &lt;div style=&quot;flex: 1; background: red;&quot;&gt;\n        \u77ed\u5185\u5bb9\n    &lt;\/div&gt;\n    &lt;div style=&quot;flex: 1; background: blue;&quot;&gt;\n        \u8fd9\u662f\u975e\u5e38\u975e\u5e38\u975e\u5e38\u957f\u7684\u5185\u5bb9\n    &lt;\/div&gt;\n&lt;\/div&gt;\n&lt;!-- \u4e24\u8005\u7b49\u5bbd --&gt;\n\n&lt;div style=&quot;display: flex; width: 600px;&quot;&gt;\n    &lt;div style=&quot;flex: auto; background: red;&quot;&gt;\n        \u77ed\u5185\u5bb9\n    &lt;\/div&gt;\n    &lt;div style=&quot;flex: auto; background: blue;&quot;&gt;\n        \u8fd9\u662f\u975e\u5e38\u975e\u5e38\u975e\u5e38\u957f\u7684\u5185\u5bb9\n    &lt;\/div&gt;\n&lt;\/div&gt;\n&lt;!-- \u84dd\u8272\u66f4\u5bbd\uff0c\u56e0\u4e3a\u5185\u5bb9\u66f4\u957f --&gt;\n<\/code><\/pre>\n<h3>Q4: gap \u5c5e\u6027\u7684\u517c\u5bb9\u6027\uff1f<\/h3>\n<p><strong>A<\/strong>:<\/p>\n<pre><code class=\"language-css\">\/* \u73b0\u4ee3\u6d4f\u89c8\u5668 *\/\n.container {\n    display: flex;\n    gap: 20px;\n}\n\n\/* \u65e7\u6d4f\u89c8\u5668\u56de\u9000\u65b9\u6848 *\/\n.container {\n    display: flex;\n    margin: -10px;\n}\n\n.item {\n    margin: 10px;\n}\n\n\/* \u6216\u4f7f\u7528\u8d1f margin *\/\n.container {\n    display: flex;\n}\n\n.item {\n    margin-right: 20px;\n}\n\n.item:last-child {\n    margin-right: 0;\n}\n<\/code><\/pre>\n<h3>Q5: \u5982\u4f55\u5b9e\u73b0\u7b49\u9ad8\u5217\uff1f<\/h3>\n<p><strong>A<\/strong>:<\/p>\n<pre><code class=\"language-css\">\/* Flexbox \u81ea\u52a8\u7b49\u9ad8 *\/\n.container {\n    display: flex;\n    align-items: stretch;  \/* \u9ed8\u8ba4\u503c *\/\n}\n\n.column {\n    flex: 1;\n}\n<\/code><\/pre>\n<p><strong>Grid \u4e5f\u81ea\u52a8\u7b49\u9ad8<\/strong>\uff1a<\/p>\n<pre><code class=\"language-css\">.container {\n    display: grid;\n    grid-auto-rows: 1fr;  \/* \u7b49\u9ad8 *\/\n}\n<\/code><\/pre>\n<h2>\ud83d\udcda \u62d3\u5c55\u9605\u8bfb<\/h2>\n<h3>\u76f8\u5173\u4e3b\u9898<\/h3>\n<ol>\n<li><strong>CSS \u5b9a\u4f4d<\/strong>\uff1astatic\u3001relative\u3001absolute\u3001fixed\u3001sticky<\/li>\n<li><strong>CSS \u53d8\u6362<\/strong>\uff1atransform\u3001transition\u3001animation<\/li>\n<li><strong>\u54cd\u5e94\u5f0f\u8bbe\u8ba1<\/strong>\uff1a\u5a92\u4f53\u67e5\u8be2\u3001\u79fb\u52a8\u4f18\u5148<\/li>\n<li><strong>CSS \u9884\u5904\u7406\u5668<\/strong>\uff1aSass\u3001Less<\/li>\n<\/ol>\n<h3>\u63a8\u8350\u8d44\u6e90<\/h3>\n<ul>\n<li><strong>Flexbox Froggy<\/strong>: \u4e92\u52a8\u6e38\u620f\u5b66\u4e60 Flexbox<\/li>\n<li><strong>CSS Grid Garden<\/strong>: \u4e92\u52a8\u6e38\u620f\u5b66\u4e60 Grid<\/li>\n<li><strong>Can I Use<\/strong>: \u67e5\u8be2\u6d4f\u89c8\u5668\u517c\u5bb9\u6027<\/li>\n<li><strong>MDN Web Docs<\/strong>: \u6743\u5a01\u7684 CSS \u6587\u6863<\/li>\n<\/ul>\n<hr>\n<p><strong>\u5b66\u4e60\u65f6\u95f4<\/strong>: 2026-03-13 09:14<br \/>\n<strong>\u96be\u5ea6<\/strong>: \u2b50\u2b50\u2b50\u2b50\u2606<br \/>\n<strong>\u9884\u8ba1\u7528\u65f6<\/strong>: 4-5 \u5c0f\u65f6<br \/>\n<strong>\u5173\u952e\u8bcd<\/strong>: \u76d2\u6a21\u578b, Flexbox, Grid, \u5e03\u5c40, display<br \/>\n<strong>\u76f8\u5173\u6807\u7b7e<\/strong>: #08-\u6837\u5f0f<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Day 14: \u76d2\u6a21\u578b\u4e0e\u5e03\u5c40 \ud83c\udfaf \u5b66\u4e60\u76ee\u6807 \u6df1\u5165\u7406\u89e3 CSS \u76d2\u6a21\u578b \u638c\u63e1 display \u5c5e\u6027\u548c\u5e38\u89c1\u5e03\u5c40\u65b9\u6848 &#8230; <a title=\"Day-14-\u76d2\u6a21\u578b\u4e0e\u5e03\u5c40\" class=\"read-more\" href=\"https:\/\/www.resilence.cn\/?p=256\" aria-label=\"\u7ee7\u7eed\u9605\u8bfbDay-14-\u76d2\u6a21\u578b\u4e0e\u5e03\u5c40\">\u9605\u8bfb\u66f4\u591a<\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-256","post","type-post","status-publish","format-standard","hentry","category-studycoding"],"_links":{"self":[{"href":"https:\/\/www.resilence.cn\/index.php?rest_route=\/wp\/v2\/posts\/256","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.resilence.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.resilence.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.resilence.cn\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.resilence.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=256"}],"version-history":[{"count":1,"href":"https:\/\/www.resilence.cn\/index.php?rest_route=\/wp\/v2\/posts\/256\/revisions"}],"predecessor-version":[{"id":257,"href":"https:\/\/www.resilence.cn\/index.php?rest_route=\/wp\/v2\/posts\/256\/revisions\/257"}],"wp:attachment":[{"href":"https:\/\/www.resilence.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=256"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.resilence.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=256"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.resilence.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}