{"id":72,"date":"2022-11-22T22:47:40","date_gmt":"2022-11-22T14:47:40","guid":{"rendered":"https:\/\/www.noblerock.cn\/?p=72"},"modified":"2022-11-22T22:47:40","modified_gmt":"2022-11-22T14:47:40","slug":"rock-css","status":"publish","type":"post","link":"https:\/\/www.noblerock.cn\/index.php\/2022\/11\/22\/rock-css\/","title":{"rendered":"CSS\u57fa\u7840"},"content":{"rendered":"

\u524d\u8a00<\/span><\/h1>\n

\u68b3\u7406\u4e4b\u524d\u6240\u5b66\u7684CSS\u77e5\u8bc6\u70b9\uff0c\u67e5\u6f0f\u8865\u7f3a\u3002<\/span><\/p>\n

\u4e00\u3001CSS\u6784\u9020\u5757<\/span><\/h2>\n

1. HTML\u7684\u5c40\u9650\u6027<\/span><\/strong><\/span><\/p>\n

    \n
  • \n

    HTML\u6ee1\u8db3\u4e0d\u4e86\u8bbe\u8ba1\u8005\u7684\u9700\u6c42\uff0c\u53ef\u4ee5\u5c06\u7f51\u9875\u7ed3\u6784\u4e0e\u6837\u5f0f\u76f8\u5206\u79bb\uff0c\u8fd9\u6837\u5c31\u53ef\u4ee5\u5728\u4e0d\u66f4\u6539\u7f51\u9875\u7ed3\u6784\u7684\u524d\u63d0\u4e0b\uff0c\u66f4\u6362\u7f51\u7ad9\u7684\u6837\u5f0f\u3002<\/span><\/p>\n<\/li>\n

  • \n

    \u64cd\u4f5chtml\u5c5e\u6027\u4e0d\u65b9\u4fbf<\/span><\/p>\n<\/li>\n

  • \n

    HTML\u91cc\u9762\u6dfb\u52a0\u6837\u5f0f\u5e26\u6765\u7684\u662f\u65e0\u5c3d\u7684\u81c3\u80bf\u548c\u7e41\u7410<\/span><\/p>\n<\/li>\n<\/ul>\n

    2. CSS\u7f51\u9875\u7684\u7f8e\u5bb9\u5e08<\/span><\/strong><\/span><\/p>\n

      \n
    • \n

      \u8ba9\u6211\u4eec\u7684\u7f51\u9875\u66f4\u52a0\u4e30\u5bcc\u591a\u5f69\uff0c\u5e03\u5c40\u66f4\u52a0\u7075\u6d3b\u81ea\u5982\u3002<\/span><\/p>\n<\/li>\n

    • \n

      CSS\u6700\u5927\u7684\u8d21\u732e\uff1a\u8ba9HTML\u4ece\u6837\u5f0f\u4e2d\u8131\u79bb\uff0c\u5b9e\u73b0\u4e86HTML\u4e13\u6ce8\u53bb\u505a\u7ed3\u6784\u5448\u73b0\uff0c\u6837\u5f0f\u4ea4\u7ed9CSS<\/span><\/p>\n<\/li>\n<\/ul>\n

      3. CSS<\/span><\/strong><\/span>.CSS(Cascading Style Sheets)\u901a\u5e38\u79f0\u4e3aCSS\u6837\u5f0f\u8868\u6216\u5c42\u53e0\u6837\u5f0f\u8868(\u7ea7\u8054\u6837\u5f0f\u8868)\u3002<\/span><\/p>\n

        \n
      • \n

        \u4f5c\u7528<\/span><\/strong><\/span><\/p>\n

          \n
        • \n

          \u4e3b\u8981\u7528\u4e8e\u8bbe\u7f6eHTML\u9875\u9762\u4e2d\u7684\u6587\u672c\u5185\u5bb9(\u5b57\u4f53\u3001\u5927\u5c0f\u3001\u5bf9\u9f50\u65b9\u5f0f\u7b49)\\\u56fe\u7247\u7684\u5916\u5f62(\u5bbd\u9ad8\u3001\u8fb9\u6846\u6837\u5f0f\u3001\u8fb9\u8ddd\u7b49)\u4ee5\u53ca\u7248\u9762\u7684\u5e03\u5c40\u548c\u5916\u89c2\u663e\u793a\u6837\u5f0f\u3002<\/span><\/p>\n<\/li>\n

        • \n

          CSS\u4ee5HTML\u4e3a\u57fa\u7840\uff0c\u63d0\u4f9b\u4e86\u4e30\u5bcc\u7684\u529f\u80fd\uff0c\u5982\u5b57\u4f53\u3001\u6837\u5f0f\u3001\u80cc\u666f\u7684\u63a7\u5236\u53ca\u6574\u4f53\u6392\u7248\u7b49\uff0c\u800c\u4e14\u53ef\u4ee5\u9488\u5bf9\u4e0d\u540c\u7684\u6d4f\u89c8\u5668\u8bbe\u7f6e\u4e0d\u540c\u7684\u6837\u5f0f\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n

          4. CSS\u6ce8\u91ca<\/span><\/strong><\/span><\/p>\n

          \/* \u8fd9\u662f\u6ce8\u91ca *\/<\/span><\/pre>\n
          \u5f15\u5165CSS\u6837\u5f0f\u8868<\/span><\/h3>\n
          1.\u884c\u5185\u5f0f(\u5185\u8054\u6837\u5f0f)<\/span><\/strong><\/span><\/p>\n
          \u901a\u8fc7\u6807\u7b7e\u7684style\u5c5e\u6027\u6765\u8bbe\u7f6e\u5143\u7d20\u7684\u6837\u5f0f<\/span><\/p>\n
            \n
          • \n
            style\u5176\u5b9e\u5c31\u662f\u6807\u7b7e\u7684\u5c5e\u6027<\/span><\/p>\n<\/li>\n
          • \n
            \u6837\u5f0f\u5c5e\u6027\u548c\u503c\u4e2d\u95f4\u662f:<\/span><\/p>\n<\/li>\n
          • \n
            \u591a\u7ec4\u5c5e\u6027\u503c\u76f4\u63a5\u7528;\u9694\u5f00<\/span><\/p>\n<\/li>\n
          • \n
            \u53ea\u80fd\u63a7\u5236\u5f53\u524d\u7684\u6807\u7b7e\u548c\u4ee5\u53ca\u5d4c\u5957\u5728\u5176\u4e2d\u7684\u5b57\u6807\u7b7e\uff0c\u9020\u6210\u4ee3\u7801\u5197\u4f59\u3002<\/span><\/p>\n<\/li>\n
          • \n
            \u7f3a\u70b9:<\/span><\/strong><\/span>\u6ca1\u6709\u5b9e\u73b0\u6837\u5f0f\u548c\u7ed3\u6784\u76f8\u5206\u79bb\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n
            <\u6807\u7b7e\u540d style=\"\u5c5e\u60271:\u5c5e\u6027\u503c1; \u5c5e\u60272:\u5c5e\u6027\u503c2; \u5c5e\u60273:\u5c5e\u6027\u503c3;\"> \u5185\u5bb9 <\/\u6807\u7b7e\u540d><\/span>\r\n\u4f8b\u5982\uff1a<\/span>\r\n<div style=\"color: red; font-size: 12px;\">\u9752\u6625\u4e0d\u5e38\u5728\uff0c\u6293\u7d27\u8c08\u604b\u7231<\/div><\/span><\/pre>\n
            2.\u5185\u90e8\u6837\u5f0f\u8868(\u5185\u5d4c\u6837\u5f0f\u8868)<\/span><\/strong><\/span><\/p>\n
            \u4e5f\u79f0\u4e3a\u5185\u5d4c\u5f0f\uff0c\u5c06CSS\u4ee3\u7801\u96c6\u4e2d\u5199\u5728HTML\u6587\u6863\u7684head\u5934\u90e8\u6807\u7b7e\u4e2d\uff0c\u5e76\u4e14\u7528style\u6807\u7b7e\u5b9a\u4e49\u3002<\/span><\/p>\n
              \n
            • \n
              style\u6807\u7b7e\u4e00\u822c\u4f4d\u4e8ehead\u6807\u7b7e\u4e2d\uff0c\u5f53\u7136\u7406\u8bba\u4e0a\u4ed6\u53ef\u4ee5\u653e\u5728HTML\u6587\u6863\u7684\u4efb\u4f55\u5730\u65b9\u3002<\/span><\/p>\n<\/li>\n
            • \n
              type=”text\/css” \u5728html5\u4e2d\u53ef\u4ee5\u7701\u7565\u3002<\/span><\/p>\n<\/li>\n
            • \n
              \u53ea\u80fd\u63a7\u5236\u5f53\u524d\u7684\u9875\u9762<\/span><\/p>\n<\/li>\n
            • \n
              \u7f3a\u70b9:<\/span><\/strong><\/span>\u6ca1\u6709\u5f7b\u5e95\u5206\u79bb\u7ed3\u6784\u4e0e\u6837\u5f0f<\/span><\/p>\n<\/li>\n<\/ul>\n
              <head><\/span>\r\n<style type=\"text\/CSS\"><\/span>\r\n \u00a0  \u9009\u62e9\u5668\uff08\u9009\u62e9\u7684\u6807\u7b7e\uff09 { <\/span>\r\n \u00a0 \u00a0  \u5c5e\u60271: \u5c5e\u6027\u503c1;<\/span>\r\n \u00a0 \u00a0  \u5c5e\u60272: \u5c5e\u6027\u503c2; <\/span>\r\n \u00a0 \u00a0  \u5c5e\u60273: \u5c5e\u6027\u503c3;<\/span>\r\n \u00a0  }<\/span>\r\n<\/style><\/span>\r\n<\/head><\/span><\/pre>\n
              3.\u5916\u90e8\u6837\u5f0f\u8868(\u5916\u94fe\u5f0f)<\/span><\/strong><\/span><\/p>\n
              \u4e5f\u79f0\u94fe\u5165\u5f0f\uff0c\u662f\u5c06\u6240\u6709\u7684\u6837\u5f0f\u653e\u5728\u4e00\u4e2a\u6216\u591a\u4e2a\u4ee5.css\u4e3a\u6269\u5c55\u540d\u7684\u5916\u90e8\u6837\u5f0f\u8868\u6587\u4ef6\u4e2d\uff0c\u901a\u8fc7link\u6807\u7b7e\u5c06\u5916\u90e8\u6837\u5f0f\u8868\u6587\u4ef6\u94fe\u63a5\u5230HTML\u6587\u6863\u4e2d\u3002<\/span><\/p>\n
                \n
              • \n
                rel<\/code><\/span>:\u5b9a\u4e49\u5f53\u524d\u6587\u6863\u4e0e\u88ab\u94fe\u63a5\u6587\u6863\u4e4b\u95f4\u7684\u5173\u7cfb\uff0c\u5728\u8fd9\u91cc\u9700\u8981\u6307\u5b9a\u4e3a\u201cstylesheet\u201d\uff0c\u8868\u793a\u88ab\u94fe\u63a5\u7684\u6587\u6863\u662f\u4e00\u4e2a\u6837\u5f0f\u8868\u6587\u4ef6\u3002<\/span><\/p>\n<\/li>\n
              • \n
                href<\/code><\/span>:\u5b9a\u4e49\u6240\u94fe\u63a5\u5916\u90e8\u6837\u5f0f\u8868\u6587\u4ef6\u7684URL\uff0c\u53ef\u4ee5\u662f\u76f8\u5bf9\u8def\u5f84\uff0c\u4e5f\u53ef\u4ee5\u662f\u7edd\u5bf9\u8def\u5f84\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n
                <link rel=\"stylesheet\" href=\"index.css\"><\/span><\/pre>\n
                4.\u56e2\u961f\u7ea6\u5b9a-\u4ee3\u7801\u98ce\u683c<\/span><\/strong><\/span><\/p>\n
                \/*1.\u7d27\u51d1\u683c\u5f0f (Compact)*\/<\/span>\r\nh3 { color: deeppink;font-size: 20px;}<\/span>\r\n\/\/ 2.\u4e00\u79cd\u662f\u5c55\u5f00\u683c\u5f0f\uff08\u63a8\u8350\uff09<\/span>\r\nh3 {<\/span>\r\n color: deeppink;<\/span>\r\n \u00a0  font-size: 20px; \u00a0 \u00a0<\/span>\r\n}<\/span>\r\n\u200b<\/span>\r\n\/* \u56e2\u961f\u7ea6\u5b9a-\u4ee3\u7801\u5927\u5c0f\u5199*\/<\/span>\r\n\/* \u6837\u5f0f\u9009\u62e9\u5668\uff0c\u5c5e\u6027\u540d\uff0c\u5c5e\u6027\u503c\u5173\u952e\u5b57\u5168\u90e8\u4f7f\u7528\u5c0f\u5199\u5b57\u6bcd\u4e66\u5199\uff0c\u5c5e\u6027\u5b57\u7b26\u4e32\u5141\u8bb8\u4f7f\u7528\u5927\u5c0f\u5199\u3002*\/<\/span>\r\n\/* \u63a8\u8350 *\/<\/span>\r\nh3{<\/span>\r\n color: pink;<\/span>\r\n}<\/span>\r\n \r\n\/* \u4e0d\u63a8\u8350 *\/<\/span>\r\nH3{<\/span>\r\n COLOR: PINK;<\/span>\r\n}<\/span><\/pre>\n
                \u4e8c\u3001CSS\u57fa\u7840\u9009\u62e9\u5668<\/span><\/h2>\n
                CSS\u9009\u62e9\u5668\u4f5c\u7528<\/span><\/h3>\n
                \u627e\u5230\u6307\u5b9a\u7684HTML\u9875\u9762\u5143\u7d20\uff0c\u9009\u62e9\u6807\u7b7e\u3002<\/span><\/p>\n
                CSS\u57fa\u7840\u9009\u62e9\u5668<\/span><\/h3>\n
                \u300c1. \u6807\u7b7e\u9009\u62e9\u5668\u300d<\/span><\/strong><\/span><\/p>\n
                  \n
                • \n
                  \u6807\u7b7e\u9009\u62e9\u5668\uff08\u5143\u7d20\u9009\u62e9\u5668\uff09\u662f\u6307\u7528HTML\u6807\u7b7e\u540d\u79f0\u4f5c\u4e3a\u9009\u62e9\u5668\uff0c\u6309\u6807\u7b7e\u540d\u79f0\u5206\u7c7b\uff0c\u4e3a\u9875\u9762\u4e2d\u67d0\u4e00\u7c7b\u6807\u7b7e\u6307\u5b9a\u7edf\u4e00\u7684CSS\u6837\u5f0f\u3002<\/span><\/p>\n<\/li>\n
                • \n
                  \u4f5c\u7528\uff1a\u53ef\u4ee5\u628a\u67d0\u4e00\u7c7b\u6807\u7b7e\u5168\u90e8\u9009\u62e9\u51fa\u6765\u3002<\/span><\/p>\n<\/li>\n
                • \n
                  \u4f18\u70b9\uff1a\u5feb\u901f\u4e3a\u7f51\u9875\u4e2d\u540c\u7c7b\u578b\u7684\u6807\u7b7e\u7edf\u4e00\u6837\u5f0f<\/span><\/p>\n<\/li>\n
                • \n
                  \u7f3a\u70b9\uff1a\u4e0d\u80fd\u8bbe\u8ba1\u5dee\u5f02\u5316\u6837\u5f0f\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n
                  \u6807\u7b7e\u540d{\u5c5e\u60271:\u5c5e\u6027\u503c1; \u5c5e\u60272:\u5c5e\u6027\u503c2; \u5c5e\u60273:\u5c5e\u6027\u503c3; } <\/span><\/pre>\n
                  2. \u7c7b\u9009\u62e9\u5668<\/span><\/strong><\/span><\/p>\n
                    \n
                  • \n
                    \u7c7b\u9009\u62e9\u5668\u4f7f\u7528”.”(\u82f1\u6587\u70b9\u53f7)\u8fdb\u884c\u6807\u8bc6\uff0c\u540e\u9762\u7d27\u8ddf\u7c7b\u540d\u3002<\/span><\/p>\n<\/li>\n
                  • \n
                    \u8bed\u6cd5\uff1a\u7c7b\u540d\u9009\u62e9\u5668<\/span><\/p>\n<\/li>\n<\/ul>\n
                    .\u7c7b\u540d  { \u00a0 <\/span>\r\n \u00a0  \u5c5e\u60271:\u5c5e\u6027\u503c1; <\/span>\r\n \u00a0  \u5c5e\u60272:\u5c5e\u6027\u503c2; <\/span>\r\n \u00a0  \u5c5e\u60273:\u5c5e\u6027\u503c3; \u00a0 \u00a0 <\/span>\r\n}<\/span>\r\n<p class='\u7c7b\u540d'><\/p><\/span><\/pre>\n
                      \n
                    • \n
                      \u4f18\u70b9<\/code><\/span>\uff1a\u53ef\u4ee5\u4e3a\u5143\u7d20\u5bf9\u8c61\u5b9a\u4e49\u5355\u72ec\u6216\u76f8\u540c\u7684\u6837\u5f0f\u3002\u53ef\u4ee5\u9009\u62e9\u4e00\u4e2a\u6216\u8005\u591a\u4e2a\u6807\u7b7e\u3002<\/span><\/p>\n<\/li>\n
                    • \n
                      \u6ce8\u610f<\/code><\/span>\uff1a\u7c7b\u9009\u62e9\u5668\u4f7f\u7528\u201c.\u201d\uff08\u82f1\u6587\u70b9\u53f7\uff09\u8fdb\u884c\u6807\u8bc6\uff0c\u540e\u9762\u7d27\u8ddf\u7c7b\u540d(\u81ea\u5b9a\u4e49\uff0c\u6211\u4eec\u81ea\u5df1\u547d\u540d\u7684)<\/span><\/p>\n
                        \n
                      • \n
                        \u957f\u540d\u79f0\u6216\u8bcd\u7ec4\u53ef\u4ee5\u4f7f\u7528\u4e2d\u6a2a\u7ebf\u6765\u4e3a\u9009\u62e9\u5668\u547d\u540d\u3002<\/span><\/p>\n<\/li>\n
                      • \n
                        \u4e0d\u8981\u7eaf\u6570\u5b57\u3001\u4e2d\u6587\u7b49\u547d\u540d\uff0c \u5c3d\u91cf\u4f7f\u7528\u82f1\u6587\u5b57\u6bcd\u6765\u8868\u793a\u3002<\/span><\/p>\n<\/li>\n
                      • \n
                        \u591a\u7c7b\u540d\u9009\u62e9\u5668\uff1a\u5404\u4e2a\u7c7b\u540d\u4e2d\u95f4\u7528\u7a7a\u683c\u9694\u5f00\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
                        3. id\u9009\u62e9\u5668<\/span><\/strong><\/span>id\u9009\u62e9\u5668\u4f7f\u7528<\/span>#<\/code><\/span>\u8fdb\u884c\u6807\u8bc6\uff0c\u540e\u9762\u7d27\u8ddfid\u540d<\/span><\/p>\n
                          \n
                        • \n
                          \u5143\u7d20\u7684id\u503c\u662f\u552f\u4e00\u7684\uff0c\u53ea\u80fd\u5bf9\u5e94\u4e8e\u6587\u6863\u4e2d\u67d0\u4e00\u4e2a\u5177\u4f53\u7684\u5143\u7d20\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n
                          #id\u540d {\u5c5e\u60271:\u5c5e\u6027\u503c1; \u5c5e\u60272:\u5c5e\u6027\u503c2; \u5c5e\u60273:\u5c5e\u6027\u503c3; }<\/span>\r\n<p id=\"id\u540d\"><\/p><\/span><\/pre>\n
                          4. \u901a\u914d\u7b26\u9009\u62e9\u5668<\/span><\/strong><\/span><\/p>\n
                          \u901a\u914d\u7b26\u9009\u62e9\u5668\u7528<\/span>*<\/code><\/span>\u53f7\u8868\u793a\uff0c<\/span>*<\/code><\/span> \u5c31\u662f\u9009\u62e9\u6240\u6709\u7684\u6807\u7b7e\u3002\u5b83\u662f\u6240\u6709\u9009\u62e9\u5668\u4e2d\u4f5c\u7528\u8303\u56f4\u6700\u5e7f\u7684\uff0c\u80fd\u5339\u914d\u9875\u9762\u4e2d\u6240\u6709\u7684\u5143\u7d20\u3002<\/span><\/p>\n
                            \n
                          • \n
                            \u6ce8\u610f<\/code><\/span>\uff1a\u4f1a\u5339\u914d\u9875\u9762\u6240\u6709\u7684\u5143\u7d20\uff0c\u964d\u4f4e\u9875\u9762\u54cd\u5e94\u901f\u5ea6\uff0c\u4e0d\u5efa\u8bae\u968f\u4fbf\u4f7f\u7528<\/span><\/p>\n<\/li>\n<\/ul>\n
                            * { \u5c5e\u60271:\u5c5e\u6027\u503c1; \u5c5e\u60272:\u5c5e\u6027\u503c2; \u5c5e\u60273:\u5c5e\u6027\u503c3; }<\/span><\/pre>\n
                            \u4f8b\u5982\u4e0b\u9762\u4ee3\u7801\uff0c\u4f7f\u7528\u901a\u914d\u7b26\u9009\u62e9\u5668\u5b9a\u4e49CSS\u6837\u5f0f\uff0c\u6e05\u9664\u6240\u6709HTML\u6807\u8bb0\u7684\u9ed8\u8ba4\u8fb9\u8ddd\u3002<\/span><\/p>\n
                            * {<\/span>\r\n  margin: 0; \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0  \/* \u5b9a\u4e49\u5916\u8fb9\u8ddd*\/<\/span>\r\n  padding: 0; \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/* \u5b9a\u4e49\u5185\u8fb9\u8ddd*\/<\/span>\r\n}<\/span><\/pre>\n
                            5. \u57fa\u7840\u9009\u62e9\u5668\u603b\u7ed3<\/span><\/strong><\/span><\/p>\n
                            \n\n\n\n\n\n\n\n\n
                            \u9009\u62e9\u5668<\/span><\/span><\/th>\n\u4f5c\u7528<\/span><\/span><\/th>\n\u7f3a\u70b9<\/span><\/span><\/th>\n\u4f7f\u7528\u60c5\u51b5<\/span><\/span><\/th>\n\u7528\u6cd5<\/span><\/span><\/th>\n<\/tr>\n<\/thead>\n
                            \u6807\u7b7e\u9009\u62e9\u5668<\/span><\/span><\/td>\n\u53ef\u4ee5\u9009\u51fa\u6240\u6709\u76f8\u540c\u7684\u6807\u7b7e\uff0c\u6bd4\u5982p<\/span><\/span><\/td>\n\u4e0d\u80fd\u5dee\u5f02\u5316\u9009\u62e9<\/span><\/span><\/td>\n\u8f83\u591a<\/span><\/span><\/td>\np { color\uff1ared;}<\/span><\/span><\/td>\n<\/tr>\n
                            \u7c7b\u9009\u62e9\u5668<\/span><\/span><\/td>\n\u53ef\u4ee5\u9009\u51fa1\u4e2a\u6216\u8005\u591a\u4e2a\u6807\u7b7e<\/span><\/span><\/td>\n\u53ef\u4ee5\u6839\u636e\u9700\u6c42\u9009\u62e9<\/span><\/span><\/td>\n\u975e\u5e38\u591a<\/span><\/span><\/td>\n.nav { color: red; }<\/span><\/span><\/td>\n<\/tr>\n
                            id\u9009\u62e9\u5668<\/span><\/span><\/td>\n\u4e00\u6b21\u53ea\u80fd\u9009\u62e9\u56681\u4e2a\u6807\u7b7e<\/span><\/span><\/td>\n\u53ea\u80fd\u4f7f\u7528\u4e00\u6b21<\/span><\/span><\/td>\n\u4e0d\u63a8\u8350\u4f7f\u7528<\/span><\/span><\/td>\n#nav {color: red;}<\/span><\/span><\/td>\n<\/tr>\n
                            \u901a\u914d\u7b26\u9009\u62e9\u5668<\/span><\/span><\/td>\n\u9009\u62e9\u6240\u6709\u7684\u6807\u7b7e<\/span><\/span><\/td>\n\u9009\u62e9\u7684\u592a\u591a\uff0c\u6709\u90e8\u5206\u4e0d\u9700\u8981<\/span><\/span><\/td>\n\u4e0d\u63a8\u8350\u4f7f\u7528<\/span><\/span><\/td>\n* {color: red;}<\/span><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
                            6. \u56e2\u961f\u7ea6\u5b9a-\u9009\u62e9\u5668<\/span><\/strong><\/span><\/p>\n
                              \n
                            1. \n
                              \u5c3d\u91cf\u5c11\u7528\u901a\u914d\u7b26\u9009\u62e9\u5668 <\/span>*<\/code><\/span>\u3002<\/span><\/p>\n<\/li>\n
                            2. \n
                              \u5c3d\u91cf\u5c11\u7528ID\u9009\u62e9\u5668<\/span><\/p>\n<\/li>\n
                            3. \n
                              \u4e0d\u4f7f\u7528\u65e0\u5177\u4f53\u8bed\u4e49\u5b9a\u4e49\u7684\u6807\u7b7e\u9009\u62e9\u5668\u3002<\/span><\/p>\n<\/li>\n<\/ol>\n
                              \/* \u63a8\u8350 *\/<\/span>\r\n.jdc {}<\/span>\r\nli {}<\/span>\r\np{}<\/span>\r\n\u200b<\/span>\r\n\/* \u4e0d\u63a8\u8350 *\/<\/span>\r\n*{}<\/span>\r\n#jdc {}<\/span>\r\ndiv{} \u00a0 \u56e0\u4e3adiv \u6ca1\u6709\u8bed\u4e49\uff0c\u6211\u4eec\u5c3d\u91cf\u5c11\u7528<\/span><\/pre>\n
                              CSS\u590d\u5408\u9009\u62e9\u5668<\/span><\/h3>\n
                              \u590d\u5408\u9009\u62e9\u5668\u662f\u7531\u4e24\u4e2a\u6216\u591a\u4e2a\u57fa\u7840\u9009\u62e9\u5668\uff0c\u901a\u8fc7\u4e0d\u540c\u7684\u65b9\u5f0f\u7ec4\u5408\u800c\u6210\u7684<\/span><\/p>\n
                              1. \u540e\u4ee3\u9009\u62e9\u5668<\/span><\/strong><\/span>\u53c8\u79f0\u4e3a\u5305\u542b\u9009\u62e9\u5668<\/span><\/p>\n
                                \n
                              • \n
                                \u7528\u6765\u9009\u62e9\u5143\u7d20\u6216\u5143\u7d20\u7ec4\u7684\u5b50\u5b59\u540e\u4ee3<\/span><\/p>\n<\/li>\n
                              • \n
                                \u5176\u5199\u6cd5\u5c31\u662f\u628a\u5916\u5c42\u6807\u7b7e\u5199\u5728\u524d\u9762\uff0c\u5185\u5c42\u6807\u7b7e\u5199\u5728\u540e\u9762\uff0c\u4e2d\u95f4\u7528<\/span>\u300c\u7a7a\u683c\u300d<\/span><\/strong><\/span>\u5206\u9694\uff0c\u5148\u5199\u7236\u4eb2\u7237\u7237\uff0c\u518d\u5199\u513f\u5b50\u5b59\u5b50\u3002<\/span><\/p>\n<\/li>\n
                              • \n
                                \u5b50\u5b59\u540e\u4ee3\u90fd\u53ef\u4ee5\u8fd9\u4e48\u9009\u62e9\u3002\u6216\u8005\u8bf4\uff0c\u5b83\u80fd\u9009\u62e9\u4efb\u4f55\u5305\u542b\u5728\u5185 \u7684\u6807\u7b7e\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n
                                \u7236\u7ea7 \u5b50\u7ea7{\u5c5e\u6027:\u5c5e\u6027\u503c;\u5c5e\u6027:\u5c5e\u6027\u503c;}<\/span>\r\n\u200b<\/span>\r\n.class h3 {color:red;font-size:16px;}<\/span><\/pre>\n
                                  \n
                                • \n
                                  \u5f53\u6807\u7b7e\u53d1\u751f\u5d4c\u5957\u65f6\uff0c\u5185\u5c42\u6807\u7b7e\u5c31\u6210\u4e3a\u5916\u5c42\u6807\u7b7e\u7684\u540e\u4ee3\u3002<\/span><\/p>\n<\/li>\n
                                • \n
                                  \u5b50\u5b59\u540e\u4ee3\u90fd\u53ef\u4ee5\u8fd9\u4e48\u9009\u62e9\u3002\u6216\u8005\u8bf4\uff0c\u5b83\u80fd\u9009\u62e9\u4efb\u4f55\u5305\u542b\u5728\u5185\u7684\u6807\u7b7e\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n
                                  2. \u5b50\u5143\u7d20\u9009\u62e9\u5668<\/span><\/strong><\/span><\/p>\n
                                    \n
                                  • \n
                                    \u5b50\u5143\u7d20\u9009\u62e9\u5668\u53ea\u80fd\u9009\u62e9\u4f5c\u4e3a\u67d0\u5143\u7d20\u5b50\u5143\u7d20(\u4eb2\u513f\u5b50)\u7684\u5143\u7d20\u3002<\/span><\/p>\n<\/li>\n
                                  • \n
                                    \u5176\u5199\u6cd5\u5c31\u662f\u628a\u7236\u7ea7\u6807\u7b7e\u5199\u5728\u524d\u9762\uff0c\u5b50\u7ea7\u6807\u7b7e\u5199\u5728\u540e\u9762\uff0c\u4e2d\u95f4\u8ddf\u4e00\u4e2a <\/span>><\/code><\/span> \u8fdb\u884c\u8fde\u63a5<\/span><\/p>\n<\/li>\n
                                  • \n
                                    \u8fd9\u91cc\u7684\u5b50,\u6307\u7684\u662f\u4eb2\u513f\u5b50\u3002\u4e0d\u5305\u542b\u5b59\u5b50 \u91cd\u5b59\u5b50\u4e4b\u7c7b\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n
                                    .class>h3 {color:red;font-size:14px;}<\/span><\/pre>\n
                                    3. \u4ea4\u96c6\u9009\u62e9\u5668<\/span><\/strong><\/span><\/p>\n
                                      \n
                                    • \n
                                      \u5176\u4e2d\u7b2c\u4e00\u4e2a\u4e3a\u6807\u7b7e\u9009\u62e9\u5668\uff0c\u7b2c\u4e8c\u4e2a\u4e3aclass\u9009\u62e9\u5668\uff0c\u4e24\u4e2a\u9009\u62e9\u5668\u4e4b\u95f4<\/span>\u4e0d\u80fd\u6709\u7a7a\u683c<\/code><\/span>\uff0c\u5982h3.special\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n
                                      \u4ea4\u96c6\u9009\u62e9\u5668\u662f\u5e76\u4e14\u7684\u610f\u601d,\u5373...\u53c8...\u7684\u610f\u601d<\/span>\r\n\u6bd4\u5982\uff1a \u00a0 p.one \u00a0 \u9009\u62e9\u7684\u662f\uff1a \u7c7b\u540d\u4e3a .one \u7684\u6bb5\u843d\u6807\u7b7e\u3002 <\/span>\r\n\/*\u7528\u7684\u76f8\u5bf9\u6765\u8bf4\u6bd4\u8f83\u5c11\uff0c\u4e0d\u5efa\u8bae\u4f7f\u7528\u3002*\/<\/span><\/pre>\n
                                      4. \u5e76\u96c6\u9009\u62e9\u5668<\/span><\/strong><\/span>\u5982\u679c\u67d0\u4e9b\u9009\u62e9\u5668\u5b9a\u4e49\u7684\u76f8\u540c\u6837\u5f0f\uff0c\u5c31\u53ef\u4ee5\u5229\u7528\u5e76\u96c6\u9009\u62e9\u5668\uff0c\u53ef\u4ee5\u8ba9\u4ee3\u7801\u66f4\u7b80\u6d01\u3002\u5e76\u96c6\u9009\u62e9\u5668\uff08CSS\u9009\u62e9\u5668\u5206\u7ec4\uff09\u662f\u5404\u4e2a\u9009\u62e9\u5668\u901a\u8fc7<\/span>,<\/code><\/span>\u8fde\u63a5\u800c\u6210\u7684\uff0c\u901a\u5e38\u7528\u4e8e\u96c6\u4f53\u58f0\u660e\u3002<\/span><\/p>\n
                                        \n
                                      • \n
                                        \u4efb\u4f55\u5f62\u5f0f\u7684\u9009\u62e9\u5668\uff08\u5305\u62ec\u6807\u7b7e\u9009\u62e9\u5668\u3001class\u7c7b\u9009\u62e9\u5668 id\u9009\u62e9\u5668\u7b49\uff09\uff0c\u90fd\u53ef\u4ee5\u4f5c\u4e3a\u5e76\u96c6\u9009\u62e9\u5668\u7684\u4e00\u90e8\u5206\u3002<\/span><\/p>\n<\/li>\n
                                      • \n
                                        \u5e76\u96c6\u9009\u62e9\u5668\u901a\u5e38\u7528\u4e8e\u96c6\u4f53\u58f0\u660e \uff0c\u9017\u53f7\u9694\u5f00\u7684\uff0c\u6240\u6709\u9009\u62e9\u5668\u90fd\u4f1a\u6267\u884c\u540e\u9762\u6837\u5f0f\uff0c\u9017\u53f7\u53ef\u4ee5\u7406\u89e3\u4e3a\u548c\u7684\u610f\u601d\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n
                                        \u6bd4\u5982 \u00a0<\/span>\r\n.one, <\/span>\r\np , <\/span>\r\n#test {color: #F00;} \u00a0<\/span>\r\n\u8868\u793a \u00a0 .one \u548c p  \u548c #test \u8fd9\u4e09\u4e2a\u9009\u62e9\u5668\u90fd\u4f1a\u6267\u884c\u989c\u8272\u4e3a\u7ea2\u8272\u3002 <\/span>\r\n\u901a\u5e38\u7528\u4e8e\u96c6\u4f53\u58f0\u660e\u3002<\/span><\/pre>\n
                                        5. \u94fe\u63a5\u4f2a\u7c7b\u9009\u62e9\u5668<\/span><\/strong><\/span><\/p>\n
                                        \u7528\u4e8e\u5411\u67d0\u4e9b\u9009\u62e9\u5668\u6dfb\u52a0\u7279\u6b8a\u7684\u6548\u679c\u3002\u5199\u7684\u65f6\u5019\uff0c\u4ed6\u4eec\u7684\u987a\u5e8f\u5c3d\u91cf\u4e0d\u8981\u98a0\u5012,\u6309\u7167lvha\u7684\u987a\u5e8f\u3002\u5426\u5219\u53ef\u80fd\u5f15\u8d77\u9519\u8bef\u3002<\/span><\/p>\n
                                        \u94fe\u63a5\u4f2a\u7c7b\uff0c\u662f\u5229\u7528\u4ea4\u96c6\u9009\u62e9\u5668.<\/span><\/p>\n
                                          \n
                                        • \n
                                          a:link<\/code><\/span> \u672a\u8bbf\u95ee\u7684\u94fe\u63a5<\/span><\/p>\n<\/li>\n
                                        • \n
                                          a:visited<\/code><\/span> \u5df2\u8bbf\u95ee\u7684\u94fe\u63a5<\/span><\/p>\n<\/li>\n
                                        • \n
                                          a:hover<\/code><\/span> \u9f20\u6807\u79fb\u52a8\u5230\u94fe\u63a5\u4e0a<\/span><\/p>\n<\/li>\n
                                        • \n
                                          a:active<\/code><\/span> \u9009\u5b9a\u7684\u94fe\u63a5<\/span><\/p>\n<\/li>\n<\/ul>\n
                                          \u5b9e\u9645\u5de5\u4f5c\u4e2d\uff0c\u5f88\u5c11\u5199\u5168\u56db\u4e2a\u72b6\u6001\uff0c\u4e00\u822c\u5199\u6cd5\u5982\u4e0b\uff1a<\/span><\/h5>\n
                                          a { \u00a0 \/* a\u662f\u6807\u7b7e\u9009\u62e9\u5668  \u6240\u6709\u7684\u94fe\u63a5 *\/<\/span>\r\n \u00a0 font-weight: 700;<\/span>\r\n \u00a0 font-size: 16px;<\/span>\r\n \u00a0 color: gray;<\/span>\r\n \u00a0 \u00a0  text-decoration: none; \/* \u6e05\u9664\u94fe\u63a5\u9ed8\u8ba4\u7684\u4e0b\u5212\u7ebf*\/<\/span>\r\n}<\/span>\r\na:hover { \u00a0 \/* :hover \u662f\u94fe\u63a5\u4f2a\u7c7b\u9009\u62e9\u5668 \u9f20\u6807\u7ecf\u8fc7 *\/<\/span>\r\n \u00a0 color: red; \/*  \u9f20\u6807\u7ecf\u8fc7\u7684\u65f6\u5019\uff0c\u7531\u539f\u6765\u7684 \u7070\u8272 \u53d8\u6210\u4e86\u7ea2\u8272 *\/<\/span>\r\n}<\/span><\/pre>\n
                                          6. \u590d\u5408\u9009\u62e9\u5668\u603b\u7ed3<\/span><\/strong><\/span><\/p>\n
                                          \n\n\n\n\n\n\n\n\n\n
                                          \u9009\u62e9\u5668<\/span><\/span><\/th>\n\u4f5c\u7528<\/span><\/span><\/th>\n\u7279\u5f81<\/span><\/span><\/th>\n\u4f7f\u7528\u60c5\u51b5<\/span><\/span><\/th>\n\u9694\u5f00\u7b26\u53f7\u53ca\u7528\u6cd5<\/span><\/span><\/th>\n<\/tr>\n<\/thead>\n
                                          \u540e\u4ee3\u9009\u62e9\u5668<\/span><\/span><\/td>\n\u7528\u6765\u9009\u62e9\u5143\u7d20\u540e\u4ee3<\/span><\/span><\/td>\n\u662f\u9009\u62e9\u6240\u6709\u7684\u5b50\u5b59\u540e\u4ee3<\/span><\/span><\/td>\n\u8f83\u591a<\/span><\/span><\/td>\n\u7b26\u53f7\u662f<\/span>\u7a7a\u683c<\/code><\/span> .nav a<\/span><\/span><\/td>\n<\/tr>\n
                                          \u5b50\u4ee3\u9009\u62e9\u5668<\/span><\/span><\/td>\n\u9009\u62e9 \u6700\u8fd1\u4e00\u7ea7\u5143\u7d20<\/span><\/span><\/td>\n\u53ea\u9009\u4eb2\u513f\u5b50<\/span><\/span><\/td>\n\u8f83\u5c11<\/span><\/span><\/td>\n\u7b26\u53f7\u662f<\/span>><\/code><\/span> .nav>p<\/span><\/span><\/td>\n<\/tr>\n
                                          \u4ea4\u96c6\u9009\u62e9\u5668<\/span><\/span><\/td>\n\u9009\u62e9\u4e24\u4e2a\u6807\u7b7e\u4ea4\u96c6\u7684\u90e8\u5206<\/span><\/span><\/td>\n\u65e2\u662f \u53c8\u662f<\/span><\/span><\/td>\n\u8f83\u5c11<\/span><\/span><\/td>\n\u6ca1\u6709\u7b26\u53f7<\/code><\/span> p.one<\/span><\/span><\/td>\n<\/tr>\n
                                          \u5e76\u96c6\u9009\u62e9\u5668<\/span><\/span><\/td>\n\u9009\u62e9\u67d0\u4e9b\u76f8\u540c\u6837\u5f0f\u7684\u9009\u62e9\u5668<\/span><\/span><\/td>\n\u53ef\u4ee5\u7528\u4e8e\u96c6\u4f53\u58f0\u660e<\/span><\/span><\/td>\n\u8f83\u591a<\/span><\/span><\/td>\n\u7b26\u53f7\u662f<\/span>\u9017\u53f7<\/code><\/span> .nav, .header<\/span><\/span><\/td>\n<\/tr>\n
                                          \u94fe\u63a5\u4f2a\u7c7b\u9009\u62e9\u5668<\/span><\/span><\/td>\n\u7ed9\u94fe\u63a5\u66f4\u6539\u72b6\u6001<\/span><\/span><\/td>\n<\/td>\n\u8f83\u591a<\/span><\/span><\/td>\n\u91cd\u70b9\u8bb0\u4f4f a{} \u548c a:hover \u5b9e\u9645\u5f00\u53d1\u7684\u5199\u6cd5<\/span><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
                                          \u4e09\u3001CSS\u5b57\u4f53\u6837\u5f0f<\/span><\/h2>\n
                                          font\u5b57\u4f53<\/span><\/h3>\n
                                          1. font-size<\/span><\/strong><\/span><\/p>\n
                                            \n
                                          • \n
                                            font-size\u5c5e\u6027\u7528\u4e8e\u8bbe\u7f6e\u5b57\u53f7(\u5b57\u4f53\u5927\u5c0f)<\/span><\/p>\n<\/li>\n
                                          • \n
                                            \u8c37\u6b4c\u6d4f\u89c8\u5668<\/code><\/span>\u9ed8\u8ba4\u7684\u6587\u5b57\u5927\u5c0f\u4e3a16px<\/span><\/p>\n<\/li>\n
                                          • \n
                                            \u4e0d\u540c\u6d4f\u89c8\u5668\u53ef\u80fd\u9ed8\u8ba4\u663e\u793a\u7684\u5b57\u53f7\u5927\u5c0f\u4e0d\u4e00\u81f4\uff0c\u6211\u4eec\u5c3d\u91cf\u7ed9\u4e00\u4e2a\u660e\u786e\u503c\u5927\u5c0f\uff0c\u4e0d\u8981\u9ed8\u8ba4\u5927\u5c0f\u3002\u4e00\u822c\u7ed9body\u6307\u5b9a\u6574\u4e2a\u9875\u9762\u6587\u5b57\u7684\u5927\u5c0f\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n
                                            p { font-size:20px; }<\/span><\/pre>\n
                                            \u5355\u4f4d<\/span><\/h4>\n
                                              \n
                                            • \n
                                              \u76f8\u5bf9\u957f\u5ea6\u5355\u4f4d\u3001\u7edd\u5bf9\u957f\u5ea6\u5355\u4f4d<\/span><\/p>\n<\/li>\n<\/ul>\n
                                              \n\n\n\n\n\n\n\n\n\n\n\n
                                              \u76f8\u5bf9\u957f\u5ea6\u5355\u4f4d<\/span><\/span><\/th>\n\u8bf4\u660e<\/span><\/span><\/th>\n<\/tr>\n<\/thead>\n
                                              em<\/span><\/span><\/td>\n\u76f8\u5bf9\u4e8e\u5f53\u524d\u5bf9\u8c61\u5185\u6587\u672c\u7684\u5b57\u4f53\u5c3a\u5bf8<\/span><\/span><\/td>\n<\/tr>\n
                                              px<\/span><\/span><\/td>\n\u50cf\u7d20\u5e38\u7528<\/span><\/span><\/td>\n<\/tr>\n
                                              \u7edd\u5bf9\u5355\u4f4d\u957f\u5ea6<\/span><\/span><\/td>\n\u8bf4\u660e<\/span><\/span><\/td>\n<\/tr>\n
                                              in<\/span><\/span><\/td>\n\u82f1\u5bf8<\/span><\/span><\/td>\n<\/tr>\n
                                              cm<\/span><\/span><\/td>\n\u5398\u7c73<\/span><\/span><\/td>\n<\/tr>\n
                                              mm<\/span><\/span><\/td>\n\u6beb\u7c73<\/span><\/span><\/td>\n<\/tr>\n
                                              pt<\/span><\/span><\/td>\n\u70b9<\/span><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
                                              2. font-family<\/span><\/strong><\/span><\/p>\n
                                                \n
                                              • \n
                                                font-family\u5c5e\u6027\u7528\u4e8e\u8bbe\u7f6e\u54ea\u4e00\u79cd\u5b57\u4f53\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                p { font-family:\"\u5fae\u8f6f\u96c5\u9ed1\";}<\/span><\/pre>\n
                                                  \n
                                                • \n
                                                  \u6307\u5b9a\u591a\u4e2a\u5b57\u4f53\uff0c\u5982\u679c\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u7b2c\u4e00\u4e2a\u5b57\u4f53\u5c31\u4f1a\u5c1d\u8bd5\u4e0b\u4e00\u4e2a\u76f4\u5230\u627e\u5230\u5408\u9002\u7684\u5b57\u4f53\uff0c\u5982\u679c\u90fd\u6ca1\u6709\uff0c\u4ee5\u7535\u8111\u9ed8\u8ba4\u5b57\u4f53\u4e3a\u51c6\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                  p {font-family: Arial,\"Microsoft Yahei\", \"\u5fae\u8f6f\u96c5\u9ed1\";}<\/span><\/pre>\n
                                                    \n
                                                  • \n
                                                    CSS Unicode\u5b57\u4f53<\/span><\/p>\n
                                                      \n
                                                    • \n
                                                      \u5728 CSS \u4e2d\u8bbe\u7f6e\u5b57\u4f53\u540d\u79f0\uff0c\u76f4\u63a5\u5199\u4e2d\u6587\u662f\u53ef\u4ee5\u7684\u3002\u4f46\u662f\u5728\u6587\u4ef6\u7f16\u7801\uff08GB2312\u3001UTF-8 \u7b49\uff09\u4e0d\u5339\u914d\u65f6\u4f1a\u4ea7\u751f\u4e71\u7801\u7684\u9519\u8bef\u3002<\/span><\/p>\n<\/li>\n
                                                    • \n
                                                      xp \u7cfb\u7edf\u4e0d\u652f\u6301 \u7c7b\u4f3c\u5fae\u8f6f\u96c5\u9ed1\u7684\u4e2d\u6587\u3002<\/span><\/p>\n<\/li>\n
                                                    • \n
                                                      \u89e3\u51b3\u65b9\u6848\uff1a\u82f1\u6587\u6765\u66ff\u4ee3\u3002\u6bd4\u5982<\/span>font-family:\"Microsoft Yahei\"<\/code><\/span>\u3002\u5728 CSS \u76f4\u63a5\u4f7f\u7528 Unicode \u7f16\u7801\u6765\u5199\u5b57\u4f53\u540d\u79f0\u53ef\u4ee5\u907f\u514d\u8fd9\u4e9b\u9519\u8bef\u3002\u4f7f\u7528 Unicode \u5199\u4e2d\u6587\u5b57\u4f53\u540d\u79f0\uff0c\u6d4f\u89c8\u5668\u662f\u53ef\u4ee5\u6b63\u786e\u7684\u89e3\u6790\u7684\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
                                                      font-family: \"\\5FAE\\8F6F\\96C5\\9ED1\"; \u00a0 \u8868\u793a\u8bbe\u7f6e\u5b57\u4f53\u4e3a\u201c\u5fae\u8f6f\u96c5\u9ed1\u201d\u3002<\/span><\/pre>\n
                                                      3. font-weight<\/span><\/strong><\/span><\/p>\n
                                                      \n\n\n\n\n\n\n\n
                                                      \u5c5e\u6027\u503c<\/span><\/span><\/th>\n\u63cf\u8ff0<\/span><\/span><\/th>\n<\/tr>\n<\/thead>\n
                                                      normal<\/span><\/span><\/td>\n\u9ed8\u8ba4\u503c\uff08\u4e0d\u52a0\u7c97\u7684\uff09<\/span><\/span><\/td>\n<\/tr>\n
                                                      bold<\/span><\/span><\/td>\n\u5b9a\u4e49\u7c97\u4f53\uff08\u52a0\u7c97\u7684\uff09<\/span><\/span><\/td>\n<\/tr>\n
                                                      100~900<\/span><\/span><\/td>\n400 \u7b49\u540c\u4e8e normal\uff0c\u800c 700 \u7b49\u540c\u4e8e bold (\u6570\u5b57\u8868\u793a\u7c97\u7ec6\u7528\u7684\u591a)<\/span><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
                                                      4. font-weight<\/span><\/strong><\/span><\/p>\n
                                                      font-style\u5c5e\u6027\u7528\u4e8e\u5b9a\u4e49\u5b57\u4f53\u98ce\u683c\uff0c\u5982\u8bbe\u7f6e\u659c\u4f53\u3001\u503e\u659c\u6216\u6b63\u5e38\u5b57\u4f53\uff0c\u5176\u53ef\u7528\u5c5e\u6027\u503c\u5982\u4e0b\uff1a<\/span><\/p>\n
                                                      \n\n\n\n\n\n\n
                                                      \u5c5e\u6027<\/span><\/span><\/th>\n\u4f5c\u7528<\/span><\/span><\/th>\n<\/tr>\n<\/thead>\n
                                                      normal<\/span><\/span><\/td>\n\u9ed8\u8ba4\u503c\uff0c\u6d4f\u89c8\u5668\u4f1a\u663e\u793a\u6807\u51c6\u7684\u5b57\u4f53\u6837\u5f0f font-style: normal;<\/span><\/span><\/td>\n<\/tr>\n
                                                      italic<\/span><\/span><\/td>\n\u6d4f\u89c8\u5668\u4f1a\u663e\u793a\u659c\u4f53\u7684\u5b57\u4f53\u6837\u5f0f\u3002<\/span><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
                                                      5. font:\u7efc\u5408\u8bbe\u7f6e\u5b57\u4f53\u6837\u5f0f<\/span><\/strong><\/span><\/p>\n
                                                      \u9009\u62e9\u5668 { font: font-style  font-weight  font-size\/line-height  font-family;}<\/span><\/pre>\n
                                                        \n
                                                      • \n
                                                        \u6ce8\u610f\uff1a\u4f7f\u7528font\u5c5e\u6027\u65f6\uff0c\u5fc5\u987b\u6309\u4e0a\u9762\u8bed\u6cd5\u683c\u5f0f\u4e2d\u7684\u987a\u5e8f\u4e66\u5199\uff0c\u4e0d\u80fd\u66f4\u6362\u987a\u5e8f\uff0c\u5404\u4e2a\u5c5e\u6027\u4ee5<\/span>\u7a7a\u683c<\/code><\/span>\u9694\u5f00<\/span><\/p>\n
                                                          \n
                                                        • \n
                                                          \u5176\u4e2d\u4e0d\u9700\u8981\u8bbe\u7f6e\u7684\u5c5e\u6027\u53ef\u4ee5\u7701\u7565(\u53d6\u9ed8\u8ba4\u503c),\u4f46\u5fc5\u987b\u4fdd\u7559<\/span>font-size<\/code><\/span>\u548c<\/span>font-family<\/code><\/span>\u5c5e\u6027\uff0c\u5426\u5219font\u5c5e\u6027\u5c06\u4e0d\u8d77\u4f5c\u7528\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
                                                          6. font\u603b\u7ed3<\/span><\/strong><\/span><\/p>\n
                                                          \n\n\n\n\n\n\n\n\n\n
                                                          \u5c5e\u6027<\/span><\/span><\/th>\n\u8868\u793a<\/span><\/span><\/th>\n\u6ce8\u610f\u70b9<\/span><\/span><\/th>\n<\/tr>\n<\/thead>\n
                                                          font-size<\/span><\/span><\/td>\n\u5b57\u53f7<\/span><\/span><\/td>\n\u6211\u4eec\u901a\u5e38\u7528\u7684\u5355\u4f4d\u662fpx \u50cf\u7d20\uff0c\u4e00\u5b9a\u8981\u8ddf\u4e0a\u5355\u4f4d<\/span><\/span><\/td>\n<\/tr>\n
                                                          font-family<\/span><\/span><\/td>\n\u5b57\u4f53<\/span><\/span><\/td>\n\u5b9e\u9645\u5de5\u4f5c\u4e2d\u6309\u7167\u56e2\u961f\u7ea6\u5b9a\u6765\u5199\u5b57\u4f53<\/span><\/span><\/td>\n<\/tr>\n
                                                          font-weight<\/span><\/span><\/td>\n\u5b57\u4f53\u7c97\u7ec6<\/span><\/span><\/td>\n\u8bb0\u4f4f\u52a0\u7c97\u662f 700 \u6216\u8005 bold \u4e0d\u52a0\u7c97 \u662f normal \u6216\u8005 400 \u8bb0\u4f4f\u6570\u5b57\u4e0d\u8981\u8ddf\u5355\u4f4d<\/span><\/span><\/td>\n<\/tr>\n
                                                          font-style<\/span><\/span><\/td>\n\u5b57\u4f53\u6837\u5f0f<\/span><\/span><\/td>\n\u8bb0\u4f4f\u503e\u659c\u662f italic \u4e0d\u503e\u659c \u662f normal \u5de5\u4f5c\u4e2d\u6211\u4eec\u6700\u5e38\u7528 normal<\/span><\/span><\/td>\n<\/tr>\n
                                                          font<\/span><\/span><\/td>\n\u5b57\u4f53\u8fde\u5199<\/span><\/span><\/td>\n1. \u5b57\u4f53\u8fde\u5199\u662f\u6709\u987a\u5e8f\u7684 \u4e0d\u80fd\u968f\u610f\u6362\u4f4d\u7f6e 2. \u5176\u4e2d\u5b57\u53f7 \u548c \u5b57\u4f53 \u5fc5\u987b\u540c\u65f6\u51fa\u73b0<\/span><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
                                                          CSS\u5916\u89c2\u5c5e\u6027<\/span><\/h3>\n
                                                          1. color<\/span><\/strong><\/span><\/p>\n
                                                          color\u5c5e\u6027\u7528\u4e8e\u5b9a\u4e49\u6587\u672c\u7684\u989c\u8272 \u5176\u53d6\u503c\u65b9\u5f0f\u6709\u4ee5\u4e0b3\u79cd\uff1a<\/span><\/p>\n
                                                            \n
                                                          • \n
                                                            \u5b9e\u9645\u5de5\u4f5c\u4e2d\uff0c\u752816\u8fdb\u5236\u7684\u5199\u6cd5\u662f\u6700\u591a\u7684\uff0c\u4e14\u6211\u4eec\u66f4\u559c\u6b22\u7b80\u5199\u65b9\u5f0f\u6bd4\u5982#f0\u4ee3\u8868\u7ea2\u8272\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                            \n\n\n\n\n\n\n\n
                                                            \u8868\u793a\u8868\u793a<\/span><\/span><\/th>\n\u5c5e\u6027\u503c<\/span><\/span><\/th>\n<\/tr>\n<\/thead>\n
                                                            \u9884\u5b9a\u4e49\u7684\u989c\u8272\u503c<\/span><\/span><\/td>\nred\uff0cgreen\uff0cblue\uff0cpink<\/span><\/span><\/td>\n<\/tr>\n
                                                            \u5341\u516d\u8fdb\u5236<\/span><\/span><\/td>\n#FF0000\uff0c#FF6600\uff0c#29D794<\/span><\/span><\/td>\n<\/tr>\n
                                                            RGB\u4ee3\u7801<\/span><\/span><\/td>\nrgb(255,0,0)\u6216rgb(100%,0%,0%)<\/span><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
                                                            2.text-align<\/span><\/strong><\/span><\/p>\n
                                                            text-align\u5c5e\u6027\u7528\u4e8e\u8bbe\u7f6e\u6587\u672c\u5185\u5bb9\u7684\u6c34\u5e73\u5bf9\u9f50\u65b9\u5f0f\uff0c\u76f8\u5f53\u4e8ehtml\u4e2d\u7684align\u5bf9\u9f50\u5c5e\u6027\u3002<\/span><\/p>\n
                                                              \n
                                                            • \n
                                                              \u6ce8\u610f\uff1a\u662f\u8ba9\u76d2\u5b50\u91cc\u9762\u7684\u6587\u672c\u5185\u5bb9\u6c34\u5e73\u5c45\u4e2d\uff0c \u800c\u4e0d\u662f\u8ba9\u76d2\u5b50\u5c45\u4e2d\u5bf9\u9f50<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                              \u5176\u53ef\u7528\u5c5e\u6027\u503c\u5982\u4e0b\uff1a<\/span><\/p>\n
                                                              \n\n\n\n\n\n\n\n
                                                              \u5c5e\u6027<\/span><\/span><\/th>\n\u89e3\u91ca<\/span><\/span><\/th>\n<\/tr>\n<\/thead>\n
                                                              left<\/span><\/span><\/td>\n\u5de6\u5bf9\u9f50\uff08\u9ed8\u8ba4\u503c\uff09<\/span><\/span><\/td>\n<\/tr>\n
                                                              right<\/span><\/span><\/td>\n\u53f3\u5bf9\u9f50<\/span><\/span><\/td>\n<\/tr>\n
                                                              center<\/span><\/span><\/td>\n\u5c45\u4e2d\u5bf9\u9f50<\/span><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
                                                              \u300c3. line-height\u300d<\/span><\/strong><\/span>line-height\u5c5e\u6027\u7528\u4e8e\u8bbe\u7f6e\u884c\u95f4\u8ddd\uff0c\u5c31\u662f\u884c\u4e0e\u884c\u4e4b\u95f4\u7684\u8ddd\u79bb\uff0c\u5373\u5b57\u7b26\u7684\u5782\u76f4\u95f4\u8ddd\uff0c\u4e00\u822c\u79f0\u4e3a\u884c\u9ad8\u3002<\/span><\/p>\n
                                                                \n
                                                              • \n
                                                                line-height\u5e38\u7528\u7684\u5c5e\u6027\u503c\u5355\u4f4d\u6709\u4e09\u79cd\uff0c\u5206\u522b\u4e3a\u50cf\u7d20px\uff0c\u76f8\u5bf9\u503cem\u548c\u767e\u5206\u6bd4%\uff0c\u5b9e\u9645\u5de5\u4f5c\u4e2d\u4f7f\u7528\u6700\u591a\u7684\u662f\u50cf\u7d20px<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                \u4e00\u822c\u60c5\u51b5\u4e0b\uff0c\u884c\u8ddd\u6bd4\u5b57\u53f7\u59277--8\u50cf\u7d20\u5de6\u53f3\u5c31\u53ef\u4ee5\u4e86\u3002\r\nline-height: 24px;<\/pre>\n
                                                                \u884c\u9ad8\u6d4b\u91cf<\/span><\/h4>\n
                                                                \u884c\u9ad8\u6d4b\u91cf\u65b9\u6cd5\uff1a<\/span><\/p>\n
                                                                \u884c\u9ad8\u6211\u4eec\u5229\u7528\u6700\u591a\u7684\u4e00\u4e2a\u5730\u65b9\u662f\uff1a\u53ef\u4ee5\u8ba9\u5355\u884c\u6587\u672c\u5728\u76d2\u5b50\u4e2d\u5782\u76f4\u5c45\u4e2d\u5bf9\u9f50\u3002<\/span><\/p>\n
                                                                \u6587\u5b57\u7684\u884c\u9ad8\u7b49\u4e8e\u76d2\u5b50\u7684\u9ad8\u5ea6\u3002<\/span><\/strong><\/span>\u884c\u9ad8 = \u4e0a\u8ddd\u79bb + \u5185\u5bb9\u9ad8\u5ea6 + \u4e0b\u8ddd\u79bb\u4e0a\u8ddd\u79bb\u548c\u4e0b\u8ddd\u79bb\u603b\u662f\u76f8\u7b49\u7684\uff0c\u56e0\u6b64\u6587\u5b57\u770b\u4e0a\u53bb\u662f\u5782\u76f4\u5c45\u4e2d\u7684\u3002<\/span><\/p>\n
                                                                \u884c\u9ad8\u4e0e\u9ad8\u5ea6\u7684\u4e09\u79cd\u5173\u7cfb<\/span><\/h4>\n
                                                                  \n
                                                                • \n
                                                                  \u5982\u679c \u884c\u9ad8 \u7b49 \u9ad8\u5ea6 \u6587\u5b57\u4f1a \u5782\u76f4\u5c45\u4e2d<\/span><\/p>\n<\/li>\n
                                                                • \n
                                                                  \u5982\u679c\u884c\u9ad8 \u5927\u4e8e \u9ad8\u5ea6 \u6587\u5b57\u4f1a \u504f\u4e0b<\/span><\/p>\n<\/li>\n
                                                                • \n
                                                                  \u5982\u679c\u884c\u9ad8\u5c0f\u4e8e\u9ad8\u5ea6 \u6587\u5b57\u4f1a \u504f\u4e0a<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                    \/*line-height \u8981\u8bbe\u7f6e\u5728font\u5c5e\u6027\u4e0b\u9762\uff0c\u5426\u5219\u65e0\u6548\uff0c\u4f8b\u5982\uff1a*\/\r\n  height: 80px;\r\n  text-align: center;\r\n  font: normal bold 30px \"\u5b8b\u4f53\";\r\n  line-height: 80px;<\/pre>\n
                                                                  \u53ef\u4ee5\u4f7f\u7528display:flex;\u5e03\u5c40\u65b9\u5f0f\u8ba9\u6587\u5b57\u6c34\u5e73\u5782\u76f4\u5c45\u4e2d<\/span><\/p>\n
                                                                    display: flex;\r\n  align-items: center;     \/* \u4fa7\u8f74\u5bf9\u9f50\u65b9\u5f0f*\/\r\n  justify-content: center; \/* \u4e3b\u8f74\u5bf9\u9f50\u65b9\u5f0f *\/<\/pre>\n
                                                                  4. text-indent<\/span><\/strong><\/span><\/p>\n
                                                                  text-indent\u5c5e\u6027\u7528\u4e8e\u8bbe\u7f6e\u9996\u884c\u6587\u672c\u7684\u7f29\u8fdb<\/span><\/p>\n
                                                                    \n
                                                                  • \n
                                                                    \u5176\u5c5e\u6027\u503c\u53ef\u4e3a\u4e0d\u540c\u5355\u4f4d\u7684\u6570\u503c\u3001em\u5b57\u7b26\u5bbd\u5ea6\u7684\u500d\u6570\u3001\u6216\u76f8\u5bf9\u4e8e\u6d4f\u89c8\u5668\u7a97\u53e3\u5bbd\u5ea6\u7684\u767e\u5206\u6bd4%\uff0c\u5141\u8bb8\u4f7f\u7528\u8d1f\u503c\u3002<\/span><\/p>\n<\/li>\n
                                                                  • \n
                                                                    \u5efa\u8bae\u4f7f\u7528em\u4f5c\u4e3a\u8bbe\u7f6e\u5355\u4f4d\u3002<\/span><\/p>\n<\/li>\n
                                                                  • \n
                                                                    1em \u5c31\u662f\u4e00\u4e2a\u5b57\u7684\u5bbd\u5ea6\u3002\u5982\u679c\u662f\u6c49\u5b57\u7684\u6bb5\u843d\uff0c1em \u5c31\u662f\u4e00\u4e2a\u6c49\u5b57\u7684\u5bbd\u5ea6<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                    p {\r\n      \/*\u884c\u95f4\u8ddd*\/\r\n      line-height: 25px;\r\n      \/*\u9996\u884c\u7f29\u8fdb2\u4e2a\u5b57  em  1\u4e2aem \u5c31\u662f1\u4e2a\u5b57\u7684\u5927\u5c0f*\/\r\n      text-indent: 2em;  \r\n }<\/pre>\n
                                                                    5. text-decoration<\/span><\/strong><\/span>\u6587\u672c\u7684\u88c5\u9970<\/span><\/p>\n
                                                                    text-decoration,\u901a\u5e38\u6211\u4eec\u7528\u4e8e\u7ed9\u94fe\u63a5\u4fee\u6539\u88c5\u9970\u6548\u679c<\/span><\/p>\n
                                                                    \n\n\n\n\n\n\n\n\n
                                                                    \u503c<\/span><\/span><\/th>\n\u63cf\u8ff0<\/span><\/span><\/th>\n<\/tr>\n<\/thead>\n
                                                                    none<\/span><\/span><\/td>\n\u9ed8\u8ba4\u3002\u5b9a\u4e49\u6807\u51c6\u7684\u6587\u672c\u3002\u53d6\u6d88\u4e0b\u5212\u7ebf\uff08\u6700\u5e38\u7528\uff09<\/span><\/span><\/td>\n<\/tr>\n
                                                                    underline<\/span><\/span><\/td>\n\u5b9a\u4e49\u6587\u672c\u4e0b\u7684\u4e00\u6761\u7ebf\u3002\u4e0b\u5212\u7ebf \u4e5f\u662f\u6211\u4eec\u94fe\u63a5\u81ea\u5e26\u7684\uff08\u5e38\u7528\uff09<\/span><\/span><\/td>\n<\/tr>\n
                                                                    overline<\/span><\/span><\/td>\n\u5b9a\u4e49\u6587\u672c\u4e0a\u7684\u4e00\u6761\u7ebf\u3002\uff08\u4e0d\u7528\uff09<\/span><\/span><\/td>\n<\/tr>\n
                                                                    line-through<\/span><\/span><\/td>\n\u5b9a\u4e49\u7a7f\u8fc7\u6587\u672c\u4e0b\u7684\u4e00\u6761\u7ebf\u3002\uff08\u4e0d\u5e38\u7528\uff09<\/span><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
                                                                    6. CSS\u5916\u89c2\u5c5e\u6027\u603b\u7ed3<\/span><\/strong><\/span><\/p>\n
                                                                    \n\n\n\n\n\n\n\n\n\n
                                                                    \u5c5e\u6027<\/span><\/span><\/th>\n\u8868\u793a<\/span><\/span><\/th>\n\u6ce8\u610f\u70b9<\/span><\/span><\/th>\n<\/tr>\n<\/thead>\n
                                                                    color<\/span><\/span><\/td>\n\u989c\u8272<\/span><\/span><\/td>\n\u6211\u4eec\u901a\u5e38\u7528 \u5341\u516d\u8fdb\u5236 \u6bd4\u5982 \u800c\u4e14\u662f\u7b80\u5199\u5f62\u5f0f #fff<\/span><\/span><\/td>\n<\/tr>\n
                                                                    line-height<\/span><\/span><\/td>\n\u884c\u9ad8<\/span><\/span><\/td>\n\u63a7\u5236\u884c\u4e0e\u884c\u4e4b\u95f4\u7684\u8ddd\u79bb<\/span><\/span><\/td>\n<\/tr>\n
                                                                    text-align<\/span><\/span><\/td>\n\u6c34\u5e73\u5bf9\u9f50<\/span><\/span><\/td>\n\u53ef\u4ee5\u8bbe\u5b9a\u6587\u5b57\u6c34\u5e73\u7684\u5bf9\u9f50\u65b9\u5f0f<\/span><\/span><\/td>\n<\/tr>\n
                                                                    text-indent<\/span><\/span><\/td>\n\u9996\u884c\u7f29\u8fdb<\/span><\/span><\/td>\n\u901a\u5e38\u6211\u4eec\u7528\u4e8e\u6bb5\u843d\u9996\u884c\u7f29\u8fdb2\u4e2a\u5b57\u7684\u8ddd\u79bb text-indent: 2em;<\/span><\/span><\/td>\n<\/tr>\n
                                                                    text-decoration<\/span><\/span><\/td>\n\u6587\u672c\u4fee\u9970<\/span><\/span><\/td>\n\u8bb0\u4f4f \u6dfb\u52a0 \u4e0b\u5212\u7ebf underline \u53d6\u6d88\u4e0b\u5212\u7ebf none<\/span><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
                                                                    \u56db\u3001\u6807\u7b7e\u663e\u793a\u6a21\u5f0f(display)<\/span><\/h2>\n
                                                                    \u6807\u7b7e\u663e\u793a\u6a21\u5f0f<\/code><\/span>\u662f\u6807\u7b7e\u4ee5\u4ec0\u4e48\u65b9\u5f0f\u8fdb\u884c\u663e\u793a\u3002HTML\u6807\u7b7e\u4e00\u822c\u5206\u4e3a\u5757\u6807\u7b7e\u548c\u884c\u5185\u6807\u7b7e\u4e24\u79cd\u7c7b\u578b\uff0c\u5b83\u4eec\u4e5f\u79f0\u4e3a\u5757\u5143\u7d20\u548c\u884c\u5185\u5143\u7d20\u3002<\/span><\/p>\n
                                                                    \u6807\u7b7e\u663e\u793a\u6a21\u5f0f\u8f6c\u6362 display<\/span><\/h4>\n
                                                                      \n
                                                                    • \n
                                                                      \u5757\u8f6c\u884c\u5185\uff1adisplay:inline;<\/span><\/p>\n<\/li>\n
                                                                    • \n
                                                                      \u884c\u5185\u8f6c\u5757\uff1adisplay:block;<\/span><\/p>\n<\/li>\n
                                                                    • \n
                                                                      \u5757\u3001\u884c\u5185\u5143\u7d20\u8f6c\u6362\u4e3a\u884c\u5185\u5757\uff1adisplay: inline-block;<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                      1. \u5757\u7ea7\u5143\u7d20(block-level)<\/span><\/strong><\/span><\/p>\n
                                                                      \u5e38\u7528\u7684\u6709h1~h6\u3001p\u3001div\u3001ul\u3001ol\u3001li<\/span><\/p>\n
                                                                        \n
                                                                      • \n
                                                                        \u5757\u7ea7\u5143\u7d20\u7684\u7279\u70b9<\/span><\/h5>\n
                                                                          \n
                                                                        • \n
                                                                          \u72ec\u5360\u4e00\u884c<\/span><\/p>\n<\/li>\n
                                                                        • \n
                                                                          \u9ad8\u5ea6\uff0c\u5bbd\u5ea6\uff0c\u5916\u8fb9\u8ddd\u4ee5\u53ca\u5185\u8fb9\u8ddd\u90fd\u53ef\u4ee5\u63a7\u5236\u3002<\/span><\/p>\n<\/li>\n
                                                                        • \n
                                                                          \u5bbd\u5ea6\u9ed8\u8ba4\u662f\u5bb9\u5668(\u7236\u7ea7\u5bbd\u5ea6)\u7684100%<\/span><\/p>\n<\/li>\n
                                                                        • \n
                                                                          \u662f\u4e00\u4e2a\u5bb9\u5668\u53ca\u76d2\u5b50\uff0c\u91cc\u9762\u53ef\u4ee5\u653e\u884c\u5185\u6216\u8005\u5757\u7ea7\u5143\u7d20<\/span><\/p>\n<\/li>\n
                                                                        • \n
                                                                          \u6ce8\u610f<\/span><\/strong><\/span>\uff1a\u53ea\u6709\u6587\u5b57\u624d\u80fd\u7ec4\u6210\u6bb5\u843d\uff0c\u56e0\u6b64p\u6807\u7b7e\u91cc\u9762\u4e0d\u80fd\u653e\u5757\u7ea7\u5143\u7d20\uff0c\u7279\u522b\u662fp\u4e0d\u80fd\u653ediv\u3002\u540c\u7406\uff0c\u8fd8\u6709h1~h6\uff0cdt,\u5b83\u4eec\u90fd\u662f\u6587\u5b57\u7c7b\u5757\u7ea7\u6807\u7b7e\uff0c\u91cc\u9762\u4e0d\u80fd\u653e\u5176\u4ed6\u5757\u7ea7\u5143\u7d20\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
                                                                          2. \u884c\u5185\u5143\u7d20(inline-level)<\/span><\/strong><\/span><\/p>\n
                                                                          \u5e38\u89c1\u7684\u6709a\u3001strong\u3001b\u3001em\u3001i\u3001del\u3001s\u3001ins\u3001u\u3001span\uff0c\u5176\u4e2dspan\u6700\u91cd\u8981<\/span><\/p>\n
                                                                            \n
                                                                          • \n
                                                                            \u884c\u5185\u5143\u7d20\u7684\u7279\u70b9<\/span><\/h5>\n
                                                                              \n
                                                                            1. \n
                                                                              \u76f8\u90bb\u884c\u5185\u5143\u7d20\u5728\u4e00\u884c\u4e0a\uff0c\u4e00\u884c\u53ef\u4ee5\u663e\u793a\u591a\u4e2a\u3002<\/span><\/p>\n<\/li>\n
                                                                            2. \n
                                                                              \u9ad8\u5ea6\u3001\u5bbd\u5ea6\u76f4\u63a5\u8bbe\u7f6e\u662f\u65e0\u6548\u7684\u3002<\/span><\/p>\n<\/li>\n
                                                                            3. \n
                                                                              \u9ed8\u8ba4\u9ad8\u5ea6\u5c31\u662f\u5b83\u672c\u8eab\u5185\u5bb9\u7684\u5bbd\u5ea6\u3002<\/span><\/p>\n<\/li>\n
                                                                            4. \n
                                                                              \u884c\u5185\u5143\u7d20\u53ea\u80fd\u5bb9\u7eb3\u6587\u672c\u6216\u5176\u4ed6\u884c\u5185\u5143\u7d20\u3002<\/span><\/p>\n<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n
                                                                              \u6ce8\u610f<\/span><\/h6>\n
                                                                                \n
                                                                              • \n
                                                                                \u94fe\u63a5\u91cc\u9762\u4e0d\u80fd\u518d\u653e\u94fe\u63a5<\/span><\/p>\n<\/li>\n
                                                                              • \n
                                                                                \u7279\u6b8a\u60c5\u51b5a\u91cc\u9762\u53ef\u4ee5\u653e\u5757\u7ea7\u5143\u7d20\uff0c\u4f46\u662f\u7ed9a\u8f6c\u6362\u4e00\u4e0b\u5757\u7ea7\u6a21\u5f0f\u6700\u5b89\u5168\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                3. \u884c\u5185\u5757\u5143\u7d20(inline-block)<\/span><\/strong><\/span><\/p>\n
                                                                                \u5176\u4e2dimg\u3001input\u3001td<\/span><\/p>\n
                                                                                  \n
                                                                                • \n
                                                                                  \u884c\u5185\u5757\u5143\u7d20\u7684\u7279\u70b9<\/span><\/strong><\/span><\/p>\n
                                                                                    \n
                                                                                  1. \n
                                                                                    \u548c\u76f8\u90bb\u884c\u5185\u5143\u7d20(\u884c\u5185\u5757)\u5728\u4e00\u884c\u4e0a\uff0c\u4f46\u662f\u4e4b\u95f4\u4f1a\u6709\u7a7a\u767d\u98ce\u9669\u3002\u4e00\u884c\u53ef\u4ee5\u663e\u793a\u591a\u4e2a<\/span><\/p>\n<\/li>\n
                                                                                  2. \n
                                                                                    \u9ed8\u8ba4\u5bbd\u5ea6\u5c31\u662f\u5b83\u672c\u8eab\u5185\u5bb9\u7684\u5bbd\u5ea6\u3002<\/span><\/p>\n<\/li>\n
                                                                                  3. \n
                                                                                    \u9ad8\u5ea6\uff0c\u884c\u9ad8\uff0c\u5916\u8fb9\u8ddd\u4ee5\u53ca\u5185\u8fb9\u8ddd\u90fd\u53ef\u4ee5\u63a7\u5236\u3002<\/span><\/p>\n<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n
                                                                                    \u4e09\u79cd\u6a21\u5f0f\u603b\u7ed3<\/span><\/h4>\n
                                                                                    \n\n\n\n\n\n\n\n
                                                                                    \u5143\u7d20\u6a21\u5f0f<\/span><\/span><\/th>\n\u5143\u7d20\u6392\u5217<\/span><\/span><\/th>\n\u8bbe\u7f6e\u6837\u5f0f<\/span><\/span><\/th>\n\u9ed8\u8ba4\u5bbd\u5ea6<\/span><\/span><\/th>\n\u5305\u542b<\/span><\/span><\/th>\n<\/tr>\n<\/thead>\n
                                                                                    \u5757\u7ea7\u5143\u7d20<\/span><\/span><\/td>\n\u4e00\u884c\u53ea\u80fd\u653e\u4e00\u4e2a\u5757\u7ea7\u5143\u7d20<\/span><\/span><\/td>\n\u53ef\u4ee5\u8bbe\u7f6e\u5bbd\u5ea6\u9ad8\u5ea6<\/span><\/span><\/td>\n\u5bb9\u5668\u7684100%<\/span><\/span><\/td>\n\u5bb9\u5668\u7ea7\u53ef\u4ee5\u5305\u542b\u4efb\u4f55\u6807\u7b7e<\/span><\/span><\/td>\n<\/tr>\n
                                                                                    \u884c\u5185\u5143\u7d20<\/span><\/span><\/td>\n\u4e00\u884c\u53ef\u4ee5\u653e\u591a\u4e2a\u884c\u5185\u5143\u7d20<\/span><\/span><\/td>\n\u4e0d\u53ef\u4ee5\u76f4\u63a5\u8bbe\u7f6e\u5bbd\u5ea6\u9ad8\u5ea6<\/span><\/span><\/td>\n\u5b83\u672c\u8eab\u5185\u5bb9\u7684\u5bbd\u5ea6<\/span><\/span><\/td>\n\u5bb9\u7eb3\u6587\u672c\u6216\u5219\u5176\u4ed6\u884c\u5185\u5143\u7d20<\/span><\/span><\/td>\n<\/tr>\n
                                                                                    \u884c\u5185\u5757\u5143\u7d20<\/span><\/span><\/td>\n\u4e00\u884c\u653e\u591a\u4e2a\u884c\u5185\u5757\u5143\u7d20<\/span><\/span><\/td>\n\u53ef\u4ee5\u8bbe\u7f6e\u5bbd\u5ea6\u548c\u9ad8\u5ea6<\/span><\/span><\/td>\n\u5b83\u672c\u8eab\u5185\u5bb9\u7684\u5bbd\u5ea6<\/span><\/span><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
                                                                                    \u4e94\u3001CSS\u80cc\u666f(background)<\/span><\/h2>\n
                                                                                    1. \u80cc\u666f\u989c\u8272<\/span><\/strong><\/span><\/p>\n
                                                                                    background-color: \u989c\u8272\u503c;   \u9ed8\u8ba4\u7684\u503c\u662f transparent  \u900f\u660e\u7684<\/pre>\n
                                                                                    2. \u80cc\u666f\u56fe\u7247(image)<\/span><\/strong><\/span><\/p>\n
                                                                                    \u8bed\u6cd5\uff1a\r\nbackground-image : none | url (url) ;\r\n\u4f8b\u5982:\r\nbackground-image: url(images\/1.png);<\/pre>\n
                                                                                    3. \u80cc\u666f\u5e73\u94fa\uff08repeat\uff09<\/span><\/strong><\/span><\/p>\n
                                                                                    background-repeat : repeat | no-repeat | repeat-x | repeat-y<\/pre>\n
                                                                                    \n\n\n\n\n\n\n\n\n
                                                                                    \u53c2\u6570<\/span><\/span><\/th>\n\u4f5c\u7528<\/span><\/span><\/th>\n<\/tr>\n<\/thead>\n
                                                                                    repeat<\/span><\/span><\/td>\n\u80cc\u666f\u56fe\u50cf\u5728\u7eb5\u5411\u548c\u6a2a\u5411\u4e0a\u5e73\u94fa\uff08\u9ed8\u8ba4\u7684\uff09<\/span><\/span><\/td>\n<\/tr>\n
                                                                                    no-repeat<\/span><\/span><\/td>\n\u80cc\u666f\u56fe\u50cf\u4e0d\u5e73\u94fa<\/span><\/span><\/td>\n<\/tr>\n
                                                                                    repeat-x<\/span><\/span><\/td>\n\u80cc\u666f\u56fe\u50cf\u5728\u6a2a\u5411\u4e0a\u5e73\u94fa<\/span><\/span><\/td>\n<\/tr>\n
                                                                                    repeat-y<\/span><\/span><\/td>\n\u80cc\u666f\u56fe\u50cf\u5728\u7eb5\u5411\u5e73\u94fa<\/span><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
                                                                                    4. \u80cc\u666f\u4f4d\u7f6e(position)<\/span><\/strong><\/span><\/p>\n
                                                                                    background-position : length || length\r\nbackground-position : position || position<\/pre>\n
                                                                                    \n\n\n\n\n\n\n
                                                                                    \u53c2\u6570<\/span><\/span><\/th>\n\u503c<\/span><\/span><\/th>\n<\/tr>\n<\/thead>\n
                                                                                    length<\/span><\/span><\/td>\n\u767e\u5206\u6570 <\/span>| \u7531\u6d6e\u70b9\u6570\u5b57\u548c\u5355\u4f4d\u6807\u8bc6\u7b26\u7ec4\u6210\u7684\u957f\u5ea6\u503c<\/span><\/span><\/td>\n<\/tr>\n
                                                                                    position<\/span><\/span><\/td>\ntop <\/span>| center <\/span>| bottom <\/span>| left <\/span>| center <\/span>| right \u65b9\u4f4d\u540d\u8bcd<\/span><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
                                                                                    \u6ce8\u610f\uff1a<\/span><\/h4>\n
                                                                                      \n
                                                                                    • \n
                                                                                      \u5fc5\u987b\u5148\u6307\u5b9abackground-image\u5c5e\u6027<\/span><\/p>\n<\/li>\n
                                                                                    • \n
                                                                                      position \u540e\u9762\u662fx\u5750\u6807\u548cy\u5750\u6807\u3002\u53ef\u4ee5\u4f7f\u7528\u65b9\u4f4d\u540d\u8bcd\u6216\u8005 \u7cbe\u786e\u5355\u4f4d\u3002<\/span><\/p>\n<\/li>\n
                                                                                    • \n
                                                                                      \u5982\u679c\u6307\u5b9a\u4e24\u4e2a\u503c\uff0c\u4e24\u4e2a\u503c\u90fd\u662f\u65b9\u4f4d\u540d\u5b57\uff0c\u5219\u4e24\u4e2a\u503c\u524d\u540e\u987a\u5e8f\u65e0\u5173\uff0c\u6bd4\u5982left top\u548ctop left\u6548\u679c\u4e00\u81f4<\/span><\/p>\n<\/li>\n
                                                                                    • \n
                                                                                      \u5982\u679c\u53ea\u6307\u5b9a\u4e86\u4e00\u4e2a\u65b9\u4f4d\u540d\u8bcd\uff0c\u53e6\u4e00\u4e2a\u503c\u9ed8\u8ba4\u5c45\u4e2d\u5bf9\u9f50\u3002<\/span><\/p>\n<\/li>\n
                                                                                    • \n
                                                                                      \u5982\u679cposition \u540e\u9762\u662f\u7cbe\u786e\u5750\u6807\uff0c \u90a3\u4e48\u7b2c\u4e00\u4e2a\uff0c\u80af\u5b9a\u662f x \u7b2c\u4e8c\u4e2a\u4e00\u5b9a\u662fy<\/span><\/p>\n<\/li>\n
                                                                                    • \n
                                                                                      \u5982\u679c\u53ea\u6307\u5b9a\u4e00\u4e2a\u6570\u503c,\u90a3\u8be5\u6570\u503c\u4e00\u5b9a\u662fx\u5750\u6807\uff0c\u53e6\u4e00\u4e2a\u9ed8\u8ba4\u5782\u76f4\u5c45\u4e2d<\/span><\/p>\n<\/li>\n
                                                                                    • \n
                                                                                      \u5982\u679c\u6307\u5b9a\u7684\u4e24\u4e2a\u503c\u662f \u7cbe\u786e\u5355\u4f4d\u548c\u65b9\u4f4d\u540d\u5b57\u6df7\u5408\u4f7f\u7528\uff0c\u5219\u7b2c\u4e00\u4e2a\u503c\u662fx\u5750\u6807\uff0c\u7b2c\u4e8c\u4e2a\u503c\u662fy\u5750\u6807<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                      \u80cc\u666f\u7b80\u5199\uff1a<\/span><\/h4>\n
                                                                                        \n
                                                                                      • \n
                                                                                        background\uff1a\u5c5e\u6027\u7684\u503c\u7684\u4e66\u5199\u987a\u5e8f\u5b98\u65b9\u6ca1\u6709\u5f3a\u5236\u7684\u6807\u51c6\u3002\u4e3a\u4e86\u53ef\u8bfb\u6027\uff0c\u5efa\u8bae\u5982\u4e0b\u5199\uff1a<\/span><\/p>\n<\/li>\n
                                                                                      • \n
                                                                                        background: \u80cc\u666f\u989c\u8272 \u80cc\u666f\u56fe\u7247\u5730\u5740 \u80cc\u666f\u5e73\u94fa \u80cc\u666f\u6eda\u52a8 \u80cc\u666f\u4f4d\u7f6e;<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                        \/* \u6709\u80cc\u666f\u56fe\u7247\u80cc\u666f\u989c\u8272\u53ef\u4ee5\u4e0d\u7528\u5199*\/\r\nbackground: transparent url(image.jpg) repeat-y  scroll center top ;<\/pre>\n
                                                                                        5. \u80cc\u666f\u534a\u900f\u660e(CSS3)<\/span><\/strong><\/span><\/p>\n
                                                                                        background: rgba(0, 0, 0, 0.3);\r\nbackground: rgba(0, 0, 0, .3);<\/pre>\n
                                                                                          \n
                                                                                        • \n
                                                                                          \u7b49\u540c\u4e8ebackground-color: rgba(0, 0, 0, .3)<\/span><\/p>\n<\/li>\n
                                                                                        • \n
                                                                                          \u6700\u540e\u4e00\u4e2a\u53c2\u6570\u662falpha \u900f\u660e\u5ea6 \u53d6\u503c\u8303\u56f4 0~1\u4e4b\u95f4<\/span><\/p>\n<\/li>\n
                                                                                        • \n
                                                                                          \u6211\u4eec\u4e60\u60ef\u628a0.3 \u7684 0 \u7701\u7565\u6389 \u8fd9\u6837\u5199 background: rgba(0, 0, 0, .3);<\/span><\/p>\n<\/li>\n
                                                                                        • \n
                                                                                          \u6ce8\u610f\uff1a\u80cc\u666f\u534a\u900f\u660e\u662f\u6307\u76d2\u5b50\u80cc\u666f\u534a\u900f\u660e\uff0c\u76d2\u5b50\u91cc\u9762\u7684\u5185\u5bb9\u4e0d\u53d7\u5f71\u54cd<\/span><\/p>\n<\/li>\n
                                                                                        • \n
                                                                                          \u4f4e\u4e8eIE 9\u7684\u7248\u672c\u4e0d\u652f\u6301<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                          \u76d2\u5b50\u534a\u900f\u660e opacity<\/span><\/h5>\n
                                                                                            \n
                                                                                          • \n
                                                                                            \u8bbe\u7f6eopacity\u5143\u7d20\u7684\u6240\u6709\u540e\u4ee3\u5143\u7d20\u4f1a\u968f\u7740\u4e00\u8d77\u5177\u6709\u900f\u660e\u6027\uff0c\u4e00\u822c\u7528\u4e8e\u8c03\u6574\u56fe\u7247\u6216\u8005\u6a21\u5757\u7684\u6574\u4f53\u4e0d\u900f\u660e\u5ea6<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                            opacity: .2;<\/pre>\n
                                                                                            6. \u80cc\u666f\u603b\u7ed3<\/span><\/strong><\/span><\/p>\n
                                                                                            \n\n\n\n\n\n\n\n\n\n\n\n
                                                                                            \u5c5e\u6027<\/span><\/span><\/th>\n\u4f5c\u7528<\/span><\/span><\/th>\n\u503c<\/span><\/span><\/th>\n<\/tr>\n<\/thead>\n
                                                                                            background-color<\/span><\/span><\/td>\n\u80cc\u666f\u989c\u8272<\/span><\/span><\/td>\n\u9884\u5b9a\u4e49\u7684\u989c\u8272\u503c\/\u5341\u516d\u8fdb\u5236\/RGB\u4ee3\u7801<\/span><\/span><\/td>\n<\/tr>\n
                                                                                            background-image<\/span><\/span><\/td>\n\u80cc\u666f\u56fe\u7247<\/span><\/span><\/td>\nurl(\u56fe\u7247\u8def\u5f84)<\/span><\/span><\/td>\n<\/tr>\n
                                                                                            background-repeat<\/span><\/span><\/td>\n\u662f\u5426\u5e73\u94fa<\/span><\/span><\/td>\nrepeat\/no-repeat\/repeat-x\/repeat-y<\/span><\/span><\/td>\n<\/tr>\n
                                                                                            background-position<\/span><\/span><\/td>\n\u80cc\u666f\u4f4d\u7f6e<\/span><\/span><\/td>\nlength\/position \u5206\u522b\u662fx \u548c y\u5750\u6807\uff0c \u5207\u8bb0 \u5982\u679c\u6709 \u7cbe\u786e\u6570\u503c\u5355\u4f4d\uff0c\u5219\u5fc5\u987b\u6309\u7167\u5148X \u540eY \u7684\u5199\u6cd5<\/span><\/span><\/td>\n<\/tr>\n
                                                                                            background-attachment<\/span><\/span><\/td>\n\u80cc\u666f\u56fa\u5b9a\u8fd8\u662f\u6eda\u52a8<\/span><\/span><\/td>\nscroll\/fixed<\/span><\/span><\/td>\n<\/tr>\n
                                                                                            \u80cc\u666f\u7b80\u5199<\/span><\/span><\/td>\n\u66f4\u7b80\u5355<\/span><\/span><\/td>\n\u80cc\u666f\u989c\u8272 \u80cc\u666f\u56fe\u7247\u5730\u5740 \u80cc\u666f\u5e73\u94fa \u80cc\u666f\u6eda\u52a8 \u80cc\u666f\u4f4d\u7f6e; \u4ed6\u4eec\u6ca1\u6709\u987a\u5e8f<\/span><\/span><\/td>\n<\/tr>\n
                                                                                            \u80cc\u666f\u900f\u660e<\/span><\/span><\/td>\n\u8ba9\u76d2\u5b50\u534a\u900f\u660e<\/span><\/span><\/td>\nbackground: rgba(0,0,0,0.3); \u540e\u9762\u5fc5\u987b\u662f 4\u4e2a\u503c<\/span><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
                                                                                            \u516d\u3001CSS\u4e09\u5927\u7279\u6027<\/span><\/h2>\n
                                                                                            \u300c1. CSS \u5c42\u53e0\u6027\u300d<\/span><\/strong><\/span><\/p>\n
                                                                                            \u6837\u5f0f\u540e\u6765\u5c45\u4e0a\u7684\u7279\u70b9<\/span><\/p>\n
                                                                                            \u6982\u5ff5<\/code><\/span>\uff1a<\/span><\/p>\n
                                                                                              \n
                                                                                            • \n
                                                                                              \u6240\u8c13\u5c42\u53e0\u6027\u662f\u6307\u591a\u79cdCSS\u6837\u5f0f\u7684\u53e0\u52a0<\/span><\/p>\n<\/li>\n
                                                                                            • \n
                                                                                              \u662f\u6d4f\u89c8\u5668\u5904\u7406\u51b2\u7a81\u7684\u4e00\u4e2a\u80fd\u529b,\u5982\u679c\u4e00\u4e2a\u5c5e\u6027\u901a\u8fc7\u4e24\u4e2a\u76f8\u540c\u9009\u62e9\u5668\u8bbe\u7f6e\u5230\u540c\u4e00\u4e2a\u5143\u7d20\u4e0a\uff0c\u90a3\u4e48\u8fd9\u4e2a\u65f6\u5019\u4e00\u4e2a\u5c5e\u6027\u5c31\u4f1a\u5c06\u53e6\u4e00\u4e2a\u5c5e\u6027\u5c42\u53e0\u6389<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                              \u539f\u5219<\/code><\/span>\uff1a<\/span><\/p>\n
                                                                                                \n
                                                                                              • \n
                                                                                                \u6837\u5f0f\u51b2\u7a81\uff0c\u9075\u5faa\u7684\u539f\u5219\u662f\u5c31\u8fd1\u539f\u5219\u3002 \u90a3\u4e2a\u6837\u5f0f\u79bb\u7740\u7ed3\u6784\u8fd1\uff0c\u5c31\u6267\u884c\u90a3\u4e2a\u6837\u5f0f\u3002<\/span><\/p>\n<\/li>\n
                                                                                              • \n
                                                                                                \u6837\u5f0f\u4e0d\u51b2\u7a81\uff0c\u4e0d\u4f1a\u5c42\u53e0\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                2. CSS \u7ee7\u627f\u6027<\/span><\/strong><\/span><\/p>\n
                                                                                                \u6982\u5ff5<\/code><\/span>\uff1a<\/span><\/p>\n
                                                                                                  \n
                                                                                                • \n
                                                                                                  \u5b50\u6807\u7b7e\u4f1a\u7ee7\u627f\u7236\u6807\u7b7e\u7684\u67d0\u4e9b\u6837\u5f0f\uff0c\u5982\u6587\u672c\u989c\u8272\u548c\u5b57\u53f7\u3002<\/span><\/p>\n<\/li>\n
                                                                                                • \n
                                                                                                  \u60f3\u8981\u8bbe\u7f6e\u4e00\u4e2a\u53ef\u7ee7\u627f\u7684\u5c5e\u6027\uff0c\u53ea\u9700\u5c06\u5b83\u5e94\u7528\u4e8e\u7236\u5143\u7d20\u5373\u53ef\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                  \u6ce8\u610f<\/code><\/span>\uff1a<\/span><\/p>\n
                                                                                                    \n
                                                                                                  • \n
                                                                                                    \u6070\u5f53\u5730\u4f7f\u7528\u7ee7\u627f\u53ef\u4ee5\u7b80\u5316\u4ee3\u7801\uff0c\u964d\u4f4eCSS\u6837\u5f0f\u7684\u590d\u6742\u6027\u3002\u6bd4\u5982\u6709\u5f88\u591a\u5b50\u7ea7\u5b69\u5b50\u90fd\u9700\u8981\u67d0\u4e2a\u6837\u5f0f\uff0c\u53ef\u4ee5\u7ed9\u7236\u7ea7\u6307\u5b9a\u4e00\u4e2a\uff0c\u8fd9\u4e9b\u5b69\u5b50\u7ee7\u627f\u8fc7\u6765\u5c31\u597d\u4e86\u3002<\/span><\/p>\n<\/li>\n
                                                                                                  • \n
                                                                                                    \u5b50\u5143\u7d20\u53ef\u4ee5\u7ee7\u627f\u7236\u5143\u7d20\u7684\u6837\u5f0f\uff08<\/span>text-\uff0cfont-\uff0cline-\u8fd9\u4e9b\u5143\u7d20\u5f00\u5934\u7684\u53ef\u4ee5\u7ee7\u627f\uff0c\u4ee5\u53cacolor\u5c5e\u6027<\/span><\/strong><\/span>\uff09<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                    3. CSS \u4f18\u5148\u7ea7(CSS\u7279\u6b8a\u6027)<\/span><\/strong><\/span><\/p>\n
                                                                                                    \u6982\u5ff5<\/code><\/span>\uff1a\u5b9a\u4e49CSS\u6837\u5f0f\u65f6\uff0c\u7ecf\u5e38\u51fa\u73b0\u4e24\u4e2a\u6216\u66f4\u591a\u89c4\u5219\u5e94\u7528\u5728\u540c\u4e00\u5143\u7d20\u4e0a\uff0c\u6b64\u65f6\uff0c<\/span><\/p>\n
                                                                                                      \n
                                                                                                    • \n
                                                                                                      \u9009\u62e9\u5668\u76f8\u540c\uff0c\u5219\u6267\u884c\u5c42\u53e0\u6027<\/span><\/p>\n<\/li>\n
                                                                                                    • \n
                                                                                                      \u9009\u62e9\u5668\u4e0d\u540c\uff0c\u5c31\u4f1a\u51fa\u73b0\u4f18\u5148\u7ea7\u7684\u95ee\u9898\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                      \u6743\u91cd\u8ba1\u7b97\u516c\u5f0f<\/code><\/span>\uff1a<\/span><\/p>\n
                                                                                                      \n\n\n\n\n\n\n\n\n\n\n
                                                                                                      \u6807\u7b7e\u9009\u62e9\u5668<\/span><\/span><\/th>\n\u8ba1\u7b97\u6743\u91cd\u516c\u5f0f<\/span><\/span><\/th>\n<\/tr>\n<\/thead>\n
                                                                                                      \u7ee7\u627f\u6216\u8005 *<\/span><\/span><\/td>\n0,0,0,0<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                      \u6bcf\u4e2a\u5143\u7d20\uff08\u6807\u7b7e\u9009\u62e9\u5668\uff09<\/span><\/span><\/td>\n0,0,0,1<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                      \u6bcf\u4e2a\u7c7b\uff0c\u4f2a\u7c7b<\/span><\/span><\/td>\n0,0,1,0<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                      \u6bcf\u4e2aID<\/span><\/span><\/td>\n0,1,0,0<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                      \u6bcf\u4e2a\u884c\u5185\u6837\u5f0f style=””<\/span><\/span><\/td>\n1,0,0,0<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                      \u6bcf\u4e2a!important \u6700\u91cd\u8981\u7684<\/span><\/span><\/td>\n\u221e \u65e0\u7a77\u5927<\/span><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
                                                                                                        \n
                                                                                                      • \n
                                                                                                        \u503c\u4ece\u5de6\u5230\u53f3\uff0c\u5de6\u9762\u7684\u6700\u5927\uff0c\u4e00\u7ea7\u5927\u4e8e\u4e00\u7ea7\uff0c\u6570\u4f4d\u4e4b\u95f4\u6ca1\u6709\u8fdb\u5236\uff0c\u7ea7\u522b\u4e4b\u95f4\u4e0d\u53ef\u8d85\u8d8a\u3002<\/span><\/p>\n<\/li>\n
                                                                                                      • \n
                                                                                                        \u5173\u4e8eCSS\u6743\u91cd\uff0c\u6211\u4eec\u9700\u8981\u4e00\u5957\u8ba1\u7b97\u516c\u5f0f\u6765\u53bb\u8ba1\u7b97\uff0c\u8fd9\u4e2a\u5c31\u662f CSS Specificity\uff08\u7279\u6b8a\u6027\uff09<\/span><\/p>\n<\/li>\n
                                                                                                      • \n
                                                                                                        div { color: pink !important; }<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                        \u6743\u91cd\u53e0\u52a0<\/code><\/span>\uff1a<\/span><\/p>\n
                                                                                                         div ul  li   ------>      0,0,0,3\r\n .nav ul li   ------>      0,0,1,2\r\n a:hover      -----\u2014>      0,0,1,1\r\n .nav a       ------>      0,0,1,1<\/pre>\n
                                                                                                        \u7ee7\u627f\u7684\u6743\u91cd\u662f0<\/code><\/span>\uff1a<\/span><\/p>\n
                                                                                                          \n
                                                                                                        • \n
                                                                                                          \u6211\u4eec\u4fee\u6539\u6837\u5f0f\uff0c\u4e00\u5b9a\u8981\u770b\u8be5\u6807\u7b7e\u6709\u6ca1\u6709\u88ab\u9009\u4e2d<\/span><\/p>\n<\/li>\n
                                                                                                        • \n
                                                                                                          \u5982\u679c\u9009\u4e2d\u4e86\uff0c\u90a3\u4e48\u4ee5\u4e0a\u9762\u7684\u516c\u5f0f\u6765\u8ba1\u6743\u91cd\u3002\u8c01\u5927\u542c\u8c01\u7684\u3002<\/span><\/p>\n<\/li>\n
                                                                                                        • \n
                                                                                                          \u5982\u679c\u6ca1\u6709\u9009\u4e2d\uff0c\u90a3\u4e48\u6743\u91cd\u662f0\uff0c\u56e0\u4e3a\u7ee7\u627f\u7684\u6743\u91cd\u4e3a0.<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                          \u4e03\u3001\u76d2\u5b50\u6a21\u578b<\/span><\/h2>\n
                                                                                                          css\u5b66\u4e60\u4e09\u5927\u91cd\u70b9\uff1a css \u76d2\u5b50\u6a21\u578b \u3001 \u6d6e\u52a8 \u3001 \u5b9a\u4f4d <\/span><\/p>\n
                                                                                                          \u7f51\u9875\u5e03\u5c40\u7684\u672c\u8d28<\/span><\/strong><\/span><\/p>\n
                                                                                                            \n
                                                                                                          • \n
                                                                                                            \u9996\u5148\u5229\u7528CSS\u8bbe\u7f6e\u597d\u76d2\u5b50\u7684\u5927\u5c0f\uff0c\u7136\u540e\u6446\u653e\u76d2\u5b50\u7684\u4f4d\u7f6e\u3002<\/span><\/p>\n<\/li>\n
                                                                                                          • \n
                                                                                                            \u6700\u540e\u628a\u7f51\u9875\u5143\u7d20\u6bd4\u5982\u6587\u5b57\u56fe\u7247\u7b49\u7b49\uff0c\u653e\u5165\u76d2\u5b50\u91cc\u9762\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                            1. \u76d2\u5b50\u6a21\u578b(Box Model)<\/span><\/h3>\n
                                                                                                              \n
                                                                                                            • \n
                                                                                                              \u76d2\u5b50\u6a21\u578b\u5c31\u662f\u628aHTML\u9875\u9762\u4e2d\u7684\u5e03\u5c40\u5143\u7d20\u770b\u4f5c\u662f\u4e00\u4e2a\u77e9\u5f62\u7684\u76d2\u5b50\uff0c\u4e5f\u5c31\u662f\u4e00\u4e2a\u76db\u88c5\u5185\u5bb9\u7684\u5bb9\u5668\u3002<\/span><\/p>\n<\/li>\n
                                                                                                            • \n
                                                                                                              \u76d2\u5b50\u6a21\u578b\u7531\u5143\u7d20\u7684\u5185\u5bb9\u3001\u8fb9\u6846\uff08border\uff09\u3001\u5185\u8fb9\u8ddd\uff08padding\uff09\u3001\u548c\u5916\u8fb9\u8ddd\uff08margin\uff09\u7ec4\u6210\u3002<\/span><\/p>\n<\/li>\n
                                                                                                            • \n
                                                                                                              \u76d2\u5b50\u91cc\u9762\u7684\u6587\u5b57\u548c\u56fe\u7247\u7b49\u5143\u7d20\u662f \u5185\u5bb9\u533a\u57df<\/span><\/p>\n<\/li>\n
                                                                                                            • \n
                                                                                                              \u76d2\u5b50\u7684\u539a\u5ea6 \u6211\u4eec\u79f0\u4e3a\u4e3a\u76d2\u5b50\u7684\u8fb9\u6846<\/span><\/p>\n<\/li>\n
                                                                                                            • \n
                                                                                                              \u76d2\u5b50\u5185\u5bb9\u4e0e\u8fb9\u6846\u7684\u8ddd\u79bb\u662f\u5185\u8fb9\u8ddd<\/span><\/p>\n<\/li>\n
                                                                                                            • \n
                                                                                                              \u76d2\u5b50\u4e0e\u76d2\u5b50\u4e4b\u95f4\u7684\u8ddd\u79bb\u662f\u5916\u8fb9\u8ddd<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                              W3c\u6807\u51c6\u76d2\u5b50\u6a21\u578b<\/span><\/strong><\/span><\/p>\n
                                                                                                              \u6807\u51c6 w3c \u76d2\u5b50\u6a21\u578b\u7684\u8303\u56f4\u5305\u62ec margin\u3001border\u3001padding\u3001content<\/span><\/p>\n
                                                                                                              \u5f53\u8bbe\u7f6e\u4e3abox-sizing: content-box;\u65f6\uff0c\u5c06\u91c7\u7528\u6807\u51c6\u6a21\u5f0f\u89e3\u6790\u8ba1\u7b97\uff0c\u4e5f\u662f\u9ed8\u8ba4\u6a21\u5f0f\uff1b<\/span><\/p>\n
                                                                                                              \u5185\u76d2\u5c3a\u5bf8\u8ba1\u7b97(\u5143\u7d20\u5b9e\u9645\u5927\u5c0f)<\/pre>\n
                                                                                                                \n
                                                                                                              • \n
                                                                                                                \u5bbd\u5ea6\uff1aElement Height = content height + padding + border \uff08Height\u4e3a\u5185\u5bb9\u9ad8\u5ea6\uff09<\/span><\/p>\n<\/li>\n
                                                                                                              • \n
                                                                                                                \u9ad8\u5ea6\uff1aElement Width = content width + padding + border \uff08Width\u4e3a\u5185\u5bb9\u5bbd\u5ea6\uff09<\/span><\/p>\n<\/li>\n
                                                                                                              • \n
                                                                                                                \u76d2\u5b50\u7684\u5b9e\u9645\u5927\u5c0f\uff1a<\/span>\u5185\u5bb9\u7684\u5bbd\u5ea6\u548c\u9ad8\u5ea6 + \u5185\u8fb9\u8ddd + \u8fb9\u6846<\/span><\/strong><\/span><\/p>\n<\/li>\n
                                                                                                              • \n
                                                                                                                IE\u76d2\u5b50\u6a21\u578b<\/span><\/strong><\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                                IE \u76d2\u5b50\u6a21\u578b\u7684 content \u90e8\u5206\u5305\u542b\u4e86 border \u548c pading<\/span><\/p>\n
                                                                                                                \u5f53\u8bbe\u7f6e\u4e3abox-sizing: border-box\u65f6\uff0c\u5c06\u91c7\u7528\u602a\u5f02\u6a21\u5f0f\u89e3\u6790\u8ba1\u7b97\uff1b<\/span><\/p>\n
                                                                                                                2. \u76d2\u5b50\u8fb9\u6846(border)<\/span><\/h3>\n
                                                                                                                \n\n\n\n\n\n\n\n
                                                                                                                \u5c5e\u6027<\/span><\/span><\/th>\n\u4f5c\u7528<\/span><\/span><\/th>\n<\/tr>\n<\/thead>\n
                                                                                                                border-width<\/span><\/span><\/td>\n\u5b9a\u4e49\u8fb9\u6846\u7c97\u7ec6\uff0c\u5355\u4f4d\u662fpx<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                border-style<\/span><\/span><\/td>\n\u8fb9\u6846\u7684\u6837\u5f0f<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                border-color<\/span><\/span><\/td>\n\u8fb9\u6846\u989c\u8272<\/span><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
                                                                                                                \u8fb9\u6846\u7684\u6837\u5f0f\uff1a<\/span><\/strong><\/span><\/p>\n
                                                                                                                  \n
                                                                                                                • \n
                                                                                                                  none\uff1a\u6ca1\u6709\u8fb9\u6846\u5373\u5ffd\u7565\u6240\u6709\u8fb9\u6846\u7684\u5bbd\u5ea6\uff08\u9ed8\u8ba4\u503c\uff09<\/span><\/p>\n<\/li>\n
                                                                                                                • \n
                                                                                                                  solid\uff1a\u8fb9\u6846\u4e3a\u5355\u5b9e\u7ebf(\u6700\u4e3a\u5e38\u7528\u7684)<\/span><\/p>\n<\/li>\n
                                                                                                                • \n
                                                                                                                  dashed\uff1a\u8fb9\u6846\u4e3a\u865a\u7ebf<\/span><\/p>\n<\/li>\n
                                                                                                                • \n
                                                                                                                  dotted\uff1a\u8fb9\u6846\u4e3a\u70b9\u7ebf<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                                  \u8fb9\u6846\u7efc\u5408\u8bbe\u7f6e\r\nborder : border-width || border-style || border-color \r\n\r\nborder: 1px solid red;  \u6ca1\u6709\u987a\u5e8f\u8981\u6c42<\/pre>\n
                                                                                                                  \u76d2\u5b50\u8fb9\u6846\u5199\u6cd5\u603b\u7ed3\u8868\uff1a<\/span><\/strong><\/span><\/p>\n
                                                                                                                  \u5f88\u591a\u60c5\u51b5\u4e0b\uff0c\u6211\u4eec\u4e0d\u9700\u8981\u6307\u5b9a4\u4e2a\u8fb9\u6846\uff0c\u6211\u4eec\u662f\u53ef\u4ee5\u5355\u72ec\u7ed94\u4e2a\u8fb9\u6846\u5206\u522b\u6307\u5b9a\u7684\u3002<\/span><\/p>\n
                                                                                                                  \n\n\n\n\n\n\n\n\n
                                                                                                                  \u4e0a\u8fb9\u6846<\/span><\/span><\/th>\n\u4e0b\u8fb9\u6846<\/span><\/span><\/th>\n\u5de6\u8fb9\u6846<\/span><\/span><\/th>\n\u53f3\u8fb9\u6846<\/span><\/span><\/th>\n<\/tr>\n<\/thead>\n
                                                                                                                  border-top-style:\u6837\u5f0f;<\/span><\/span><\/td>\nborder-bottom-style:\u6837\u5f0f;<\/span><\/span><\/td>\nborder-left-style:\u6837\u5f0f;<\/span><\/span><\/td>\nborder-right-style:\u6837\u5f0f;<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                  border-top-width:\u5bbd\u5ea6;<\/span><\/span><\/td>\nborder- bottom-width:\u5bbd\u5ea6;<\/span><\/span><\/td>\nborder-left-width:\u5bbd\u5ea6;<\/span><\/span><\/td>\nborder-right-width:\u5bbd\u5ea6;<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                  border-top-color:\u989c\u8272;<\/span><\/span><\/td>\nborder- bottom-color:\u989c\u8272;<\/span><\/span><\/td>\nborder-left-color:\u989c\u8272;<\/span><\/span><\/td>\nborder-right-color:\u989c\u8272;<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                  border-top:\u5bbd\u5ea6 \u6837\u5f0f \u989c\u8272;<\/span><\/span><\/td>\nborder-bottom:\u5bbd\u5ea6 \u6837\u5f0f \u989c\u8272;<\/span><\/span><\/td>\nborder-left:\u5bbd\u5ea6 \u6837\u5f0f \u989c\u8272;<\/span><\/span><\/td>\nborder-right:\u5bbd\u5ea6 \u6837\u5f0f \u989c\u8272;<\/span><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
                                                                                                                  \u8868\u683c\u7684\u7ec6\u7ebf\u8fb9\u6846\uff1a<\/span><\/strong><\/span><\/p>\n
                                                                                                                    \n
                                                                                                                  • \n
                                                                                                                    \u901a\u8fc7\u8868\u683c\u7684<\/span>cellspacing=\"0\"<\/code><\/span>,\u5c06\u5355\u5143\u683c\u4e0e\u5355\u5143\u683c\u4e4b\u95f4\u7684\u8ddd\u79bb\u8bbe\u7f6e\u4e3a0\uff0c<\/span><\/p>\n<\/li>\n
                                                                                                                  • \n
                                                                                                                    \u4f46\u662f\u4e24\u4e2a\u5355\u5143\u683c\u4e4b\u95f4\u7684\u8fb9\u6846\u4f1a\u51fa\u73b0\u91cd\u53e0\uff0c\u4ece\u800c\u4f7f\u8fb9\u6846\u53d8\u7c97<\/span><\/p>\n<\/li>\n
                                                                                                                  • \n
                                                                                                                    \u901a\u8fc7css\u5c5e\u6027\uff1atable{ border-collapse:collapse; } <\/span><\/p>\n
                                                                                                                      \n
                                                                                                                    • \n
                                                                                                                      collapse<\/code><\/span> \u5355\u8bcd\u662f\u5408\u5e76\u7684\u610f\u601d,<\/span>border-collapse: collapse;<\/code><\/span>\u8868\u793a\u76f8\u90bb\u8fb9\u6846\u5408\u5e76\u5728\u4e00\u8d77\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                                      <style>\r\n table {\r\n  width: 500px;\r\n  height: 300px;\r\n  border: 1px solid red;\r\n }\r\n td {\r\n  border: 1px solid red;\r\n  text-align: center;\r\n }\r\n table, td {\r\n  border-collapse: collapse;  \/*\u5408\u5e76\u76f8\u90bb\u8fb9\u6846*\/\r\n }\r\n<\/style><\/pre>\n
                                                                                                                      3. \u5185\u8fb9\u8ddd(padding)<\/span><\/h3>\n
                                                                                                                      padding\u5c5e\u6027\u7528\u4e8e\u8bbe\u7f6e\u5185\u8fb9\u8ddd\u3002\u662f\u6307\u8fb9\u6846\u4e0e\u5185\u5bb9\u4e4b\u95f4\u7684\u8ddd\u79bb\u3002<\/span><\/p>\n
                                                                                                                      \u8bbe\u7f6e<\/span><\/strong><\/span><\/p>\n
                                                                                                                      \n\n\n\n\n\n\n\n\n
                                                                                                                      \u5c5e\u6027<\/span><\/span><\/th>\n\u4f5c\u7528<\/span><\/span><\/th>\n<\/tr>\n<\/thead>\n
                                                                                                                      padding-left<\/span><\/span><\/td>\n\u5de6\u5185\u8fb9\u8ddd<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                      padding-right<\/span><\/span><\/td>\n\u53f3\u5185\u8fb9\u8ddd<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                      padding-top<\/span><\/span><\/td>\n\u4e0a\u5185\u8fb9\u8ddd<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                      padding-bottom<\/span><\/span><\/td>\n\u4e0b\u5185\u8fb9\u8ddd<\/span><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
                                                                                                                      padding\u7b80\u5199<\/span><\/strong><\/span><\/p>\n
                                                                                                                      \n\n\n\n\n\n\n\n\n
                                                                                                                      \u503c\u7684\u4e2a\u6570<\/span><\/span><\/th>\n\u8868\u8fbe\u610f\u601d<\/span><\/span><\/th>\n<\/tr>\n<\/thead>\n
                                                                                                                      1\u4e2a\u503c<\/span><\/span><\/td>\npadding\uff1a\u4e0a\u4e0b\u5de6\u53f3\u5185\u8fb9\u8ddd;<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                      2\u4e2a\u503c<\/span><\/span><\/td>\npadding: \u4e0a\u4e0b\u5185\u8fb9\u8ddd \u5de6\u53f3\u5185\u8fb9\u8ddd \uff1b<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                      3\u4e2a\u503c<\/span><\/span><\/td>\npadding\uff1a\u4e0a\u5185\u8fb9\u8ddd \u5de6\u53f3\u5185\u8fb9\u8ddd \u4e0b\u5185\u8fb9\u8ddd\uff1b<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                      4\u4e2a\u503c<\/span><\/span><\/td>\npadding: \u4e0a\u5185\u8fb9\u8ddd \u53f3\u5185\u8fb9\u8ddd \u4e0b\u5185\u8fb9\u8ddd \u5de6\u5185\u8fb9\u8ddd \uff1b<\/span><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
                                                                                                                      \u5f53\u6211\u4eec\u7ed9\u76d2\u5b50\u6307\u5b9apadding\u503c\u4e4b\u540e\uff0c \u53d1\u751f\u4e862\u4ef6\u4e8b\u60c5\uff1a<\/span><\/p>\n
                                                                                                                        \n
                                                                                                                      1. \n
                                                                                                                        \u5185\u5bb9\u548c\u8fb9\u6846 \u6709\u4e86\u8ddd\u79bb\uff0c\u6dfb\u52a0\u4e86\u5185\u8fb9\u8ddd\u3002<\/span><\/p>\n<\/li>\n
                                                                                                                      2. \n
                                                                                                                        \u76d2\u5b50\u4f1a\u53d8\u5927<\/span><\/p>\n<\/li>\n<\/ol>\n
                                                                                                                        \u89e3\u51b3\u63aa\u65bd\uff1a<\/span><\/strong><\/span>\u901a\u8fc7\u7ed9\u8bbe\u7f6e\u4e86\u5bbd\u9ad8\u7684\u76d2\u5b50\uff0c\u51cf\u53bb\u76f8\u5e94\u7684\u5185\u8fb9\u8ddd\u7684\u503c\uff0c\u7ef4\u6301\u76d2\u5b50\u539f\u6709\u7684\u5927\u5c0f\u3002<\/span><\/p>\n
                                                                                                                        padding\u4e0d\u5f71\u54cd\u76d2\u5b50\u5927\u5c0f\u60c5\u51b5\uff1a<\/span><\/strong><\/span>\u5982\u679c\u6ca1\u6709\u7ed9\u4e00\u4e2a\u76d2\u5b50\u6307\u5b9a\u5bbd\u5ea6\uff0c \u6b64\u65f6\uff0c\u5982\u679c\u7ed9\u8fd9\u4e2a\u76d2\u5b50\u6307\u5b9apadding\uff0c \u5219\u4e0d\u4f1a\u6491\u5f00\u76d2\u5b50\u3002<\/span><\/p>\n
                                                                                                                        4. \u5916\u8fb9\u8ddd\uff08margin\uff09<\/span><\/h3>\n
                                                                                                                        margin\u5c5e\u6027\u7528\u4e8e\u8bbe\u7f6e\u5916\u8fb9\u8ddd\u3002margin\u5c31\u662f\u63a7\u5236<\/span>\u76d2\u5b50\u548c\u76d2\u5b50\u4e4b\u95f4\u7684\u8ddd\u79bb<\/code><\/span><\/p>\n
                                                                                                                        \u8bbe\u7f6e<\/span><\/strong><\/span><\/p>\n
                                                                                                                        \n\n\n\n\n\n\n\n\n
                                                                                                                        \u5c5e\u6027<\/span><\/span><\/th>\n\u4f5c\u7528<\/span><\/span><\/th>\n<\/tr>\n<\/thead>\n
                                                                                                                        margin-left<\/span><\/span><\/td>\n\u5de6\u5916\u8fb9\u8ddd<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                        margin-right<\/span><\/span><\/td>\n\u53f3\u5916\u8fb9\u8ddd<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                        margin-top<\/span><\/span><\/td>\n\u4e0a\u5916\u8fb9\u8ddd<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                        margin-bottom<\/span><\/span><\/td>\n\u4e0b\u5916\u8fb9\u8ddd<\/span><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
                                                                                                                        margin\u503c\u7684\u7b80\u5199 \uff08\u590d\u5408\u5199\u6cd5\uff09\u4ee3\u8868\u610f\u601d \u8ddf padding \u5b8c\u5168\u76f8\u540c\u3002<\/span><\/p>\n
                                                                                                                        \u5757\u7ea7\u76d2\u5b50\u6c34\u5e73\u5c45\u4e2d\uff1a<\/span><\/strong><\/span><\/p>\n
                                                                                                                          \n
                                                                                                                        • \n
                                                                                                                          \u76d2\u5b50\u5fc5\u987b\u6307\u5b9a\u5bbd\u5ea6\uff08width\uff09<\/span><\/p>\n<\/li>\n
                                                                                                                        • \n
                                                                                                                          \u7136\u540e\u5c31\u7ed9\u5de6\u53f3\u7684\u5916\u8fb9\u8ddd\u90fd\u8bbe\u7f6e\u4e3aauto<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                                          \u5b9e\u9645\u5de5\u4f5c\u4e2d\u5e38\u7528\u8fd9\u79cd\u65b9\u5f0f\u8fdb\u884c\u7f51\u9875\u5e03\u5c40\uff0c\u793a\u4f8b\u4ee3\u7801\u5982\u4e0b\uff1a<\/span><\/p>\n
                                                                                                                          .header  { width: 960px; margin: 0 auto;}<\/pre>\n
                                                                                                                          \u5e38\u89c1\u7684\u5199\u6cd5\uff0c\u4ee5\u4e0b\u4e0b\u4e09\u79cd\u90fd\u53ef\u4ee5\u3002<\/span><\/p>\n
                                                                                                                            \n
                                                                                                                          • \n
                                                                                                                            margin-left: auto; margin-right: auto;<\/span><\/p>\n<\/li>\n
                                                                                                                          • \n
                                                                                                                            margin: auto;<\/span><\/p>\n<\/li>\n
                                                                                                                          • \n
                                                                                                                            margin: 0 auto;<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                                            \u6587\u5b57\u5c45\u4e2d\u548c\u76d2\u5b50\u5c45\u4e2d\u533a\u522b\uff1a<\/span><\/strong><\/span><\/p>\n
                                                                                                                              \n
                                                                                                                            1. \n
                                                                                                                              \u76d2\u5b50\u5185\u7684\u6587\u5b57\u6c34\u5e73\u5c45\u4e2d\u662f text-align: center; \u800c\u4e14\u8fd8\u53ef\u4ee5\u8ba9 \u884c\u5185\u5143\u7d20\u548c\u884c\u5185\u5757\u5c45\u4e2d\u5bf9\u9f50<\/span><\/p>\n<\/li>\n
                                                                                                                            2. \n
                                                                                                                              \u5757\u7ea7\u76d2\u5b50\u6c34\u5e73\u5c45\u4e2d \u5de6\u53f3margin \u6539\u4e3a auto<\/span><\/p>\n<\/li>\n<\/ol>\n
                                                                                                                              \u6e05\u9664\u5143\u7d20\u7684\u9ed8\u8ba4\u5185\u5916\u8fb9\u8ddd<\/span><\/strong><\/span><\/p>\n
                                                                                                                                \n
                                                                                                                              • \n
                                                                                                                                \u884c\u5185\u5143\u7d20\u4e3a\u4e86\u7167\u987e\u517c\u5bb9\u6027,\u5c3d\u91cf\u53ea\u8bbe\u7f6e\u5de6\u53f3\u5185\u5916\u8fb9\u8ddd\uff0c\u4e0d\u8981\u8bbe\u7f6e\u4e0a\u4e0b\u5185\u5916\u8fb9\u8ddd\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                                                * {\r\n   padding:0;         \/* \u6e05\u9664\u5185\u8fb9\u8ddd *\/\r\n   margin:0;          \/* \u6e05\u9664\u5916\u8fb9\u8ddd *\/\r\n}<\/pre>\n
                                                                                                                                5.\u5916\u8fb9\u8ddd\u5408\u5e76<\/span><\/h3>\n
                                                                                                                                \u4f7f\u7528margin\u5b9a\u4e49\u5757\u5143\u7d20\u7684<\/span>\u300c\u5782\u76f4\u5916\u8fb9\u8ddd\u300d<\/span><\/strong><\/span>\u65f6\uff0c\u53ef\u80fd\u4f1a\u51fa\u73b0\u5916\u8fb9\u8ddd\u7684\u5408\u5e76\u3002<\/span><\/p>\n
                                                                                                                                (1). \u76f8\u90bb\u5757\u5143\u7d20\u5782\u76f4\u5916\u8fb9\u8ddd\u7684\u5408\u5e76<\/span><\/h4>\n
                                                                                                                                  \n
                                                                                                                                • \n
                                                                                                                                  \u5f53\u4e0a\u4e0b\u76f8\u90bb\u7684\u4e24\u4e2a\u5757\u5143\u7d20\u76f8\u9047\u65f6\uff0c\u5982\u679c\u4e0a\u9762\u7684\u5143\u7d20\u6709\u4e0b\u5916\u8fb9\u8dddmargin-bottom<\/span><\/p>\n<\/li>\n
                                                                                                                                • \n
                                                                                                                                  \u4e0b\u9762\u7684\u5143\u7d20\u6709\u4e0a\u5916\u8fb9\u8dddmargin-top\uff0c\u5219\u4ed6\u4eec\u4e4b\u95f4\u7684\u5782\u76f4\u95f4\u8ddd\u4e0d\u662fmargin-bottom\u4e0emargin-top\u4e4b\u548c<\/span><\/p>\n<\/li>\n
                                                                                                                                • \n
                                                                                                                                  \u300c\u53d6\u4e24\u4e2a\u503c\u4e2d\u7684\u8f83\u5927\u8005\u300d<\/span><\/strong><\/span>\u8fd9\u79cd\u73b0\u8c61\u88ab\u79f0\u4e3a\u76f8\u90bb\u5757\u5143\u7d20\u5782\u76f4\u5916\u8fb9\u8ddd\u7684\u5408\u5e76\uff08\u4e5f\u79f0\u5916\u8fb9\u8ddd\u584c\u9677\uff09\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                                                  \u300c\u89e3\u51b3\u65b9\u6848\uff1a\u5c3d\u91cf\u7ed9\u53ea\u7ed9\u4e00\u4e2a\u76d2\u5b50\u6dfb\u52a0margin\u503c\u300d<\/span><\/strong><\/span>\u3002<\/span><\/p>\n
                                                                                                                                  (2). \u5d4c\u5957\u5757\u5143\u7d20\u5782\u76f4\u5916\u8fb9\u8ddd\u7684\u5408\u5e76\uff08\u584c\u9677\uff09<\/span><\/h4>\n
                                                                                                                                    \n
                                                                                                                                  • \n
                                                                                                                                    \u5bf9\u4e8e\u4e24\u4e2a\u5d4c\u5957\u5173\u7cfb\u7684\u5757\u5143\u7d20\uff0c\u5982\u679c\u7236\u5143\u7d20\u6ca1\u6709\u4e0a\u5185\u8fb9\u8ddd\u53ca\u8fb9\u6846<\/span><\/p>\n<\/li>\n
                                                                                                                                  • \n
                                                                                                                                    \u7236\u5143\u7d20\u7684\u4e0a\u5916\u8fb9\u8ddd\u4f1a\u4e0e\u5b50\u5143\u7d20\u7684\u4e0a\u5916\u8fb9\u8ddd\u53d1\u751f\u5408\u5e76<\/span><\/p>\n<\/li>\n
                                                                                                                                  • \n
                                                                                                                                    \u5408\u5e76\u540e\u7684\u5916\u8fb9\u8ddd\u4e3a\u4e24\u8005\u4e2d\u7684\u8f83\u5927\u8005<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                                                    \u89e3\u51b3\u65b9\u6848\uff1a<\/span><\/strong><\/span><\/p>\n
                                                                                                                                      \n
                                                                                                                                    1. \n
                                                                                                                                      \u53ef\u4ee5\u4e3a\u7236\u5143\u7d20\u5b9a\u4e49\u4e0a\u8fb9\u6846\u3002<\/span><\/p>\n<\/li>\n
                                                                                                                                    2. \n
                                                                                                                                      \u53ef\u4ee5\u4e3a\u7236\u5143\u7d20\u5b9a\u4e49\u4e0a\u5185\u8fb9\u8ddd<\/span><\/p>\n<\/li>\n
                                                                                                                                    3. \n
                                                                                                                                      \u53ef\u4ee5\u4e3a\u7236\u5143\u7d20\u6dfb\u52a0overflow: hidden\u3002<\/span><\/p>\n<\/li>\n<\/ol>\n
                                                                                                                                      \u8fd8\u6709\u5176\u4ed6\u65b9\u6cd5\uff0c\u6bd4\u5982\u6d6e\u52a8\u3001\u56fa\u5b9a\u3001\u7edd\u5bf9\u5b9a\u4f4d\u7684\u76d2\u5b50\u4e0d\u4f1a\u6709\u95ee\u9898\uff0c\u540e\u9762\u54b1\u4eec\u518d\u603b\u7ed3\u3002\u3002\u3002<\/span><\/p>\n
                                                                                                                                      \u76d2\u5b50\u6a21\u578b\u5e03\u5c40\u7a33\u5b9a\u6027<\/span><\/h4>\n
                                                                                                                                      \u4f18\u5148\u4f7f\u7528 \u5bbd\u5ea6 \uff08width\uff09 \u5176\u6b21 \u4f7f\u7528\u5185\u8fb9\u8ddd\uff08padding\uff09 \u518d\u6b21 \u5916\u8fb9\u8ddd\uff08margin\uff09<\/span><\/p>\n
                                                                                                                                      width >  padding  >   margin<\/pre>\n
                                                                                                                                      \u539f\u56e0\uff1a<\/span><\/strong><\/span><\/p>\n
                                                                                                                                        \n
                                                                                                                                      • \n
                                                                                                                                        margin \u4f1a\u6709\u5916\u8fb9\u8ddd\u5408\u5e76 \u8fd8\u6709 ie6\u4e0b\u9762margin \u52a0\u500d\u7684bug\uff08\u8ba8\u538c\uff09\u6240\u4ee5\u6700\u540e\u4f7f\u7528\u3002<\/span><\/p>\n<\/li>\n
                                                                                                                                      • \n
                                                                                                                                        padding \u4f1a\u5f71\u54cd\u76d2\u5b50\u5927\u5c0f\uff0c \u9700\u8981\u8fdb\u884c\u52a0\u51cf\u8ba1\u7b97\uff08\u9ebb\u70e6\uff09 \u5176\u6b21\u4f7f\u7528\u3002<\/span><\/p>\n<\/li>\n
                                                                                                                                      • \n
                                                                                                                                        width \u6ca1\u6709\u95ee\u9898\uff08\u55e8\u76ae\uff09\u6211\u4eec\u7ecf\u5e38\u4f7f\u7528\u5bbd\u5ea6\u5269\u4f59\u6cd5 \u9ad8\u5ea6\u5269\u4f59\u6cd5\u6765\u505a\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                                                        6. CSS3 \u65b0\u589e<\/span><\/h3>\n
                                                                                                                                        \u5706\u89d2\u8fb9\u6846\uff1a\r\nborder-radius:length;\r\n\r\nborder-top-left-radius   \u5b9a\u4e49\u4e86\u5de6\u4e0a\u89d2\u7684\u5f27\u5ea6\r\nborder-top-right-radius   \u5b9a\u4e49\u4e86\u53f3\u4e0a\u89d2\u7684\u5f27\u5ea6\r\nborder-bottom-right-radius   \u5b9a\u4e49\u4e86\u53f3\u4e0b\u89d2\u7684\u5f27\u5ea6\r\nborder-bottom-left-radius   \u5b9a\u4e49\u4e86\u5de6\u4e0b\u89d2\u7684\u5f27\u5ea6<\/pre>\n
                                                                                                                                          \n
                                                                                                                                        • \n
                                                                                                                                          \u5176\u4e2d\u6bcf\u4e00\u4e2a\u503c\u53ef\u4ee5\u4e3a \u6570\u503c\u6216\u767e\u5206\u6bd4\u7684\u5f62\u5f0f\u3002<\/span><\/p>\n<\/li>\n
                                                                                                                                        • \n
                                                                                                                                          \u6280\u5de7\uff1a\u8ba9\u4e00\u4e2a\u6b63\u65b9\u5f62 \u53d8\u6210\u5706\u5708<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                                                          border-radius: 50%;<\/pre>\n
                                                                                                                                          \u5982\u679c\u8981\u5728\u56db\u4e2a\u89d2\u4e0a\u4e00\u4e00\u6307\u5b9a\uff0c\u53ef\u4ee5\u4f7f\u7528\u4ee5\u4e0b\u89c4\u5219\ud83d\udc47\ud83d\udc47\uff1a<\/span><\/p>\n
                                                                                                                                          border-radius: \u5de6\u4e0a\u89d2 \u53f3\u4e0a\u89d2  \u53f3\u4e0b\u89d2  \u5de6\u4e0b\u89d2;<\/pre>\n
                                                                                                                                            \n
                                                                                                                                          1. \n
                                                                                                                                            \u56db\u4e2a\u503c: \u7b2c\u4e00\u4e2a\u503c\u4e3a\u5de6\u4e0a\u89d2\uff0c\u7b2c\u4e8c\u4e2a\u503c\u4e3a\u53f3\u4e0a\u89d2\uff0c\u7b2c\u4e09\u4e2a\u503c\u4e3a\u53f3\u4e0b\u89d2\uff0c\u7b2c\u56db\u4e2a\u503c\u4e3a\u5de6\u4e0b\u89d2\u3002<\/span><\/p>\n<\/li>\n
                                                                                                                                          2. \n
                                                                                                                                            \u4e09\u4e2a\u503c: \u7b2c\u4e00\u4e2a\u503c\u4e3a\u5de6\u4e0a\u89d2, \u7b2c\u4e8c\u4e2a\u503c\u4e3a\u53f3\u4e0a\u89d2\u548c\u5de6\u4e0b\u89d2\uff0c\u7b2c\u4e09\u4e2a\u503c\u4e3a\u53f3\u4e0b\u89d2<\/span><\/p>\n<\/li>\n
                                                                                                                                          3. \n
                                                                                                                                            \u4e24\u4e2a\u503c: \u7b2c\u4e00\u4e2a\u503c\u4e3a\u5de6\u4e0a\u89d2\u4e0e\u53f3\u4e0b\u89d2\uff0c\u7b2c\u4e8c\u4e2a\u503c\u4e3a\u53f3\u4e0a\u89d2\u4e0e\u5de6\u4e0b\u89d2<\/span><\/p>\n<\/li>\n
                                                                                                                                          4. \n
                                                                                                                                            \u4e00\u4e2a\u503c\uff1a\u56db\u4e2a\u5706\u89d2\u503c\u76f8\u540c<\/span><\/p>\n<\/li>\n<\/ol>\n
                                                                                                                                            \u76d2\u5b50\u9634\u5f71(box-shadow)\uff1a\r\nbox-shadow: offset-x offset-y [blur [spread]] [color] [inset]<\/pre>\n
                                                                                                                                            \n\n\n\n\n\n\n\n\n\n\n
                                                                                                                                            \u503c<\/span><\/span><\/th>\n\u63cf\u8ff0<\/span><\/span><\/th>\n<\/tr>\n<\/thead>\n
                                                                                                                                            offset-x<\/span><\/span><\/td>\n\u9634\u5f71\u7684\u6c34\u5e73\u504f\u79fb\u91cf\u3002\u6b63\u6570\u5411\u53f3\u504f\u79fb\uff0c\u8d1f\u6570\u5411\u5de6\u504f\u79fb\u3002<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                                            offset-y<\/span><\/span><\/td>\n\u9634\u5f71\u7684\u5782\u76f4\u504f\u79fb\u91cf\u3002\u6b63\u6570\u5411\u4e0b\u504f\u79fb\uff0c\u8d1f\u6570\u5411\u4e0a\u504f\u79fb\u3002<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                                            blur<\/span><\/span><\/td>\n\u53ef\u9009\u3002\u9634\u5f71\u6a21\u7cca\u8ddd\u79bb\uff0c\u4e0d\u80fd\u53d6\u8d1f\u6570\u3002<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                                            spread<\/span><\/span><\/td>\n\u53ef\u9009\u3002\u9634\u5f71\u5927\u5c0f<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                                            color<\/span><\/span><\/td>\n\u53ef\u9009\u3002\u9634\u5f71\u7684\u989c\u8272<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                                            inset<\/span><\/span><\/td>\n\u53ef\u9009\u3002\u8868\u793a\u6dfb\u52a0\u5185\u9634\u5f71\uff0c\u9ed8\u8ba4\u4e3a\u5916\u9634\u5f71<\/span><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
                                                                                                                                            div {\r\n   width: 200px;\r\n   height: 200px;\r\n   border: 10px solid red;\r\n   \/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  *\/\r\n   \/* box-shadow:\u6c34\u5e73\u4f4d\u7f6e \u5782\u76f4\u4f4d\u7f6e \u6a21\u7cca\u8ddd\u79bb \u9634\u5f71\u5c3a\u5bf8\uff08\u5f71\u5b50\u5927\u5c0f\uff09 \u9634\u5f71\u989c\u8272  \u5185\/\u5916\u9634\u5f71\uff1b *\/\r\n   box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);   \r\n}<\/pre>\n
                                                                                                                                            \u516b\u3001\u6d6e\u52a8<\/span><\/h2>\n
                                                                                                                                            \u6d6e\u52a8<\/span><\/h3>\n
                                                                                                                                            1. CSS\u5e03\u5c40\u7684\u4e09\u79cd\u673a\u5236<\/span><\/strong><\/span><\/p>\n
                                                                                                                                            \u7f51\u9875\u7684\u6838\u5fc3\u5e03\u5c40—–\u5c31\u662f<\/span>\u7528CSS\u6765\u6446\u653e\u76d2\u5b50<\/span><\/strong><\/span><\/p>\n
                                                                                                                                            CSS \u63d0\u4f9b\u4e863\u79cd\u673a\u5236\u6765\u8bbe\u7f6e\u76d2\u5b50\u7684\u6446\u653e\u4f4d\u7f6e\uff0c\u5206\u522b\u662f\u666e\u901a\u6d41\uff08\u6807\u51c6\u6d41\uff09\u3001\u6d6e\u52a8\u548c\u5b9a\u4f4d\uff0c\u5176\u4e2d\uff1a<\/span><\/p>\n
                                                                                                                                            A. \u666e\u901a\u6d41\uff08\u6807\u51c6\u6d41\uff09<\/span><\/strong><\/span><\/p>\n
                                                                                                                                              \n
                                                                                                                                            • \n
                                                                                                                                              \u5757\u7ea7\u5143\u7d20\u4f1a\u72ec\u5360\u4e00\u884c\uff0c\u4ece\u4e0a\u5411\u4e0b\u987a\u5e8f\u6392\u5217\uff1b<\/span><\/p>\n
                                                                                                                                                \n
                                                                                                                                              • \n
                                                                                                                                                \u5e38\u7528\u5143\u7d20\uff1adiv\u3001hr\u3001p\u3001h1~h6\u3001ul\u3001ol\u3001dl\u3001form\u3001table<\/span><\/p>\n<\/li>\n<\/ul>\n<\/li>\n
                                                                                                                                              • \n
                                                                                                                                                \u884c\u5185\u5143\u7d20\u4f1a\u6309\u7167\u987a\u5e8f\uff0c\u4ece\u5de6\u5230\u53f3\u987a\u5e8f\u6392\u5217\uff0c\u78b0\u5230\u7236\u5143\u7d20\u8fb9\u7f18\u5219\u81ea\u52a8\u6362\u884c\uff1b<\/span><\/p>\n
                                                                                                                                                  \n
                                                                                                                                                • \n
                                                                                                                                                  \u5e38\u7528\u5143\u7d20\uff1aspan\u3001a\u3001i\u3001em\u7b49<\/span><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                                                                  B. \u6d6e\u52a8<\/span><\/strong><\/span><\/p>\n
                                                                                                                                                    \n
                                                                                                                                                  • \n
                                                                                                                                                    \u8ba9\u76d2\u5b50\u4ece\u666e\u901a\u6d41\u4e2d\u6d6e\u8d77\u6765,\u4e3b\u8981\u4f5c\u7528\u8ba9\u591a\u4e2a\u5757\u7ea7\u76d2\u5b50\u4e00\u884c\u663e\u793a\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                                                                    C. \u5b9a\u4f4d<\/span><\/strong><\/span><\/p>\n
                                                                                                                                                      \n
                                                                                                                                                    • \n
                                                                                                                                                      \u5c06\u76d2\u5b50\u5b9a\u5728\u6d4f\u89c8\u5668\u7684\u67d0\u4e00\u4e2a\u4f4d\u7f6e\u2014\u2014CSS \u79bb\u4e0d\u5f00\u5b9a\u4f4d\uff0c\u7279\u522b\u662f\u540e\u9762\u7684 js \u7279\u6548\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                                                                      2. \u4ec0\u4e48\u662f\u6d6e\u52a8<\/span><\/strong><\/span>\u5143\u7d20\u7684\u6d6e\u52a8\u662f\u6307\u8bbe\u7f6e\u4e86\u6d6e\u52a8\u5c5e\u6027\u7684\u5143\u7d20\u4f1a<\/span><\/p>\n
                                                                                                                                                        \n
                                                                                                                                                      • \n
                                                                                                                                                        \u8131\u79bb\u6807\u51c6\u666e\u901a\u6d41\u7684\u63a7\u5236,\u4e0d\u5360\u4f4d\u7f6e\uff0c\u8131\u6807<\/span><\/p>\n<\/li>\n
                                                                                                                                                      • \n
                                                                                                                                                        \u79fb\u52a8\u5230\u6307\u5b9a\u4f4d\u7f6e\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                                                                        \u4f5c\u7528<\/span><\/h5>\n
                                                                                                                                                          \n
                                                                                                                                                        1. \n
                                                                                                                                                          \u8ba9\u591a\u4e2a\u76d2\u5b50(div)\u6c34\u5e73\u6392\u5217\u6210\u4e00\u884c\uff0c\u4f7f\u5f97\u6d6e\u52a8\u79f0\u4e3a\u5e03\u5c40\u7684\u91cd\u8981\u624b\u6bb5\u3002<\/span><\/p>\n<\/li>\n
                                                                                                                                                        2. \n
                                                                                                                                                          \u53ef\u4ee5\u5b9e\u73b0\u76d2\u5b50\u7684\u5de6\u53f3\u5bf9\u9f50\u7b49\u7b49\u3002<\/span><\/p>\n<\/li>\n
                                                                                                                                                        3. \n
                                                                                                                                                          \u6d6e\u52a8\u6700\u65e9\u662f\u7528\u6765\u63a7\u5236\u56fe\u7247\uff0c\u5b9e\u73b0\u6587\u5b57\u73af\u7ed5\u56fe\u7247\u6548\u679c\u3002<\/span><\/p>\n<\/li>\n
                                                                                                                                                        4. \n
                                                                                                                                                          float\u5c5e\u6027\u4f1a\u6539\u53d8\u5143\u7d20\u7684display\u5c5e\u6027\uff0c\u4efb\u4f55\u5143\u7d20\u90fd\u53ef\u4ee5\u6d6e\u52a8\u3002\u6d6e\u52a8\u5143\u7d20\u4f1a\u751f\u6210\u4e00\u4e2a\u5757\u7ea7\u6846\uff0c\u800c\u4e0d\u8bba\u5b83\u672c\u8eab\u662f\u4f55\u79cd\u5143\u7d20\u3002\u751f\u6210\u7684\u5757\u7ea7\u6846\u548c\u6211\u4eec\u524d\u9762\u7684\u884c\u5185\u5757\u6781\u5176\u76f8\u4f3c\u3002<\/span><\/p>\n<\/li>\n<\/ol>\n
                                                                                                                                                          \u8bed\u6cd5<\/span><\/h5>\n
                                                                                                                                                          \u9009\u62e9\u5668 { float: \u5c5e\u6027\u503c; }<\/pre>\n
                                                                                                                                                          \n\n\n\n\n\n\n\n
                                                                                                                                                          \u5c5e\u6027\u503c<\/span><\/span><\/th>\n\u63cf\u8ff0<\/span><\/span><\/th>\n<\/tr>\n<\/thead>\n
                                                                                                                                                          none<\/span><\/span><\/td>\n\u5143\u7d20\u4e0d\u6d6e\u52a8\uff08\u9ed8\u8ba4\u503c\uff09<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                                                          left<\/span><\/span><\/td>\n\u5143\u7d20\u5411\u5de6\u6d6e\u52a8<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                                                          right<\/span><\/span><\/td>\n\u5143\u7d20\u5411\u53f3\u6d6e\u52a8<\/span><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
                                                                                                                                                          \u6d6e\u52a8\u53ea\u4f1a\u5f71\u54cd\u5f53\u524d\u6216\u8005\u540e\u9762\u7684\u6807\u51c6\u6d41\u76d2\u5b50\uff0c\u4e0d\u4f1a\u5f71\u54cd\u524d\u9762\u7684\u6807\u51c6\u6d41<\/span><\/p>\n
                                                                                                                                                          \u5efa\u8bae\uff1a\u5982\u679c\u4e00\u4e2a\u76d2\u5b50\u91cc\u9762\u6709\u591a\u4e2a\u5b50\u76d2\u5b50\uff0c\u5176\u4e2d\u4e00\u4e2a\u6d6e\u52a8\uff0c\u5176\u4ed6\u5144\u5f1f\u4e5f\u5e94\u8be5\u6d6e\u52a8\u3002\u9632\u6b62\u5f15\u8d77\u95ee\u9898\u3002<\/span><\/p>\n
                                                                                                                                                          \u6d6e\u52a8(float)\u5c0f\u7ed3<\/span><\/strong><\/span><\/p>\n
                                                                                                                                                          \n\n\n\n\n\n\n\n
                                                                                                                                                          \u7279\u70b9<\/span><\/span><\/th>\n\u8bf4\u660e<\/span><\/span><\/th>\n<\/tr>\n<\/thead>\n
                                                                                                                                                          \u6d6e<\/span><\/span><\/td>\n\u52a0\u4e86\u6d6e\u52a8\u7684\u76d2\u5b50<\/span>\u300c\u662f\u6d6e\u8d77\u6765\u300d<\/span><\/strong><\/span>\u7684\uff0c\u6f02\u6d6e\u5728\u5176\u4ed6\u6807\u51c6\u6d41\u76d2\u5b50\u7684\u4e0a\u9762\u3002<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                                                          \u6f0f<\/span><\/span><\/td>\n\u52a0\u4e86\u6d6e\u52a8\u7684\u76d2\u5b50<\/span>\u300c\u662f\u4e0d\u5360\u4f4d\u7f6e\u7684\u300d<\/span><\/strong><\/span>\uff0c\u5b83\u539f\u6765\u7684\u4f4d\u7f6e<\/span>\u300c\u6f0f\u7ed9\u4e86\u6807\u51c6\u6d41\u7684\u76d2\u5b50\u300d<\/span><\/strong><\/span>\u3002<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                                                          \u7279<\/span><\/span><\/td>\n\u300c\u7279\u522b\u6ce8\u610f\u300d<\/span><\/strong><\/span>\uff1a\u6d6e\u52a8\u5143\u7d20\u4f1a\u6539\u53d8display\u5c5e\u6027\uff0c \u7c7b\u4f3c\u8f6c\u6362\u4e3a\u4e86\u884c\u5185\u5757\uff0c\u4f46\u662f\u5143\u7d20\u4e4b\u95f4\u6ca1\u6709\u7a7a\u767d\u7f1d\u9699<\/span><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
                                                                                                                                                          \u6e05\u9664\u6d6e\u52a8<\/span><\/h3>\n
                                                                                                                                                          \u56e0\u4e3a\u7236\u7ea7\u76d2\u5b50\u5f88\u591a\u60c5\u51b5\u4e0b\uff0c\u4e0d\u65b9\u4fbf\u7ed9\u9ad8\u5ea6\uff0c\u4f46\u662f\u5b50\u76d2\u5b50\u6d6e\u52a8\u5c31\u4e0d\u5360\u6709\u4f4d\u7f6e\uff0c\u6700\u540e\u7236\u7ea7\u76d2\u5b50\u9ad8\u5ea6\u4e3a0\uff0c\u5c31\u5f71\u54cd\u4e86\u4e0b\u9762\u7684\u6807\u51c6\u6d41\u76d2\u5b50\u3002<\/span><\/p>\n
                                                                                                                                                          \u603b\u7ed3\uff1a<\/span><\/strong><\/span><\/p>\n
                                                                                                                                                            \n
                                                                                                                                                          • \n
                                                                                                                                                            \u7531\u4e8e\u6d6e\u52a8\u5143\u7d20\u4e0d\u518d\u5360\u7528\u539f\u6587\u6863\u6d41\u7684\u4f4d\u7f6e\uff0c\u6240\u4ee5\u5b83\u4f1a\u5bf9\u540e\u9762\u7684\u5143\u7d20\u6392\u7248\u4ea7\u751f\u5f71\u54cd<\/span><\/p>\n<\/li>\n
                                                                                                                                                          • \n
                                                                                                                                                            \u51c6\u786e\u5730\u8bf4\uff0c\u5e76\u4e0d\u662f\u6e05\u9664\u6d6e\u52a8\uff0c\u800c\u662f\u6e05\u9664\u6d6e\u52a8\u540e\u9020\u6210\u7684\u5f71\u54cd<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                                                                            \u6e05\u9664\u6d6e\u52a8\u672c\u8d28<\/span><\/strong><\/span>\u6e05\u9664\u6d6e\u52a8\u4e3b\u8981\u4e3a\u4e86\u89e3\u51b3\u7236\u7ea7\u5143\u7d20\u56e0\u4e3a\u5b50\u7ea7\u6d6e\u52a8\u5f15\u8d77\u5185\u90e8\u9ad8\u5ea6\u4e3a0 \u7684\u95ee\u9898\u3002\u6e05\u9664\u6d6e\u52a8\u4e4b\u540e\uff0c \u7236\u7ea7\u5c31\u4f1a\u6839\u636e\u6d6e\u52a8\u7684\u5b50\u76d2\u5b50\u81ea\u52a8\u68c0\u6d4b\u9ad8\u5ea6\u3002\u7236\u7ea7\u6709\u4e86\u9ad8\u5ea6\uff0c\u5c31\u4e0d\u4f1a\u5f71\u54cd\u4e0b\u9762\u7684\u6807\u51c6\u6d41\u4e86<\/span><\/p>\n
                                                                                                                                                            \u6e05\u9664\u6d6e\u52a8\u7684\u65b9\u6cd5<\/span><\/h4>\n
                                                                                                                                                            \u9009\u62e9\u5668 { clear: \u5c5e\u6027\u503c; }   clear \u6e05\u9664<\/pre>\n
                                                                                                                                                            \n\n\n\n\n\n\n\n
                                                                                                                                                            \u5c5e\u6027\u503c<\/span><\/span><\/th>\n\u63cf\u8ff0<\/span><\/span><\/th>\n<\/tr>\n<\/thead>\n
                                                                                                                                                            left<\/span><\/span><\/td>\n\u4e0d\u5141\u8bb8\u5de6\u4fa7\u6709\u6d6e\u52a8\u5143\u7d20\uff08\u6e05\u9664\u5de6\u4fa7\u6d6e\u52a8\u7684\u5f71\u54cd\uff09<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                                                            right<\/span><\/span><\/td>\n\u4e0d\u5141\u8bb8\u53f3\u4fa7\u6709\u6d6e\u52a8\u5143\u7d20\uff08\u6e05\u9664\u53f3\u4fa7\u6d6e\u52a8\u7684\u5f71\u54cd\uff09<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                                                            both<\/span><\/span><\/td>\n\u540c\u65f6\u6e05\u9664\u5de6\u53f3\u4e24\u4fa7\u6d6e\u52a8\u7684\u5f71\u54cd<\/span><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
                                                                                                                                                            \u5b9e\u9645\u5de5\u4f5c\u4e2d,\u51e0\u4e4e\u53ea\u7528clear: both<\/span><\/p>\n
                                                                                                                                                            1).\u989d\u5916\u6807\u7b7e\u6cd5(\u9694\u5899\u6cd5)<\/span><\/strong><\/span><\/p>\n
                                                                                                                                                            \u662fW3C\u63a8\u8350\u7684\u505a\u6cd5\u662f\u901a\u8fc7\u5728\u6d6e\u52a8\u5143\u7d20\u672b\u5c3e\u6dfb\u52a0\u4e00\u4e2a\u7a7a\u7684\u6807\u7b7e\u4f8b\u5982 <\/span><div style=”clear:both”><\/span><\/div><\/span>\uff0c\u6216\u5219\u5176\u4ed6\u6807\u7b7ebr\u7b49\u4ea6\u53ef\u3002<\/span><\/p>\n
                                                                                                                                                              \n
                                                                                                                                                            • \n
                                                                                                                                                              \u4f18\u70b9\uff1a\u901a\u4fd7\u6613\u61c2\uff0c\u4e66\u5199\u65b9\u4fbf<\/span><\/p>\n<\/li>\n
                                                                                                                                                            • \n
                                                                                                                                                              \u7f3a\u70b9\uff1a\u6dfb\u52a0\u8bb8\u591a\u65e0\u610f\u4e49\u7684\u6807\u7b7e\uff0c\u7ed3\u6784\u5316\u8f83\u5dee\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                                                                              2).\u7236\u7ea7\u6dfb\u52a0overflow\u5c5e\u6027\u65b9\u6cd5<\/span><\/strong><\/span><\/p>\n
                                                                                                                                                              \u53ef\u4ee5\u7ed9\u7236\u7ea7\u6dfb\u52a0\uff1a overflow\u4e3a hidden| auto| scroll  \u90fd\u53ef\u4ee5\u5b9e\u73b0\u3002<\/pre>\n
                                                                                                                                                                \n
                                                                                                                                                              • \n
                                                                                                                                                                \u4f18\u70b9\uff1a \u4ee3\u7801\u7b80\u6d01<\/span><\/p>\n<\/li>\n
                                                                                                                                                              • \n
                                                                                                                                                                \u7f3a\u70b9\uff1a \u5185\u5bb9\u589e\u591a\u65f6\u5019\u5bb9\u6613\u9020\u6210\u4e0d\u4f1a\u81ea\u52a8\u6362\u884c\u5bfc\u81f4\u5185\u5bb9\u88ab\u9690\u85cf\u6389\uff0c\u65e0\u6cd5\u663e\u793a\u9700\u8981\u6ea2\u51fa\u7684\u5143\u7d20\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                                                                                3).\u4f7f\u7528after\u4f2a\u5143\u7d20\u6e05\u9664\u6d6e\u52a8<\/span><\/strong><\/span>:after \u65b9\u5f0f\u4e3a\u7a7a\u5143\u7d20\u989d\u5916\u6807\u7b7e\u6cd5\u7684\u5347\u7ea7\u7248\uff0c\u597d\u5904\u662f\u4e0d\u7528\u5355\u72ec\u52a0\u6807\u7b7e\u4e86<\/span><\/p>\n
                                                                                                                                                                    .clearfix:after {\r\n        content: \"\";\r\n        display: block;\r\n        height: 0;\r\n        clear: both;\r\n        visibility: hidden;\r\n    }\r\n  \r\n    \/* IE6\u30017 \u4e13\u6709 *\/\r\n    .clearfix {\r\n        *zoom: 1;\r\n    }<\/pre>\n
                                                                                                                                                                  \n
                                                                                                                                                                • \n
                                                                                                                                                                  \u4f18\u70b9\uff1a\u7b26\u5408\u95ed\u5408\u6d6e\u52a8\u601d\u60f3 \u7ed3\u6784\u8bed\u4e49\u5316\u6b63\u786e<\/span><\/p>\n<\/li>\n
                                                                                                                                                                • \n
                                                                                                                                                                  \u7f3a\u70b9\uff1a\u7531\u4e8eIE6-7\u4e0d\u652f\u6301:after\uff0c\u4f7f\u7528 zoom:1\u89e6\u53d1 hasLayout\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                                                                                  4).\u4f7f\u7528\u53cc\u4f2a\u5143\u7d20\u6e05\u9664\u6d6e\u52a8<\/span><\/strong><\/span><\/p>\n
                                                                                                                                                                      .clearfix:before,\r\n    .clearfix:after {\r\n        content: \"\";\r\n        display: table;\r\n    }\r\n\r\n    .clearfix:after {\r\n        clear: both;\r\n    }\r\n\r\n    .clearfix {\r\n       *zoom: 1;\r\n    }<\/pre>\n
                                                                                                                                                                    \n
                                                                                                                                                                  • \n
                                                                                                                                                                    \u4f18\u70b9\uff1a \u4ee3\u7801\u66f4\u7b80\u6d01<\/span><\/p>\n<\/li>\n
                                                                                                                                                                  • \n
                                                                                                                                                                    \u7f3a\u70b9\uff1a \u7531\u4e8eIE6-7\u4e0d\u652f\u6301:after\uff0c\u4f7f\u7528 zoom:1\u89e6\u53d1 hasLayout\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                                                                                    \u6e05\u9664\u6d6e\u52a8\u603b\u7ed3<\/span><\/h4>\n
                                                                                                                                                                    \u4ec0\u4e48\u65f6\u5019\u7528\u6e05\u9664\u6d6e\u52a8\u5462\uff1f<\/pre>\n
                                                                                                                                                                      \n
                                                                                                                                                                    1. \n
                                                                                                                                                                      \u7236\u7ea7\u6ca1\u9ad8\u5ea6<\/span><\/p>\n<\/li>\n
                                                                                                                                                                    2. \n
                                                                                                                                                                      \u5b50\u76d2\u5b50\u6d6e\u52a8\u4e86<\/span><\/p>\n<\/li>\n
                                                                                                                                                                    3. \n
                                                                                                                                                                      \u5f71\u54cd\u4e0b\u9762\u5e03\u5c40\u4e86\uff0c\u6211\u4eec\u5c31\u5e94\u8be5\u6e05\u9664\u6d6e\u52a8\u4e86\u3002<\/span><\/p>\n<\/li>\n<\/ol>\n
                                                                                                                                                                      \n\n\n\n\n\n\n\n\n
                                                                                                                                                                      \u6e05\u9664\u6d6e\u52a8\u7684\u65b9\u5f0f<\/span><\/span><\/th>\n\u4f18\u70b9<\/span><\/span><\/th>\n\u7f3a\u70b9<\/span><\/span><\/th>\n<\/tr>\n<\/thead>\n
                                                                                                                                                                      \u989d\u5916\u6807\u7b7e\u6cd5\uff08\u9694\u5899\u6cd5\uff09<\/span><\/span><\/td>\n\u901a\u4fd7\u6613\u61c2\uff0c\u4e66\u5199\u65b9\u4fbf<\/span><\/span><\/td>\n\u6dfb\u52a0\u8bb8\u591a\u65e0\u610f\u4e49\u7684\u6807\u7b7e\uff0c\u7ed3\u6784\u5316\u8f83\u5dee\u3002<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                                                                      \u7236\u7ea7overflow:hidden;<\/span><\/span><\/td>\n\u4e66\u5199\u7b80\u5355<\/span><\/span><\/td>\n\u6ea2\u51fa\u9690\u85cf<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                                                                      \u7236\u7ea7after\u4f2a\u5143\u7d20<\/span><\/span><\/td>\n\u7ed3\u6784\u8bed\u4e49\u5316\u6b63\u786e<\/span><\/span><\/td>\n\u7531\u4e8eIE6-7\u4e0d\u652f\u6301:after\uff0c\u517c\u5bb9\u6027\u95ee\u9898<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                                                                      \u7236\u7ea7\u53cc\u4f2a\u5143\u7d20<\/span><\/span><\/td>\n\u7ed3\u6784\u8bed\u4e49\u5316\u6b63\u786e<\/span><\/span><\/td>\n\u7531\u4e8eIE6-7\u4e0d\u652f\u6301:after\uff0c\u517c\u5bb9\u6027\u95ee\u9898<\/span><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
                                                                                                                                                                      CSS\u5c5e\u6027\u4e66\u5199\u987a\u5e8f<\/span><\/h3>\n
                                                                                                                                                                      \u5efa\u8bae\u9075\u5faa\u4ee5\u4e0b\u987a\u5e8f\uff1a<\/span><\/p>\n
                                                                                                                                                                        \n
                                                                                                                                                                      1. \n
                                                                                                                                                                        \u5e03\u5c40\u5b9a\u4f4d\u5c5e\u6027\uff1adisplay \/ position \/ float \/ clear \/ visibility \/ overflow\uff08\u5efa\u8bae display \u7b2c\u4e00\u4e2a\u5199\uff0c\u6bd5\u7adf\u5173\u7cfb\u5230\u6a21\u5f0f\uff09<\/span><\/p>\n<\/li>\n
                                                                                                                                                                      2. \n
                                                                                                                                                                        \u81ea\u8eab\u5c5e\u6027\uff1awidth \/ height \/ margin \/ padding \/ border \/ background<\/span><\/p>\n<\/li>\n
                                                                                                                                                                      3. \n
                                                                                                                                                                        \u6587\u672c\u5c5e\u6027\uff1acolor \/ font \/ text-decoration \/ text-align \/ vertical-align \/ white- space \/ break-word<\/span><\/p>\n<\/li>\n
                                                                                                                                                                      4. \n
                                                                                                                                                                        \u5176\u4ed6\u5c5e\u6027\uff08CSS3\uff09\uff1acontent \/ cursor \/ border-radius \/ box-shadow \/ text-shadow \/ background:linear-gradient \u2026<\/span><\/p>\n<\/li>\n<\/ol>\n
                                                                                                                                                                        .jdc {\r\n    display: block;\r\n    position: relative;\r\n    float: left;\r\n    width: 100px;\r\n    height: 100px;\r\n    margin: 0 10px;\r\n    padding: 20px 0;\r\n    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;\r\n    color: #333;\r\n    background: rgba(0,0,0,.5);\r\n    -webkit-border-radius: 10px;\r\n    -moz-border-radius: 10px;\r\n    -o-border-radius: 10px;\r\n    -ms-border-radius: 10px;\r\n    border-radius: 10px;\r\n}<\/pre>\n
                                                                                                                                                                        \u4e5d\u3001\u5b9a\u4f4d(position)<\/span><\/h2>\n
                                                                                                                                                                        1. \u5b9a\u4f4d\u8be6\u89e3<\/span><\/strong><\/span><\/p>\n
                                                                                                                                                                        \u5c06\u76d2\u5b50<\/span>\u300c\u5b9a\u300d<\/span><\/strong><\/span>\u5728\u67d0\u4e00\u4e2a<\/span>\u300c\u4f4d\u300d<\/span><\/strong><\/span>\u7f6e \u81ea\u7531\u7684\u6f02\u6d6e\u5728\u5176\u4ed6\u76d2\u5b50(\u5305\u62ec\u6807\u51c6\u6d41\u548c\u6d6e\u52a8)\u7684\u4e0a\u9762\u3002<\/span><\/p>\n
                                                                                                                                                                        \u6240\u4ee5\uff0c\u6211\u4eec\u8111\u6d77\u5e94\u8be5\u6709\u4e09\u79cd\u5e03\u5c40\u673a\u5236\u7684\u4e0a\u4e0b\u987a\u5e8f\ud83d\udc47\ud83d\udc47 \u6807\u51c6\u6d41\u5728\u6700\u5e95\u5c42 (\u6d77\u5e95) ——- \u6d6e\u52a8 \u7684\u76d2\u5b50 \u5728 \u4e2d\u95f4\u5c42 (\u6d77\u9762) ——- \u5b9a\u4f4d\u7684\u76d2\u5b50 \u5728 \u6700\u4e0a\u5c42 \uff08\u5929\u7a7a\uff09<\/span><\/p>\n
                                                                                                                                                                        \u5b9a\u4f4d<\/span><\/strong><\/span>\u662f\u7528\u6765\u5e03\u5c40\u7684\uff0c\u5b83\u6709\u4e24\u90e8\u5206\u7ec4\u6210\uff1a\u5b9a\u4f4d = \u5b9a\u4f4d\u6a21\u5f0f + \u8fb9\u504f\u79fb\u5728 CSS \u4e2d\uff0c\u901a\u8fc7 <\/span>top<\/code><\/span>\u3001<\/span>bottom<\/code><\/span>\u3001<\/span>left<\/code><\/span> \u548c <\/span>right<\/code><\/span> \u5c5e\u6027\u5b9a\u4e49\u5143\u7d20\u7684<\/span>\u8fb9\u504f\u79fb<\/span><\/strong><\/span>\uff1a\uff08\u65b9\u4f4d\u540d\u8bcd\uff09<\/span><\/p>\n
                                                                                                                                                                        \n\n\n\n\n\n\n\n\n
                                                                                                                                                                        \u8fb9\u504f\u79fb\u5c5e\u6027<\/span><\/span><\/th>\n\u793a\u4f8b<\/span><\/span><\/th>\n\u63cf\u8ff0<\/span><\/span><\/th>\n<\/tr>\n<\/thead>\n
                                                                                                                                                                        top<\/code><\/span><\/span><\/td>\ntop: 80px<\/code><\/span><\/span><\/td>\n\u300c\u9876\u7aef\u300d<\/span><\/strong><\/span>\u504f\u79fb\u91cf\uff0c\u5b9a\u4e49\u5143\u7d20\u76f8\u5bf9\u4e8e\u5176\u7236\u5143\u7d20<\/span>\u300c\u4e0a\u8fb9\u7ebf\u7684\u8ddd\u79bb\u300d<\/span><\/strong><\/span>\u3002<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                                                                        bottom<\/code><\/span><\/span><\/td>\nbottom: 80px<\/code><\/span><\/span><\/td>\n\u300c\u5e95\u90e8\u300d<\/span><\/strong><\/span>\u504f\u79fb\u91cf\uff0c\u5b9a\u4e49\u5143\u7d20\u76f8\u5bf9\u4e8e\u5176\u7236\u5143\u7d20<\/span>\u300c\u4e0b\u8fb9\u7ebf\u7684\u8ddd\u79bb\u300d<\/span><\/strong><\/span>\u3002<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                                                                        left<\/code><\/span><\/span><\/td>\nleft: 80px<\/code><\/span><\/span><\/td>\n\u300c\u5de6\u4fa7\u300d<\/span><\/strong><\/span>\u504f\u79fb\u91cf\uff0c\u5b9a\u4e49\u5143\u7d20\u76f8\u5bf9\u4e8e\u5176\u7236\u5143\u7d20<\/span>\u300c\u5de6\u8fb9\u7ebf\u7684\u8ddd\u79bb\u300d<\/span><\/strong><\/span>\u3002<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                                                                        right<\/code><\/span><\/span><\/td>\nright: 80px<\/code><\/span><\/span><\/td>\n\u300c\u53f3\u4fa7\u300d<\/span><\/strong><\/span>\u504f\u79fb\u91cf\uff0c\u5b9a\u4e49\u5143\u7d20\u76f8\u5bf9\u4e8e\u5176\u7236\u5143\u7d20<\/span>\u300c\u53f3\u8fb9\u7ebf\u7684\u8ddd\u79bb\u300d<\/span><\/strong><\/span><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
                                                                                                                                                                        2. \u5b9a\u4f4d\u6a21\u5f0f(position)<\/span><\/strong><\/span>\u5728 CSS \u4e2d\uff0c\u901a\u8fc7 <\/span>position<\/code><\/span> \u5c5e\u6027\u5b9a\u4e49\u5143\u7d20\u7684<\/span>\u5b9a\u4f4d\u6a21\u5f0f<\/span><\/strong><\/span>\uff0c\u8bed\u6cd5\u5982\u4e0b\uff1a<\/span><\/p>\n
                                                                                                                                                                        \u9009\u62e9\u5668 { position: \u5c5e\u6027\u503c; }<\/pre>\n
                                                                                                                                                                        \n\n\n\n\n\n\n\n\n
                                                                                                                                                                        \u503c<\/span><\/span><\/th>\n\u8bed\u4e49<\/span><\/span><\/th>\n<\/tr>\n<\/thead>\n
                                                                                                                                                                        static<\/code><\/span><\/span><\/td>\n\u300c\u9759\u6001\u300d<\/span><\/strong><\/span>\u5b9a\u4f4d<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                                                                        relative<\/code><\/span><\/span><\/td>\n\u300c\u76f8\u5bf9\u300d<\/span><\/strong><\/span>\u5b9a\u4f4d<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                                                                        absolute<\/code><\/span><\/span><\/td>\n\u300c\u7edd\u5bf9\u300d<\/span><\/strong><\/span>\u5b9a\u4f4d<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                                                                        fixed<\/code><\/span><\/span><\/td>\n\u300c\u56fa\u5b9a\u300d<\/span><\/strong><\/span>\u5b9a\u4f4d<\/span><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
                                                                                                                                                                        3. \u9759\u6001\u5b9a\u4f4d(static)<\/span><\/strong><\/span><\/p>\n
                                                                                                                                                                          \n
                                                                                                                                                                        • \n
                                                                                                                                                                          \u9759\u6001\u5b9a\u4f4d\u662f\u5143\u7d20\u7684\u9ed8\u8ba4\u5b9a\u4f4d\u65b9\u5f0f\uff0c\u65e0\u5b9a\u4f4d\u7684\u610f\u601d\u3002\u5b83\u76f8\u5f53\u4e8eborder\u91cc\u9762\u7684none\uff0c\u4e0d\u8981\u5b9a\u4f4d\u7684\u65f6\u5019\u7528\u3002<\/span><\/p>\n<\/li>\n
                                                                                                                                                                        • \n
                                                                                                                                                                          \u9759\u6001\u5b9a\u4f4d \u6309\u7167\u6807\u51c6\u6d41\u7279\u6027\u6446\u653e\u4f4d\u7f6e\u3002\u5b83\u6ca1\u6709\u8fb9\u504f\u79fb\u3002<\/span><\/p>\n<\/li>\n
                                                                                                                                                                        • \n
                                                                                                                                                                          \u9759\u6001\u5b9a\u4f4d\u5728\u5e03\u5c40\u65f6\u51e0\u4e4e\u4e0d\u7528<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                                                                                          4. \u76f8\u5bf9\u5b9a\u4f4d(relative)<\/span><\/strong><\/span><\/p>\n
                                                                                                                                                                            \n
                                                                                                                                                                          • \n
                                                                                                                                                                            \u76f8\u5bf9\u5b9a\u4f4d\u662f\u5143\u7d20\u76f8\u5bf9\u4e8e\u5b83\u539f\u6765\u5728\u6807\u51c6\u6d41\u4e2d\u7684\u4f4d\u7f6e\u6765\u8bf4\u7684\u3002<\/span><\/p>\n<\/li>\n
                                                                                                                                                                          • \n
                                                                                                                                                                            \u76f8\u5bf9\u4e8e\u81ea\u5df1\u539f\u6765\u5728\u6807\u51c6\u6d41\u4e2d\u4f4d\u7f6e\u6765\u79fb\u52a8\u7684<\/span><\/p>\n<\/li>\n
                                                                                                                                                                          • \n
                                                                                                                                                                            \u539f\u6765\u5728\u6807\u51c6\u6d41\u7684\u533a\u57df\u7ee7\u7eed\u5360\u6709\uff0c\u540e\u9762\u7684\u76d2\u5b50\u4ecd\u7136\u4ee5\u6807\u51c6\u6d41\u7684\u65b9\u5f0f\u5bf9\u5f85\u5b83\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                                                                                            5. \u7edd\u5bf9\u5b9a\u4f4d(absolute)<\/span><\/strong><\/span><\/p>\n
                                                                                                                                                                            \u7edd\u5bf9\u5b9a\u4f4d\u662f\u5143\u7d20\u4ee5\u5e26\u6709\u5b9a\u4f4d\u7684\u7236\u7ea7\u5143\u7d20\u6765\u79fb\u52a8\u4f4d\u7f6e<\/span><\/p>\n
                                                                                                                                                                              \n
                                                                                                                                                                            • \n
                                                                                                                                                                              \u5b8c\u5168\u8131\u8868–\u5b8c\u5168\u4e0d\u5360\u4f4d\u7f6e\uff1b<\/span><\/p>\n<\/li>\n
                                                                                                                                                                            • \n
                                                                                                                                                                              \u7236\u5143\u7d20\u6ca1\u6709\u5b9a\u4f4d\uff0c\u5219\u4ee5\u6d4f\u89c8\u5668\u4e3a\u51c6\u5b9a\u4f4d(Document\u6587\u6863)\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                                                                                              \u7236\u5143\u7d20\u6709\u5b9a\u4f4d<\/span><\/h4>\n
                                                                                                                                                                              \u5b9a\u4f4d\u53e3\u8bc0–\u5b50\u7edd\u7236\u76f8<\/span><\/h5>\n
                                                                                                                                                                              6. \u56fa\u5b9a\u5b9a\u4f4d(fixed)<\/span><\/strong><\/span><\/p>\n
                                                                                                                                                                              \u56fa\u5b9a\u5b9a\u4f4d\u662f\u7edd\u5bf9\u5b9a\u4f4d\u7684\u4e00\u79cd\u7279\u6b8a\u5f62\u5f0f;<\/span><\/p>\n
                                                                                                                                                                                \n
                                                                                                                                                                              • \n
                                                                                                                                                                                \u5b8c\u5168\u8131\u6807–\u5b8c\u5168\u4e0d\u5360\u4f4d\u7f6e\uff1b<\/span><\/p>\n<\/li>\n
                                                                                                                                                                              • \n
                                                                                                                                                                                \u53ea\u8ba4<\/span>\u6d4f\u89c8\u5668\u7684\u53ef\u89c6\u7a97\u53e3<\/span><\/strong><\/span>–\u6d4f\u89c8\u5668\u53ef\u89c6\u7a97\u53e3+\u8fb9\u504f\u79fb\u5c5e\u6027\u6765\u8bbe\u7f6e\u5143\u7d20\u7684\u4f4d\u7f6e<\/span><\/p>\n
                                                                                                                                                                                  \n
                                                                                                                                                                                • \n
                                                                                                                                                                                  \u8ddf\u7236\u5143\u7d20\u6ca1\u6709\u4efb\u4f55\u5173\u7cfb\uff1b\u5355\u72ec\u4f7f\u7528<\/span><\/p>\n<\/li>\n
                                                                                                                                                                                • \n
                                                                                                                                                                                  \u4e0d\u968f\u6eda\u52a8\u6761\u6eda\u52a8<\/span><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                                                                                                  \u5b9a\u4f4d(position)\u7684\u6269\u5c55<\/span><\/h3>\n
                                                                                                                                                                                  \u7edd\u5bf9\u5b9a\u4f4d\u7684\u76d2\u5b50\u5c45\u4e2d<\/span><\/h4>\n
                                                                                                                                                                                  \u7edd\u5bf9\u5b9a\u4f4d\/\u56fa\u5b9a\u5b9a\u4f4d\u7684\u76d2\u5b50\u4e0d\u80fd\u901a\u8fc7\u8bbe\u7f6emargin: auto\u8bbe\u7f6e\u6c34\u5e73\u5c45\u4e2d \u5728\u4f7f\u7528\u7edd\u5bf9\u5b9a\u4f4d\u65f6\u8981\u5411\u5b9e\u73b0\u6c34\u5e73\u5c45\u4e2d\uff0c\u53ef\u4ee5\u6309\u7167\u4e0b\u9762\u7684\u65b9\u6cd5\uff1a<\/span><\/p>\n
                                                                                                                                                                                    \n
                                                                                                                                                                                  1. \n
                                                                                                                                                                                    left : 50%:\u8ba9\u76d2\u5b50\u7684\u5de6\u4fa7\u79fb\u52a8\u5230\u7236\u7ea7\u5143\u7d20\u7684\u6c34\u5e73\u4e2d\u5fc3\u4f4d\u7f6e\uff1b<\/span><\/p>\n<\/li>\n
                                                                                                                                                                                  2. \n
                                                                                                                                                                                    margin-left: -100px;\u8ba9\u76d2\u5b50\u5411\u5de6\u79fb\u52a8\u81ea\u8eab\u5bbd\u5ea6\u7684\u4e00\u534a\u3002<\/span><\/p>\n<\/li>\n
                                                                                                                                                                                  3. \n
                                                                                                                                                                                    \u540c\u7406\u5782\u76f4\u5c45\u4e2d\u3002<\/span><\/p>\n<\/li>\n<\/ol>\n
                                                                                                                                                                                    \u5806\u53e0\u987a\u5e8f\uff08z-index\uff09<\/span><\/h4>\n
                                                                                                                                                                                    \u5728\u4f7f\u7528<\/span>\u300c\u5b9a\u4f4d\u300d<\/span><\/strong><\/span>\u5e03\u5c40\u65f6\uff0c\u53ef\u80fd\u4f1a<\/span>\u300c\u51fa\u73b0\u76d2\u5b50\u91cd\u53e0\u7684\u60c5\u51b5\u300d<\/span><\/strong><\/span>\u3002<\/span><\/p>\n
                                                                                                                                                                                    \u52a0\u4e86\u5b9a\u4f4d\u7684\u76d2\u5b50\uff0c\u9ed8\u8ba4<\/span>\u300c\u540e\u6765\u8005\u5c45\u4e0a\u300d<\/span><\/strong><\/span>\uff0c \u540e\u9762\u7684\u76d2\u5b50\u4f1a\u538b\u4f4f\u524d\u9762\u7684\u76d2\u5b50\u3002<\/span><\/p>\n
                                                                                                                                                                                    \u5e94\u7528 <\/span>z-index<\/code><\/span> \u5c42\u53e0\u7b49\u7ea7\u5c5e\u6027\u53ef\u4ee5<\/span>\u300c\u8c03\u6574\u76d2\u5b50\u7684\u5806\u53e0\u987a\u5e8f\u300d<\/span><\/strong><\/span>\u3002<\/span><\/p>\n
                                                                                                                                                                                    z-index\u7684\u7279\u6027\u5982\u4e0b:<\/span><\/p>\n
                                                                                                                                                                                      \n
                                                                                                                                                                                    1. \n
                                                                                                                                                                                      \u5c5e\u6027\u503c<\/span><\/strong><\/span>\uff1a\u6b63\u6574\u6570\u3001\u8d1f\u6574\u6570\u6216 0\uff0c\u9ed8\u8ba4\u503c\u662f 0\uff0c\u6570\u503c\u8d8a\u5927\uff0c\u76d2\u5b50\u8d8a\u9760\u4e0a\uff1b<\/span><\/p>\n<\/li>\n
                                                                                                                                                                                    2. \n
                                                                                                                                                                                      \u5982\u679c\u5c5e\u6027\u503c\u76f8\u540c\uff0c\u5219\u6309\u7167\u4e66\u5199\u987a\u5e8f\uff0c\u540e\u6765\u5c45\u4e0a\uff1b<\/span><\/p>\n<\/li>\n
                                                                                                                                                                                    3. \n
                                                                                                                                                                                      \u6570\u5b57\u540e\u9762\u4e0d\u80fd\u52a0\u5355\u4f4d<\/span><\/p>\n<\/li>\n
                                                                                                                                                                                    4. \n
                                                                                                                                                                                      z-index\u53ea\u80fd\u7528\u4e8e\u76f8\u5bf9\u5b9a\u4f4d\u3001\u7edd\u5bf9\u5b9a\u4f4d\u548c\u56fa\u5b9a\u5b9a\u4f4d\u7684\u5143\u7d20\uff0c\u5176\u4ed6\u6807\u51c6\u6d41\u3001\u6d6e\u52a8\u548c\u9759\u6001\u5b9a\u4f4d\u65e0\u6548\u3002<\/span><\/p>\n<\/li>\n<\/ol>\n
                                                                                                                                                                                      \u5b9a\u4f4d\u6539\u53d8display\u5c5e\u6027<\/span><\/h4>\n
                                                                                                                                                                                      \u524d\u9762\u63d0\u8fc7\uff0c display \u662f \u663e\u793a\u6a21\u5f0f\uff0c \u53ef\u4ee5\u901a\u8fc7\u4ee5\u4e0b\u65b9\u5f0f\u6539\u53d8\u663e\u793a\u6a21\u5f0f:<\/span><\/p>\n
                                                                                                                                                                                        \n
                                                                                                                                                                                      • \n
                                                                                                                                                                                        \u53ef\u4ee5\u7528inline-block \u8f6c\u6362\u4e3a\u884c\u5185\u5757<\/span><\/p>\n<\/li>\n
                                                                                                                                                                                      • \n
                                                                                                                                                                                        \u53ef\u4ee5\u7528\u6d6e\u52a8 float \u9ed8\u8ba4\u8f6c\u6362\u4e3a\u884c\u5185\u5757\uff08\u7c7b\u4f3c\uff0c\u5e76\u4e0d\u5b8c\u5168\u4e00\u6837\uff0c\u56e0\u4e3a\u6d6e\u52a8\u662f\u8131\u6807\u7684\uff09<\/span><\/p>\n<\/li>\n
                                                                                                                                                                                      • \n
                                                                                                                                                                                        \u7edd\u5bf9\u5b9a\u4f4d\u548c\u56fa\u5b9a\u5b9a\u4f4d\u4e5f\u548c\u6d6e\u52a8\u7c7b\u4f3c\uff0c \u9ed8\u8ba4\u8f6c\u6362\u7684\u7279\u6027 \u8f6c\u6362\u4e3a\u884c\u5185\u5757\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                                                                                                        \u6240\u4ee5\u8bf4\uff0c \u4e00\u4e2a\u884c\u5185\u7684\u76d2\u5b50\uff0c\u5982\u679c\u52a0\u4e86<\/span>\u300c\u6d6e\u52a8\u300d<\/span><\/strong><\/span>\u3001<\/span>\u300c\u56fa\u5b9a\u5b9a\u4f4d\u300d<\/span><\/strong><\/span>\u548c<\/span>\u300c\u7edd\u5bf9\u5b9a\u4f4d\u300d<\/span><\/strong><\/span>\uff0c\u4e0d\u7528\u8f6c\u6362\uff0c\u5c31\u53ef\u4ee5\u7ed9\u8fd9\u4e2a\u76d2\u5b50\u76f4\u63a5\u8bbe\u7f6e\u5bbd\u5ea6\u548c\u9ad8\u5ea6\u7b49\u3002<\/span><\/p>\n
                                                                                                                                                                                        \u5b9a\u4f4d\u5c0f\u7ed3<\/span><\/h4>\n
                                                                                                                                                                                        \n\n\n\n\n\n\n\n\n
                                                                                                                                                                                        \u5b9a\u4f4d\u6a21\u5f0f<\/span><\/span><\/th>\n\u662f\u5426\u8131\u6807\u5360\u6709\u4f4d\u7f6e<\/span><\/span><\/th>\n\u79fb\u52a8\u4f4d\u7f6e\u57fa\u51c6<\/span><\/span><\/th>\n\u6a21\u5f0f\u8f6c\u6362\uff08\u884c\u5185\u5757\uff09<\/span><\/span><\/th>\n\u4f7f\u7528\u60c5\u51b5<\/span><\/span><\/th>\n<\/tr>\n<\/thead>\n
                                                                                                                                                                                        \u9759\u6001static<\/span><\/span><\/td>\n\u4e0d\u8131\u6807\uff0c\u6b63\u5e38\u6a21\u5f0f<\/span><\/span><\/td>\n\u6b63\u5e38\u6a21\u5f0f<\/span><\/span><\/td>\n\u4e0d\u80fd<\/span><\/span><\/td>\n\u51e0\u4e4e\u4e0d\u7528<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                                                                                        \u76f8\u5bf9\u5b9a\u4f4drelative<\/span><\/span><\/td>\n\u4e0d\u8131\u6807\uff0c\u5360\u6709\u4f4d\u7f6e<\/span><\/span><\/td>\n\u76f8\u5bf9\u81ea\u8eab\u4f4d\u7f6e\u79fb\u52a8<\/span><\/span><\/td>\n\u4e0d\u80fd<\/span><\/span><\/td>\n\u57fa\u672c\u5355\u72ec\u4f7f\u7528<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                                                                                        \u7edd\u5bf9\u5b9a\u4f4dabsolute<\/span><\/span><\/td>\n\u5b8c\u5168\u8131\u6807\uff0c\u4e0d\u5360\u6709\u4f4d\u7f6e<\/span><\/span><\/td>\n\u76f8\u5bf9\u4e8e\u5b9a\u4f4d\u7236\u7ea7\u79fb\u52a8\u4f4d\u7f6e<\/span><\/span><\/td>\n\u80fd<\/span><\/span><\/td>\n\u8981\u548c\u5b9a\u4f4d\u7236\u7ea7\u5143\u7d20\u642d\u914d\u4f7f\u7528<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                                                                                        \u56fa\u5b9a\u5b9a\u4f4dfixed<\/span><\/span><\/td>\n\u5b8c\u5168\u8131\u6807\uff0c\u4e0d\u5360\u6709\u4f4d\u7f6e<\/span><\/span><\/td>\n\u76f8\u5bf9\u4e8e\u6d4f\u89c8\u5668\u79fb\u52a8\u4f4d\u7f6e<\/span><\/span><\/td>\n\u80fd<\/span><\/span><\/td>\n\u5355\u72ec\u4f7f\u7528\uff0c\u4e0d\u9700\u8981\u7236\u7ea7<\/span><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
                                                                                                                                                                                        \u6ce8\u610f\uff1a<\/span><\/strong><\/span><\/p>\n
                                                                                                                                                                                          \n
                                                                                                                                                                                        1. \n
                                                                                                                                                                                          \u8fb9\u504f\u79fb<\/code><\/span> \u9700\u8981\u548c <\/span>\u5b9a\u4f4d\u6a21\u5f0f<\/code><\/span> \u8054\u5408\u4f7f\u7528\uff0c<\/span>\u5355\u72ec\u4f7f\u7528\u65e0\u6548<\/code><\/span>\uff1b<\/span><\/p>\n<\/li>\n
                                                                                                                                                                                        2. \n
                                                                                                                                                                                          top<\/code><\/span> \u548c <\/span>bottom<\/code><\/span> \u4e0d\u8981\u540c\u65f6\u4f7f\u7528\uff1b<\/span><\/p>\n<\/li>\n
                                                                                                                                                                                        3. \n
                                                                                                                                                                                          left<\/code><\/span> \u548c <\/span>right<\/code><\/span> \u4e0d\u8981\u540c\u65f6\u4f7f\u7528\u3002<\/span><\/p>\n<\/li>\n<\/ol>\n
                                                                                                                                                                                          \u5341\u3001CSS\u9ad8\u7ea7\u6280\u5de7<\/span><\/h2>\n
                                                                                                                                                                                          \u5143\u7d20\u7684\u663e\u793a\u4e0e\u9690\u85cf<\/span><\/h3>\n
                                                                                                                                                                                            \n
                                                                                                                                                                                          • \n
                                                                                                                                                                                            \u76ee\u7684:<\/span><\/strong><\/span>\u8ba9\u4e00\u4e2a\u5143\u7d20\u5728\u9875\u9762\u4e2d\u6d88\u5931\u6216\u8005\u663e\u793a\u51fa\u6765<\/span><\/p>\n<\/li>\n
                                                                                                                                                                                          • \n
                                                                                                                                                                                            \u573a\u666f:<\/span><\/strong><\/span>\u7c7b\u4f3c\u7f51\u7ad9\u5e7f\u544a\uff0c\u5f53\u6211\u4eec\u70b9\u51fb\u5173\u95ed\u5c31\u4e0d\u89c1\u4e86\uff0c\u4f46\u662f\u6211\u4eec\u91cd\u65b0\u5237\u65b0\u9875\u9762\uff0c\u4f1a\u91cd\u65b0\u51fa\u73b0\uff01<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                                                                                                            1.1 display \u663e\u793a\uff08\u91cd\u70b9\uff09<\/span><\/h4>\n
                                                                                                                                                                                            display\u8bbe\u7f6e\u6216\u68c0\u7d22\u5bf9\u8c61\u662f\u5426\u663e\u793a\u6216\u5982\u4f55\u663e\u793a\u3002<\/span><\/p>\n
                                                                                                                                                                                              \n
                                                                                                                                                                                            • \n
                                                                                                                                                                                              display: none \u9690\u85cf\u5bf9\u8c61<\/span><\/p>\n
                                                                                                                                                                                                \n
                                                                                                                                                                                              • \n
                                                                                                                                                                                                \u7279\u70b9\uff1a\u9690\u85cf\u4e4b\u540e\uff0c\u4e0d\u518d\u4fdd\u7559\u4f4d\u7f6e\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n<\/li>\n
                                                                                                                                                                                              • \n
                                                                                                                                                                                                display: block \u9664\u4e86\u8f6c\u6362\u4e3a\u5757\u7ea7\u5143\u7d20\u4e4b\u5916\uff0c\u540c\u65f6\u8fd8\u6709\u663e\u793a\u5143\u7d20\u7684\u610f\u601d\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                                                                                                                \u5b9e\u9645\u5f00\u53d1\u573a\u666f\uff1a\u914d\u5408\u540e\u9762js\u505a\u7279\u6548\uff0c\u6bd4\u5982\u4e0b\u62c9\u83dc\u5355\uff0c\u539f\u5148\u6ca1\u6709\uff0c\u9f20\u6807\u7ecf\u8fc7\uff0c\u663e\u793a\u4e0b\u62c9\u83dc\u5355\uff0c \u5e94\u7528\u6781\u4e3a\u5e7f\u6cdb<\/span><\/p>\n
                                                                                                                                                                                                1.2 visibility \u53ef\u89c1\u6027<\/span><\/h4>\n
                                                                                                                                                                                                \u8bbe\u7f6e\u6216\u68c0\u7d22\u662f\u5426\u663e\u793a\u5bf9\u8c61<\/span><\/p>\n
                                                                                                                                                                                                visibility\uff1avisible ;  \u5bf9\u8c61\u53ef\u89c6\r\n\r\nvisibility\uff1ahidden;    \u5bf9\u8c61\u9690\u85cf<\/pre>\n
                                                                                                                                                                                                  \n
                                                                                                                                                                                                • \n
                                                                                                                                                                                                  \u7279\u70b9\uff1a\u9690\u85cf\u4e4b\u540e\uff0c\u7ee7\u7eed\u4fdd\u7559\u539f\u6709\u4f4d\u7f6e\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                                                                                                                  1.3 overflow \u6ea2\u51fa<\/span><\/h4>\n
                                                                                                                                                                                                  \u68c0\u7d22\u6216\u8bbe\u7f6e\u5f53\u5bf9\u8c61\u7684\u5185\u5bb9\u8d85\u8fc7\u5176\u6307\u5b9a\u9ad8\u5ea6\u53ca\u5bbd\u5ea6\u65f6\u5982\u4f55\u7ba1\u7406\u5185\u5bb9\u3002<\/span><\/p>\n
                                                                                                                                                                                                  \n\n\n\n\n\n\n\n\n
                                                                                                                                                                                                  \u5c5e\u6027\u503c<\/span><\/span><\/th>\n\u63cf\u8ff0<\/span><\/span><\/th>\n<\/tr>\n<\/thead>\n
                                                                                                                                                                                                  visible<\/span><\/span><\/td>\n\u4e0d\u526a\u5207\u5185\u5bb9\u4e5f\u4e0d\u6dfb\u52a0\u6eda\u52a8\u6761<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                                                                                                  hidden<\/span><\/span><\/td>\n\u4e0d\u663e\u793a\u8d85\u8fc7\u5bf9\u8c61\u5c3a\u5bf8\u7684\u5185\u5bb9\uff0c\u8d85\u51fa\u7684\u90e8\u5206\u9690\u85cf\u6389<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                                                                                                  scroll<\/span><\/span><\/td>\n\u4e0d\u7ba1\u8d85\u51fa\u5185\u5bb9\u5426\uff0c\u603b\u662f\u663e\u793a\u6eda\u52a8\u6761<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                                                                                                  auto<\/span><\/span><\/td>\n\u8d85\u51fa\u81ea\u52a8\u663e\u793a\u6eda\u52a8\u6761\uff0c\u4e0d\u8d85\u51fa\u4e0d\u663e\u793a\u6eda\u52a8\u6761<\/span><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
                                                                                                                                                                                                  \u5b9e\u9645\u5f00\u53d1\u573a\u666f<\/code><\/span>\uff1a<\/span><\/p>\n
                                                                                                                                                                                                    \n
                                                                                                                                                                                                  1. \n
                                                                                                                                                                                                    \u6e05\u9664\u6d6e\u52a8<\/span><\/p>\n<\/li>\n
                                                                                                                                                                                                  2. \n
                                                                                                                                                                                                    \u9690\u85cf\u8d85\u51fa\u5185\u5bb9\uff0c\u9690\u85cf\u6389, \u4e0d\u5141\u8bb8\u5185\u5bb9\u8d85\u8fc7\u7236\u76d2\u5b50\u3002<\/span><\/p>\n<\/li>\n<\/ol>\n
                                                                                                                                                                                                    1.4 \u663e\u793a\u4e0e\u9690\u85cf\u603b\u7ed3<\/span><\/h4>\n
                                                                                                                                                                                                    \n\n\n\n\n\n\n\n
                                                                                                                                                                                                    \u5c5e\u6027<\/span><\/span><\/th>\n\u533a\u522b<\/span><\/span><\/th>\n\u7528\u9014<\/span><\/span><\/th>\n<\/tr>\n<\/thead>\n
                                                                                                                                                                                                    display<\/span><\/span><\/td>\n\u9690\u85cf\u5bf9\u8c61\uff0c\u4e0d\u4fdd\u7559\u4f4d\u7f6e<\/span><\/span><\/td>\n\u914d\u5408\u540e\u9762js\u505a\u7279\u6548\uff0c\u6bd4\u5982\u4e0b\u62c9\u83dc\u5355\uff0c\u539f\u5148\u6ca1\u6709\uff0c\u9f20\u6807\u7ecf\u8fc7\uff0c\u663e\u793a\u4e0b\u62c9\u83dc\u5355\uff0c \u5e94\u7528\u6781\u4e3a\u5e7f\u6cdb<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                                                                                                    visibility<\/span><\/span><\/td>\n\u9690\u85cf\u5bf9\u8c61\uff0c\u4fdd\u7559\u4f4d\u7f6e<\/span><\/span><\/td>\n\u4f7f\u7528\u8f83\u5c11<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                                                                                                    overflow<\/span><\/span><\/td>\n\u53ea\u662f\u9690\u85cf\u8d85\u51fa\u5927\u5c0f\u7684\u90e8\u5206<\/span><\/span><\/td>\n1. \u53ef\u4ee5\u6e05\u9664\u6d6e\u52a8 2. \u4fdd\u8bc1\u76d2\u5b50\u91cc\u9762\u7684\u5185\u5bb9\u4e0d\u4f1a\u8d85\u51fa\u8be5\u76d2\u5b50\u8303\u56f4<\/span><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
                                                                                                                                                                                                    CSS\u7528\u6237\u754c\u9762\u6837\u5f0f<\/span><\/h3>\n
                                                                                                                                                                                                    \u6240\u8c13\u7684\u754c\u9762\u6837\u5f0f\uff0c \u5c31\u662f\u66f4\u6539\u4e00\u4e9b\u7528\u6237\u64cd\u4f5c\u6837\u5f0f\uff0c\u4ee5\u4fbf\u63d0\u9ad8\u66f4\u597d\u7684\u7528\u6237\u4f53\u9a8c\u3002<\/span><\/p>\n
                                                                                                                                                                                                      \n
                                                                                                                                                                                                    • \n
                                                                                                                                                                                                      \u66f4\u6539\u7528\u6237\u7684\u9f20\u6807\u6837\u5f0f<\/span><\/p>\n<\/li>\n
                                                                                                                                                                                                    • \n
                                                                                                                                                                                                      \u8868\u5355\u8f6e\u5ed3\u7b49\u3002<\/span><\/p>\n<\/li>\n
                                                                                                                                                                                                    • \n
                                                                                                                                                                                                      \u9632\u6b62\u8868\u5355\u57df\u62d6\u62fd<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                                                                                                                      2.1 \u9f20\u6807\u6837\u5f0f<\/span><\/h4>\n
                                                                                                                                                                                                      \u8bbe\u7f6e\u6216\u68c0\u7d22\u5728\u5bf9\u8c61\u4e0a\u79fb\u52a8\u7684\u9f20\u6807\u6307\u9488\u91c7\u7528\u4f55\u79cd\u7cfb\u7edf\u9884\u5b9a\u4e49\u7684\u5149\u6807\u5f62\u72b6\u3002<\/span><\/p>\n
                                                                                                                                                                                                      \n\n\n\n\n\n\n\n\n\n
                                                                                                                                                                                                      \u5c5e\u6027\u503c<\/span><\/span><\/th>\n\u63cf\u8ff0<\/span><\/span><\/th>\n<\/tr>\n<\/thead>\n
                                                                                                                                                                                                      default<\/span><\/span><\/td>\n\u5c0f\u767d \u9ed8\u8ba4<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                                                                                                      pointer<\/span><\/span><\/td>\n\u5c0f\u624b<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                                                                                                      move<\/span><\/span><\/td>\n\u79fb\u52a8<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                                                                                                      text<\/span><\/span><\/td>\n\u6587\u672c<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                                                                                                      not-allowed<\/span><\/span><\/td>\n\u7981\u6b62<\/span><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
                                                                                                                                                                                                      <ul>\r\n  <li style=\"cursor:default\">\u6211\u662f\u5c0f\u767d<\/li>\r\n  <li style=\"cursor:pointer\">\u6211\u662f\u5c0f\u624b<\/li>\r\n  <li style=\"cursor:move\">\u6211\u662f\u79fb\u52a8<\/li>\r\n  <li style=\"cursor:text\">\u6211\u662f\u6587\u672c<\/li>\r\n  <li style=\"cursor:not-allowed\">\u6211\u662f\u6587\u672c<\/li>\r\n<\/ul><\/pre>\n
                                                                                                                                                                                                      2.2 \u8f6e\u5ed3\u7ebf outline<\/span><\/h4>\n
                                                                                                                                                                                                      \u662f\u7ed8\u5236\u4e8e\u5143\u7d20\u5468\u56f4\u7684\u4e00\u6761\u7ebf\uff0c\u4f4d\u4e8e\u8fb9\u6846\u8fb9\u7f18\u7684\u5916\u56f4\uff0c\u53ef\u8d77\u5230\u7a81\u51fa\u5143\u7d20\u7684\u4f5c\u7528\u3002<\/span><\/p>\n
                                                                                                                                                                                                      outline : outline-color ||outline-style || outline-width<\/pre>\n
                                                                                                                                                                                                      \u4f46\u662f\u6211\u4eec\u90fd\u4e0d\u5173\u5fc3\u53ef\u4ee5\u8bbe\u7f6e\u591a\u5c11\uff0c\u6211\u4eec\u5e73\u65f6\u90fd\u662f\u53bb\u6389\u7684\u3002 \u6700\u76f4\u63a5\u7684\u5199\u6cd5\u662f \uff1a outline: 0; \u6216\u8005 outline: none;<\/span><\/p>\n
                                                                                                                                                                                                      2.3 \u9632\u6b62\u62d6\u62fd\u6587\u672c\u57dfresize<\/span><\/h4>\n
                                                                                                                                                                                                      2.3 \u9632\u6b62\u62d6\u62fd\u6587\u672c\u57dfresize<\/span><\/h4>\n
                                                                                                                                                                                                      <textarea  style=\"resize: none;\"><\/textarea><\/pre>\n
                                                                                                                                                                                                      2.4 \u7528\u6237\u754c\u9762\u6837\u5f0f\u603b\u7ed3<\/span><\/h4>\n
                                                                                                                                                                                                      \n\n\n\n\n\n\n\n
                                                                                                                                                                                                      \u5c5e\u6027<\/span><\/span><\/th>\n\u7528\u9014<\/span><\/span><\/th>\n\u7528\u9014<\/span><\/span><\/th>\n<\/tr>\n<\/thead>\n
                                                                                                                                                                                                      \u9f20\u6807\u6837\u5f0f<\/span><\/span><\/td>\n\u66f4\u6539\u9f20\u6807\u6837\u5f0fcursor<\/span><\/span><\/td>\n\u6837\u5f0f\u5f88\u591a\uff0c\u91cd\u70b9\u8bb0\u4f4f pointer<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                                                                                                      \u8f6e\u5ed3\u7ebf<\/span><\/span><\/td>\n\u8868\u5355\u9ed8\u8ba4outline<\/span><\/span><\/td>\noutline \u8f6e\u5ed3\u7ebf\uff0c\u6211\u4eec\u4e00\u822c\u76f4\u63a5\u53bb\u6389\uff0cborder\u662f\u8fb9\u6846\uff0c\u6211\u4eec\u4f1a\u7ecf\u5e38\u7528<\/span><\/span><\/td>\n<\/tr>\n
                                                                                                                                                                                                      \u9632\u6b62\u62d6\u62fd<\/span><\/span><\/td>\n\u4e3b\u8981\u9488\u5bf9\u6587\u672c\u57dfresize<\/span><\/span><\/td>\n\u9632\u6b62\u7528\u6237\u968f\u610f\u62d6\u62fd\u6587\u672c\u57df\uff0c\u9020\u6210\u9875\u9762\u5e03\u5c40\u6df7\u4e71\uff0c\u6211\u4eecresize:none<\/span><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
                                                                                                                                                                                                      vertical-align \u5782\u76f4\u5bf9\u9f50<\/span><\/h3>\n
                                                                                                                                                                                                        \n
                                                                                                                                                                                                      • \n
                                                                                                                                                                                                        \u6709\u5bbd\u5ea6\u7684\u5757\u7ea7\u5143\u7d20\u5c45\u4e2d\u5bf9\u9f50\uff0c\u662fmargin: 0 auto;<\/span><\/p>\n<\/li>\n
                                                                                                                                                                                                      • \n
                                                                                                                                                                                                        \u8ba9\u6587\u5b57\u5c45\u4e2d\u5bf9\u9f50\uff0c\u662f text-align: center;<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                                                                                                                        vertical-align \u5782\u76f4\u5bf9\u9f50\uff0c\u5b83\u53ea\u9488\u5bf9\u4e8e<\/span>\u884c\u5185\u5143\u7d20<\/span><\/strong><\/span>\u6216\u8005<\/span>\u884c\u5185\u5757\u5143\u7d20<\/span><\/strong><\/span><\/p>\n
                                                                                                                                                                                                        \u8bbe\u7f6e\u6216\u68c0\u7d22\u5bf9\u8c61\u5185\u5bb9\u7684\u5782\u76f4\u5bf9\u5176\u65b9\u5f0f\u3002\r\nvertical-align : baseline |top |middle |bottom<\/pre>\n
                                                                                                                                                                                                        \u6ce8\u610f\uff1a<\/span><\/p>\n
                                                                                                                                                                                                        vertical-align \u4e0d\u5f71\u54cd\u5757\u7ea7\u5143\u7d20\u4e2d\u7684\u5185\u5bb9\u5bf9\u9f50\uff0c\u5b83\u53ea\u9488\u5bf9\u4e8e<\/span>\u300c\u884c\u5185\u5143\u7d20\u300d<\/span><\/strong><\/span>\u6216\u8005<\/span>\u300c\u884c\u5185\u5757\u5143\u7d20\u300d<\/span><\/strong><\/span>\uff0c<\/span><\/p>\n
                                                                                                                                                                                                        \u7279\u522b\u662f\u884c\u5185\u5757\u5143\u7d20\uff0c \u901a\u5e38\u7528\u6765\u63a7\u5236\u56fe\u7247\/\u8868\u5355\u4e0e\u6587\u5b57\u7684\u5bf9\u9f50\u3002<\/span><\/p>\n
                                                                                                                                                                                                        3.1 \u56fe\u7247\u3001\u8868\u5355\u548c\u6587\u5b57\u5bf9\u9f50<\/span><\/h4>\n
                                                                                                                                                                                                        \u6211\u4eec\u53ef\u4ee5\u901a\u8fc7<\/span>vertical-align<\/code><\/span> \u63a7\u5236\u56fe\u7247\u548c\u6587\u5b57\u7684\u5782\u76f4\u5173\u7cfb\u4e86\u3002\u9ed8\u8ba4\u7684\u56fe\u7247\u4f1a\u548c\u6587\u5b57\u57fa\u7ebf\u5bf9\u9f50\u3002<\/span><\/p>\n
                                                                                                                                                                                                        3.2 \u53bb\u9664\u56fe\u7247\u5e95\u4fa7\u7a7a\u767d\u7f1d\u9699<\/span><\/h4>\n
                                                                                                                                                                                                        \u539f\u56e0\uff1a<\/span><\/strong><\/span>\u56fe\u7247\u6216\u8005\u8868\u5355\u7b49\u884c\u5185\u5757\u5143\u7d20\uff0c\u4ed6\u7684\u5e95\u7ebf\u4f1a\u548c\u7236\u7ea7\u76d2\u5b50\u7684\u57fa\u7ebf\u5bf9\u9f50\u3002<\/span><\/p>\n
                                                                                                                                                                                                        \u5c31\u662f\u56fe\u7247\u5e95\u4fa7\u4f1a\u6709\u4e00\u4e2a\u7a7a\u767d\u7f1d\u9699\u3002<\/span><\/p>\n
                                                                                                                                                                                                        \u89e3\u51b3\u65b9\u6cd5\uff1a<\/span><\/strong><\/span><\/p>\n
                                                                                                                                                                                                          \n
                                                                                                                                                                                                        • \n
                                                                                                                                                                                                          \u7ed9img vertical-align:middle | top| bottom\u7b49\u7b49\u3002 \u8ba9\u56fe\u7247\u4e0d\u8981\u548c\u57fa\u7ebf\u5bf9\u9f50\u3002<\/span><\/p>\n<\/li>\n
                                                                                                                                                                                                        • \n
                                                                                                                                                                                                          \u7ed9img \u6dfb\u52a0 display\uff1ablock; \u8f6c\u6362\u4e3a\u5757\u7ea7\u5143\u7d20\u5c31\u4e0d\u4f1a\u5b58\u5728\u95ee\u9898\u4e86\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                                                                                                                          \u6ea2\u51fa\u7684\u6587\u5b57\u7701\u7565\u53f7\u663e\u793a<\/span><\/h3>\n
                                                                                                                                                                                                          4.1 white-space<\/span><\/h4>\n
                                                                                                                                                                                                            \n
                                                                                                                                                                                                          • \n
                                                                                                                                                                                                            white-space\u8bbe\u7f6e\u6216\u68c0\u7d22\u5bf9\u8c61\u5185\u6587\u672c\u663e\u793a\u65b9\u5f0f\u3002\u901a\u5e38\u6211\u4eec\u4f7f\u7528\u4e8e\u5f3a\u5236\u4e00\u884c\u663e\u793a\u5185\u5bb9<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                                                                                                                            white-space:normal \uff1b\u9ed8\u8ba4\u5904\u7406\u65b9\u5f0f\r\n\r\nwhite-space:nowrap \uff1b \u5f3a\u5236\u5728\u540c\u4e00\u884c\u5185\u663e\u793a\u6240\u6709\u6587\u672c\uff0c\u76f4\u5230\u6587\u672c\u7ed3\u675f\u6216\u8005\u906d\u9047br\u6807\u7b7e\u5bf9\u8c61\u624d\u6362\u884c\u3002<\/pre>\n
                                                                                                                                                                                                            4.2 text-overflow \u6587\u5b57\u6ea2\u51fa<\/span><\/h4>\n
                                                                                                                                                                                                              \n
                                                                                                                                                                                                            • \n
                                                                                                                                                                                                              \u8bbe\u7f6e\u6216\u68c0\u7d22\u662f\u5426\u4f7f\u7528\u4e00\u4e2a\u7701\u7565\u6807\u8bb0\uff08…\uff09\u6807\u793a\u5bf9\u8c61\u5185\u6587\u672c\u7684\u6ea2\u51fa<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                                                                                                                              text-overflow : clip \uff1b\u4e0d\u663e\u793a\u7701\u7565\u6807\u8bb0\uff08...\uff09\uff0c\u800c\u662f\u7b80\u5355\u7684\u88c1\u5207 \r\n\r\ntext-overflow\uff1aellipsis \uff1b \u5f53\u5bf9\u8c61\u5185\u6587\u672c\u6ea2\u51fa\u65f6\u663e\u793a\u7701\u7565\u6807\u8bb0\uff08...\uff09<\/pre>\n
                                                                                                                                                                                                              \u300c\u6ce8\u610f\u300d<\/span><\/strong><\/span>\uff1a<\/span><\/p>\n
                                                                                                                                                                                                              \u4e00\u5b9a\u8981\u9996\u5148\u5f3a\u5236\u4e00\u884c\u5185\u663e\u793a\uff0c\u518d\u6b21\u548coverflow\u5c5e\u6027 \u642d\u914d\u4f7f\u7528<\/span><\/p>\n
                                                                                                                                                                                                              4.3 \u603b\u7ed3\u4e09\u6b65\u66f2<\/span><\/h4>\n
                                                                                                                                                                                                                \/*1. \u5148\u5f3a\u5236\u4e00\u884c\u5185\u663e\u793a\u6587\u672c*\/\r\n      white-space: nowrap;\r\n  \/*2. \u8d85\u51fa\u7684\u90e8\u5206\u9690\u85cf*\/\r\n      overflow: hidden;\r\n  \/*3. \u6587\u5b57\u7528\u7701\u7565\u53f7\u66ff\u4ee3\u8d85\u51fa\u7684\u90e8\u5206*\/\r\n      text-overflow: ellipsis;<\/pre>\n
                                                                                                                                                                                                              CSS\u7cbe\u7075\u6280\u672f\uff08sprite)<\/span><\/h3>\n
                                                                                                                                                                                                              CSS\u7cbe\u7075\u6280\u672f\uff08\u4e5f\u79f0CSS Sprites\u3001CSS\u96ea\u78a7\uff09\u3002<\/span><\/p>\n
                                                                                                                                                                                                                \n
                                                                                                                                                                                                              • \n
                                                                                                                                                                                                                \u56fe\u6240\u793a\u4e3a\u7f51\u9875\u7684\u8bf7\u6c42\u539f\u7406\u56fe\uff0c\u5f53\u7528\u6237\u8bbf\u95ee\u4e00\u4e2a\u7f51\u7ad9\u65f6\uff0c\u9700\u8981\u5411\u670d\u52a1\u5668\u53d1\u9001\u8bf7\u6c42\uff0c\u7f51\u9875\u4e0a\u7684\u6bcf\u5f20\u56fe\u50cf\u90fd\u8981\u7ecf\u8fc7\u4e00\u6b21\u8bf7\u6c42\u624d\u80fd\u5c55\u73b0\u7ed9\u7528\u6237\u3002<\/span><\/p>\n<\/li>\n
                                                                                                                                                                                                              • \n
                                                                                                                                                                                                                \u7136\u800c\uff0c\u4e00\u4e2a\u7f51\u9875\u4e2d\u5f80\u5f80\u4f1a\u5e94\u7528\u5f88\u591a\u5c0f\u7684\u80cc\u666f\u56fe\u50cf\u4f5c\u4e3a\u4fee\u9970\uff0c\u5f53\u7f51\u9875\u4e2d\u7684\u56fe\u50cf\u8fc7\u591a\u65f6\uff0c\u670d\u52a1\u5668\u5c31\u4f1a\u9891\u7e41\u5730\u63a5\u53d7\u548c\u53d1\u9001\u8bf7\u6c42\uff0c\u8fd9\u5c06\u5927\u5927\u964d\u4f4e\u9875\u9762\u7684\u52a0\u8f7d\u901f\u5ea6\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                                                                                                                                \u4e3a\u4ec0\u4e48\u9700\u8981\u7cbe\u7075\u6280\u672f<\/span><\/strong><\/span>\uff1a\u4e3a\u4e86\u6709\u6548\u5730\u51cf\u5c11\u670d\u52a1\u5668\u63a5\u53d7\u548c\u53d1\u9001\u8bf7\u6c42\u7684\u6b21\u6570\uff0c\u63d0\u9ad8\u9875\u9762\u7684\u52a0\u8f7d\u901f\u5ea6\u3002<\/span><\/p>\n
                                                                                                                                                                                                                5.1 \u7cbe\u7075\u6280\u672f\u8bb2\u89e3<\/span><\/h4>\n
                                                                                                                                                                                                                CSS \u7cbe\u7075\u5176\u5b9e\u662f\u5c06\u7f51\u9875\u4e2d\u7684\u4e00\u4e9b\u80cc\u666f\u56fe\u50cf\u6574\u5408\u5230\u4e00\u5f20\u5927\u56fe\u4e2d\uff08\u7cbe\u7075\u56fe\uff09\uff0c\u7136\u800c\uff0c\u5404\u4e2a\u7f51\u9875\u5143\u7d20\u901a\u5e38\u53ea\u9700\u8981\u7cbe\u7075\u56fe\u4e2d\u4e0d\u540c\u4f4d\u7f6e\u7684\u67d0\u4e2a\u5c0f\u56fe\uff0c\u8981\u60f3\u7cbe\u786e\u5b9a\u4f4d\u5230\u7cbe\u7075\u56fe\u4e2d\u7684\u67d0\u4e2a\u5c0f\u56fe\u3002<\/span><\/p>\n
                                                                                                                                                                                                                \u8fd9\u6837\uff0c\u5f53\u7528\u6237\u8bbf\u95ee\u8be5\u9875\u9762\u65f6\uff0c\u53ea\u9700\u5411\u670d\u52a1\u53d1\u9001\u4e00\u6b21\u8bf7\u6c42\uff0c\u7f51\u9875\u4e2d\u7684\u80cc\u666f\u56fe\u50cf\u5373\u53ef\u5168\u90e8\u5c55\u793a\u51fa\u6765\u3002<\/span><\/p>\n
                                                                                                                                                                                                                \u6211\u4eec\u9700\u8981\u4f7f\u7528CSS\u7684:<\/span><\/p>\n
                                                                                                                                                                                                                  \n
                                                                                                                                                                                                                • \n
                                                                                                                                                                                                                  background-image\u3001<\/span><\/p>\n<\/li>\n
                                                                                                                                                                                                                • \n
                                                                                                                                                                                                                  background-repeat<\/span><\/p>\n<\/li>\n
                                                                                                                                                                                                                • \n
                                                                                                                                                                                                                  background-position\u5c5e\u6027\u8fdb\u884c\u80cc\u666f\u5b9a\u4f4d\uff0c<\/span><\/p>\n<\/li>\n
                                                                                                                                                                                                                • \n
                                                                                                                                                                                                                  \u5176\u4e2d\u6700\u5173\u952e\u7684\u662f\u4f7f\u7528<\/span>background-position<\/code><\/span> \u5c5e\u6027\u7cbe\u786e\u5730\u5b9a\u4f4d\u3002<\/span><\/p>\n<\/li>\n<\/ul>\n
                                                                                                                                                                                                                  5.2 \u7cbe\u7075\u6280\u672f\u4f7f\u7528\u7684\u6838\u5fc3\u603b\u7ed3<\/span><\/h4>\n
                                                                                                                                                                                                                  \u9996\u5148\u6211\u4eec\u77e5\u9053\uff0ccss\u7cbe\u7075\u6280\u672f\u4e3b\u8981\u9488\u5bf9\u4e8e\u80cc\u666f\u56fe\u7247\uff0c\u63d2\u5165\u7684\u56fe\u7247img \u662f\u4e0d\u9700\u8981\u8fd9\u4e2a\u6280\u672f\u7684\u3002<\/span><\/p>\n
                                                                                                                                                                                                                    \n
                                                                                                                                                                                                                  1. \n
                                                                                                                                                                                                                    \u7cbe\u786e\u6d4b\u91cf\uff0c\u6bcf\u4e2a\u5c0f\u80cc\u666f\u56fe\u7247\u7684\u5927\u5c0f\u548c \u4f4d\u7f6e\u3002<\/span><\/p>\n<\/li>\n
                                                                                                                                                                                                                  2. \n
                                                                                                                                                                                                                    \u7ed9\u76d2\u5b50\u6307\u5b9a\u5c0f\u80cc\u666f\u56fe\u7247\u65f6\uff0c \u80cc\u666f\u5b9a\u4f4d\u57fa\u672c\u90fd\u662f \u8d1f\u503c\u3002<\/span><\/p>\n<\/li>\n<\/ol>\n
                                                                                                                                                                                                                    6.1 \u6ed1\u52a8\u95e8\u51fa\u73b0\u7684\u80cc\u666f<\/span><\/h4>\n
                                                                                                                                                                                                                    \u5236\u4f5c\u7f51\u9875\u65f6\uff0c\u4e3a\u4e86\u7f8e\u89c2\uff0c\u5e38\u5e38\u9700\u8981\u4e3a\u7f51\u9875\u5143\u7d20\u8bbe\u7f6e\u7279\u6b8a\u5f62\u72b6\u7684\u80cc\u666f\uff0c\u6bd4\u5982\u5fae\u4fe1\u5bfc\u822a\u680f\uff0c\u6709\u51f8\u8d77\u548c\u51f9\u4e0b\u53bb\u7684\u611f\u89c9\uff0c\u6700\u5927\u7684\u95ee\u9898\u662f\u91cc\u9762\u7684\u5b57\u6570\u4e0d\u4e00\u6837\u591a\u3002<\/span><\/p>\n
                                                                                                                                                                                                                    \u4e3a\u4e86\u4f7f\u5404\u79cd\u7279\u6b8a\u5f62\u72b6\u7684\u80cc\u666f\u80fd\u591f\u81ea\u9002\u5e94\u5143\u7d20\u4e2d\u6587\u672c\u5185\u5bb9\u7684\u591a\u5c11\uff0c\u51fa\u73b0\u4e86CSS\u6ed1\u52a8\u95e8\u6280\u672f\u3002\u5b83\u4ece\u65b0\u7684\u89d2\u5ea6\u6784\u5efa\u9875\u9762\uff0c\u4f7f\u5404\u79cd\u7279\u6b8a\u5f62\u72b6\u7684\u80cc\u666f\u80fd\u591f\u81ea\u7531\u62c9\u4f38\u6ed1\u52a8\uff0c\u4ee5\u9002\u5e94\u5143\u7d20\u5185\u90e8\u7684\u6587\u672c\u5185\u5bb9\uff0c\u53ef\u7528\u6027\u66f4\u5f3a\u3002\u6700\u5e38\u89c1\u4e8e\u5404\u79cd\u5bfc\u822a\u680f\u7684\u6ed1\u52a8\u95e8\u3002<\/span><\/p>\n
                                                                                                                                                                                                                    6.2 \u6838\u5fc3\u6280\u672f<\/span><\/h4>\n
                                                                                                                                                                                                                    \u6838\u5fc3\u6280\u672f\u5c31\u662f\u5229\u7528<\/span>CSS\u7cbe\u7075<\/code><\/span>\uff08\u4e3b\u8981\u662f\u80cc\u666f\u4f4d\u7f6e\uff09\u548c <\/span>\u76d2\u5b50padding<\/code><\/span>\u6491\u5f00\u5bbd\u5ea6, \u4ee5\u4fbf\u80fd\u9002\u5e94\u4e0d\u540c\u5b57\u6570\u7684\u5bfc\u822a\u680f\u3002<\/span><\/p>\n
                                                                                                                                                                                                                    \u4e00\u822c\u7684\u7ecf\u5178\u5e03\u5c40\u90fd\u662f\u8fd9\u6837\u7684\uff1a<\/span><\/p>\n
                                                                                                                                                                                                                    <li>\r\n  <a href=\"#\">\r\n    <span>\u5bfc\u822a\u680f\u5185\u5bb9<\/span>\r\n  <\/a>\r\n<\/li>\r\n* {\r\n    padding:0;\r\n    margin:0;\r\n\r\n   }\r\n    body{\r\n      background: url(images\/wx.jpg) repeat-x;\r\n    }\r\n    .father {\r\n      padding-top:20px;\r\n    }\r\n    li {\r\n      padding-left: 16px;\r\n      height: 33px;\r\n      float: left;\r\n      line-height: 33px;\r\n      margin:0  10px;\r\n      background: url(.\/images\/to.png) no-repeat left ;\r\n    }\r\n    a {\r\n      padding-right: 16px;\r\n      height: 33px;\r\n      display: inline-block;\r\n      color:#fff;\r\n      background: url(.\/images\/to.png) no-repeat right ;\r\n      text-decoration: none;\r\n    }\r\n    li:hover,\r\n    li:hover a {\r\n      background-image:url(.\/images\/ao.png);\r\n    }<\/pre>\n
                                                                                                                                                                                                                    \u603b\u7ed3\uff1a<\/span><\/p>\n
                                                                                                                                                                                                                      \n
                                                                                                                                                                                                                    1. \n
                                                                                                                                                                                                                      a \u8bbe\u7f6e \u80cc\u666f\u5de6\u4fa7\uff0cpadding\u6491\u5f00\u5408\u9002\u5bbd\u5ea6\u3002<\/span><\/p>\n<\/li>\n
                                                                                                                                                                                                                    2. \n
                                                                                                                                                                                                                      span \u8bbe\u7f6e\u80cc\u666f\u53f3\u4fa7\uff0c padding\u6491\u5f00\u5408\u9002\u5bbd\u5ea6 \u5269\u4e0b\u7531\u6587\u5b57\u7ee7\u7eed\u6491\u5f00\u5bbd\u5ea6\u3002<\/span><\/p>\n<\/li>\n
                                                                                                                                                                                                                    3. \n
                                                                                                                                                                                                                      \u4e4b\u6240\u4ee5a\u5305\u542bspan\u5c31\u662f\u56e0\u4e3a \u6574\u4e2a\u5bfc\u822a\u90fd\u662f\u53ef\u4ee5\u70b9\u51fb\u7684\u3002<\/span><\/p>\n<\/li>\n<\/ol>\n
                                                                                                                                                                                                                      CSS \u4e09\u89d2\u5f62<\/span><\/h3>\n
                                                                                                                                                                                                                      div {\r\n\r\n    width: 0; \r\n\r\n    height: 0;\r\n    line-height:0\uff1b\r\n    font-size: 0;\r\n   border-top: 10px solid red;\r\n\r\n   border-right: 10px solid green;\r\n\r\n   border-bottom: 10px solid blue;\r\n\r\n   border-left: 10px solid #000; \r\n\r\n     }<\/pre>\n
                                                                                                                                                                                                                        \n
                                                                                                                                                                                                                      1. \n
                                                                                                                                                                                                                        \u6211\u4eec\u7528css \u8fb9\u6846\u53ef\u4ee5\u6a21\u62df\u4e09\u89d2\u6548\u679c<\/span><\/p>\n<\/li>\n
                                                                                                                                                                                                                      2. \n
                                                                                                                                                                                                                        \u5bbd\u5ea6\u9ad8\u5ea6\u4e3a0<\/span><\/p>\n<\/li>\n
                                                                                                                                                                                                                      3. \n
                                                                                                                                                                                                                        \u6211\u4eec4\u4e2a\u8fb9\u6846\u90fd\u8981\u5199\uff0c \u53ea\u4fdd\u7559\u9700\u8981\u7684\u8fb9\u6846\u989c\u8272\uff0c\u5176\u4f59\u7684\u4e0d\u80fd\u7701\u7565\uff0c\u90fd\u6539\u4e3a transparent \u900f\u660e\u5c31\u597d\u4e86<\/span><\/p>\n<\/li>\n
                                                                                                                                                                                                                      4. \n
                                                                                                                                                                                                                        \u4e3a\u4e86\u7167\u987e\u517c\u5bb9\u6027 \u4f4e\u7248\u672c\u7684\u6d4f\u89c8\u5668\uff0c\u52a0\u4e0a font-size: 0; line-height: 0;<\/span><\/p>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
                                                                                                                                                                                                                        \u524d\u8a00 \u68b3\u7406\u4e4b\u524d\u6240\u5b66\u7684CSS\u77e5\u8bc6\u70b9\uff0c\u67e5\u6f0f\u8865\u7f3a\u3002 \u4e00\u3001CSS\u6784\u9020\u5757 1. HTML\u7684\u5c40\u9650\u6027 HTML\u6ee1\u8db3\u4e0d\u4e86\u8bbe\u8ba1\u8005 […]<\/p>\n","protected":false},"author":1,"featured_media":67,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-72","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-front-end"],"yoast_head":"\nCSS\u57fa\u7840 - Rock<\/title>\n<meta name=\"description\" content=\"CSS\u76f8\u5173\u57fa\u7840\u77e5\u8bc6\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.noblerock.cn\/index.php\/2022\/11\/22\/rock-css\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS\u57fa\u7840 - Rock\" \/>\n<meta property=\"og:description\" content=\"CSS\u76f8\u5173\u57fa\u7840\u77e5\u8bc6\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.noblerock.cn\/index.php\/2022\/11\/22\/rock-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Rock\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-22T14:47:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.noblerock.cn\/wp-content\/uploads\/2022\/11\/hd.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"900\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"noblerock5\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"noblerock5\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.noblerock.cn\/index.php\/2022\/11\/22\/rock-css\/\",\"url\":\"https:\/\/www.noblerock.cn\/index.php\/2022\/11\/22\/rock-css\/\",\"name\":\"CSS\u57fa\u7840 - Rock\",\"isPartOf\":{\"@id\":\"https:\/\/www.noblerock.cn\/#website\"},\"datePublished\":\"2022-11-22T14:47:40+00:00\",\"dateModified\":\"2022-11-22T14:47:40+00:00\",\"author\":{\"@id\":\"https:\/\/www.noblerock.cn\/#\/schema\/person\/7fc70f27a8f0a866a9956dafe9738d38\"},\"description\":\"CSS\u76f8\u5173\u57fa\u7840\u77e5\u8bc6\",\"breadcrumb\":{\"@id\":\"https:\/\/www.noblerock.cn\/index.php\/2022\/11\/22\/rock-css\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.noblerock.cn\/index.php\/2022\/11\/22\/rock-css\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.noblerock.cn\/index.php\/2022\/11\/22\/rock-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.noblerock.cn\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\u57fa\u7840\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.noblerock.cn\/#website\",\"url\":\"https:\/\/www.noblerock.cn\/\",\"name\":\"Rock\",\"description\":\"blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.noblerock.cn\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.noblerock.cn\/#\/schema\/person\/7fc70f27a8f0a866a9956dafe9738d38\",\"name\":\"noblerock5\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.noblerock.cn\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3b53a9cb39b52de3a8589546a7053d9dae19f4ac93ac8d88e23b3a8de5da7de5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3b53a9cb39b52de3a8589546a7053d9dae19f4ac93ac8d88e23b3a8de5da7de5?s=96&d=mm&r=g\",\"caption\":\"noblerock5\"},\"sameAs\":[\"http:\/\/www.noblerock.cn\"],\"url\":\"https:\/\/www.noblerock.cn\/index.php\/author\/noblerock5\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS\u57fa\u7840 - Rock","description":"CSS\u76f8\u5173\u57fa\u7840\u77e5\u8bc6","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.noblerock.cn\/index.php\/2022\/11\/22\/rock-css\/","og_locale":"zh_CN","og_type":"article","og_title":"CSS\u57fa\u7840 - Rock","og_description":"CSS\u76f8\u5173\u57fa\u7840\u77e5\u8bc6","og_url":"https:\/\/www.noblerock.cn\/index.php\/2022\/11\/22\/rock-css\/","og_site_name":"Rock","article_published_time":"2022-11-22T14:47:40+00:00","og_image":[{"width":1200,"height":900,"url":"https:\/\/www.noblerock.cn\/wp-content\/uploads\/2022\/11\/hd.png","type":"image\/png"}],"author":"noblerock5","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"noblerock5","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"12 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.noblerock.cn\/index.php\/2022\/11\/22\/rock-css\/","url":"https:\/\/www.noblerock.cn\/index.php\/2022\/11\/22\/rock-css\/","name":"CSS\u57fa\u7840 - Rock","isPartOf":{"@id":"https:\/\/www.noblerock.cn\/#website"},"datePublished":"2022-11-22T14:47:40+00:00","dateModified":"2022-11-22T14:47:40+00:00","author":{"@id":"https:\/\/www.noblerock.cn\/#\/schema\/person\/7fc70f27a8f0a866a9956dafe9738d38"},"description":"CSS\u76f8\u5173\u57fa\u7840\u77e5\u8bc6","breadcrumb":{"@id":"https:\/\/www.noblerock.cn\/index.php\/2022\/11\/22\/rock-css\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.noblerock.cn\/index.php\/2022\/11\/22\/rock-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.noblerock.cn\/index.php\/2022\/11\/22\/rock-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.noblerock.cn\/"},{"@type":"ListItem","position":2,"name":"CSS\u57fa\u7840"}]},{"@type":"WebSite","@id":"https:\/\/www.noblerock.cn\/#website","url":"https:\/\/www.noblerock.cn\/","name":"Rock","description":"blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.noblerock.cn\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.noblerock.cn\/#\/schema\/person\/7fc70f27a8f0a866a9956dafe9738d38","name":"noblerock5","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.noblerock.cn\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3b53a9cb39b52de3a8589546a7053d9dae19f4ac93ac8d88e23b3a8de5da7de5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3b53a9cb39b52de3a8589546a7053d9dae19f4ac93ac8d88e23b3a8de5da7de5?s=96&d=mm&r=g","caption":"noblerock5"},"sameAs":["http:\/\/www.noblerock.cn"],"url":"https:\/\/www.noblerock.cn\/index.php\/author\/noblerock5\/"}]}},"_links":{"self":[{"href":"https:\/\/www.noblerock.cn\/index.php\/wp-json\/wp\/v2\/posts\/72","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.noblerock.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.noblerock.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.noblerock.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.noblerock.cn\/index.php\/wp-json\/wp\/v2\/comments?post=72"}],"version-history":[{"count":1,"href":"https:\/\/www.noblerock.cn\/index.php\/wp-json\/wp\/v2\/posts\/72\/revisions"}],"predecessor-version":[{"id":73,"href":"https:\/\/www.noblerock.cn\/index.php\/wp-json\/wp\/v2\/posts\/72\/revisions\/73"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.noblerock.cn\/index.php\/wp-json\/wp\/v2\/media\/67"}],"wp:attachment":[{"href":"https:\/\/www.noblerock.cn\/index.php\/wp-json\/wp\/v2\/media?parent=72"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.noblerock.cn\/index.php\/wp-json\/wp\/v2\/categories?post=72"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.noblerock.cn\/index.php\/wp-json\/wp\/v2\/tags?post=72"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}