1\u3001\u5e38\u89c1\u7684\u5757\u7ea7\u5143\u7d20 \u5185\u8054\u5143\u7d20
\ndiv -\u6700\u5e38\u7528\u7684\u5757\u7ea7\u5143\u7d20<\/p>\n
dl – \u548cdt-dd \u642d\u914d\u4f7f\u7528\u7684\u5757\u7ea7\u5143\u7d20<\/p>\n
form – \u4ea4\u4e92\u8868\u5355<\/p>\n
h1 -h6- \u5927\u6807\u9898<\/p>\n
hr – \u6c34\u5e73\u5206\u9694\u7ebf<\/p>\n
ol \u2013 \u6709\u5e8f\u5217\u8868<\/p>\n
p – \u6bb5\u843d<\/p>\n
ul – \u65e0\u5e8f\u5217\u8868<\/p>\n
fieldset – \u8868\u5355\u5b57\u6bb5\u96c6<\/p>\n
colgroup-col – \u8868\u5355\u5217\u5206\u7ec4\u5143\u7d20<\/p>\n
table-tr-td \u8868\u683c\u53ca\u884c-\u5355\u5143\u683c<\/p>\n
pre – \u683c\u5f0f\u5316\u6587\u672c<\/p>\n
a \u2013\u8d85\u94fe\u63a5\uff08\u951a\u70b9\uff09<\/p>\n
br – \u6362\u884c<\/p>\n
i – \u659c\u4f53<\/p>\n
em – \u5f3a\u8c03<\/p>\n
img – \u56fe\u7247<\/p>\n
input – \u8f93\u5165\u6846<\/p>\n
label – \u8868\u5355\u6807\u7b7e<\/p>\n
span – \u5e38\u7528\u5185\u8054\u5bb9\u5668\uff0c\u5b9a\u4e49\u6587\u672c\u5185\u533a\u5757<\/p>\n
strong – \u7c97\u4f53\u5f3a\u8c03<\/p>\n
sub – \u4e0b\u6807<\/p>\n
sup – \u4e0a\u6807<\/p>\n
textarea – \u591a\u884c\u6587\u672c\u8f93\u5165\u6846<\/p>\n
u – \u4e0b\u5212\u7ebf<\/p>\n
select – \u9879\u76ee\u9009\u62e9<\/p>\n
2\u3001\u5b9e\u73b0\u6587\u672c\u4e09\u4e2a\u70b9\u7684\u51e0\u4e2a\u6761\u4ef6
\ntext-overflow\u5c5e\u6027\u4ec5\u662f\uff1a\u5f53\u6587\u672c\u6ea2\u51fa\u65f6\u662f\u5426\u663e\u793a\u7701\u7565\u6807\u8bb0\uff0c\u5e76\u4e0d\u5177\u5907\u5176\u5b83\u7684\u6837\u5f0f\u5c5e\u6027\u5b9a\u4e49\uff0c\u8981\u5b9e\u73b0\u6ea2\u51fa\u65f6\u4ea7\u751f\u7701\u7565\u53f7\u7684\u6548\u679c\u8fd8\u9700\u5b9a\u4e49\uff1a<\/p>\n
1\u3001\u5bb9\u5668\u5bbd\u5ea6\uff1awidth\uff1avalue\uff1b\uff08px\u3001%\uff0c\u90fd\u53ef\u4ee5\uff09<\/p>\n
2\u3001\u5f3a\u5236\u6587\u672c\u5728\u4e00\u884c\u5185\u663e\u793a:white-space\uff1anowrap;<\/p>\n
3\u3001\u6ea2\u51fa\u5185\u5bb9\u4e3a\u9690\u85cf\uff1aoverflow\uff1ahidden\uff1b<\/p>\n
4\u3001\u6ea2\u51fa\u6587\u672c\u663e\u793a\u7701\u7565\u53f7\uff1atext-overflow\uff1aellipsis;<\/p>\n
\u6ce8\uff1a\u5fc5\u987b\u662f\u5355\u884c\u6587\u672c\u624d\u80fd\u8bbe\u7f6e\u672c\u6587\u6ea2\u51fa\uff01\uff01\uff01
\nIE6+\uff1bchrome1.0+\uff1bsafari3.1+\uff08firefox,opera\u6682\u4e0d\u652f\u6301\uff09
\n3\u3001\u5782\u76f4\u5c45\u4e2d\u7684\u51e0\u4e2a\u6761\u4ef6
\n\u8bbe\u7f6e\u4e00\u4e2a\u5143\u7d20\u5728\u4e00\u4e2a\u5bb9\u5668\u4e2d\u5782\u76f4\u5c45\u4e2d\uff0c\u5fc5\u987b\u66f4\u6539\u9ed8\u8ba4\u7684display\u5c5e\u6027\u503c\u4e3ainline-block;<\/p>\n
\u5e76\u52a0\u4e0a\u540c\u7ea7\u5143\u7d20\uff08\u6807\u5c3a\uff09\uff08\u540c\u7ea7\u5143\u7d20[\u6807\u5c3a]\u6837\u5f0f\u8bbe\u7f6e\u4e3avertical-align:middle;width:0;height:100%;display:inline-block;\uff09 \u3002
\n\u4e09\u4e2a\u6761\u4ef6\uff1a<\/p>\n
1\uff1a\u5fc5\u987b\u7ed9\u5bb9\u5668\uff08\u7236\u5143\u7d20\uff09\u52a0\u4e0atext-align:center;<\/p>\n
2:\u5fc5\u987b\u7ed9\u5f53\u524d\u5143\u7d20\u8f6c\u6210\u884c\u5185\u5757\u5143\u7d20\uff08display:inline-block;\uff09\u518d\u7ed9\u5f53\u524d\u5143\u7d20\u52a0\u4e0avertical-align:middle;<\/p>\n
3\uff1a\u5728\u5f53\u524d\u5143\u7d20\u7684\u540e\u9762\uff08\u6ca1\u6709\u56de\u8f66\uff09\u52a0\u4e0a\u540c\u7ea7\u5143\u7d20span;\u5e76\u5bf9span\u8fdb\u884cvertical-align:middle;width:0;height:100%;display:inline-block
\n4\u3001\u7f6e\u6362\u5143\u7d20\u4e0e\u975e\u7f6e\u6362\u5143\u7d20
\n\u7f6e\u6362\u5143\u7d20\u4e0e\u975e\u7f6e\u6362\u5143\u7d20
\na) \u7f6e\u6362\u5143\u7d20\uff1a\u6d4f\u89c8\u5668\u6839\u636e\u5143\u7d20\u7684\u6807\u7b7e\u548c\u5c5e\u6027\uff0c\u6765\u51b3\u5b9a\u5143\u7d20\u7684\u5177\u4f53\u663e\u793a\u5185\u5bb9\u3002 \u4f8b\u5982\uff1a\u6d4f\u89c8\u5668\u4f1a\u6839\u636e<img>\u6807\u7b7e\u7684src\u5c5e\u6027\u7684\u503c\u6765\u8bfb\u53d6\u56fe\u7247\u4fe1\u606f\u5e76\u663e\u793a\u51fa\u6765\uff0c\u800c\u5982\u679c\u67e5\u770b(x)html\u4ee3\u7801\uff0c\u5219\u770b\u4e0d\u5230\u56fe\u7247\u7684\u5b9e\u9645\u5185\u5bb9\uff1b<input>\u6807\u7b7e\u7684type\u5c5e\u6027\u6765\u51b3\u5b9a\u662f\u663e\u793a\u8f93\u5165\u6846\uff0c\u8fd8\u662f\u5355\u9009\u6309\u94ae\u7b49\u3002 (x)html\u4e2d\u7684<img>\u3001<input>\u3001<textarea>\u3001<select>\u90fd\u662f\u7f6e\u6362\u5143\u7d20\u3002\u8fd9\u4e9b\u5143\u7d20\u5f80\u5f80\u6ca1\u6709\u5b9e\u9645\u7684\u5185\u5bb9\uff0c\u5373\u662f\u4e00\u4e2a\u7a7a\u5143\u7d20\u3002
\n\u7f6e\u6362\u5143\u7d20\u5728\u5176\u663e\u793a\u4e2d\u751f\u6210\u4e86\u6846\uff0c\u8fd9\u4e5f\u5c31\u662f\u6709\u7684\u5185\u8054\u5143\u7d20\uff08img,input\uff09\u80fd\u591f\u8bbe\u7f6e\u5bbd\u9ad8\u7684\u539f\u56e0\u3002
\nb) \u4e0d\u53ef\u66ff\u6362\u5143\u7d20\uff08\u975e\u7f6e\u6362\u5143\u7d20\uff09\uff1a(x)html \u7684\u5927\u591a\u6570\u5143\u7d20\u662f\u4e0d\u53ef\u66ff\u6362\u5143\u7d20\uff0c\u5373\u5176\u5185\u5bb9\u76f4\u63a5\u8868\u73b0\u7ed9\u7528\u6237\u7aef\uff08\u5982\u6d4f\u89c8\u5668\uff09\u3002
\n5\u3001\u4ec0\u4e48\u662f\u7cbe\u7075\u56fe\uff1f\u4f18\u52bf\u662f\u4ec0\u4e48\uff1f
\n\u56fe\u7247\u6574\u5408\uff0c\u5c06\u5c0f\u7684\u5355\u5f20\u80cc\u666f\u56fe\u6574\u5408\u5230\u4e00\u5f20\u5927\u7684\u80cc\u666f\u56fe\u4e0a\u3002
\n\u56fe\u7247\u6574\u5408\u7684\u4f18\u52bf\uff1a 1\uff09\u901a\u8fc7\u56fe\u7247\u6574\u5408\u6765\u51cf\u5c11\u5bf9\u670d\u52a1\u5668\u7684\u8bf7\u6c42\u6b21\u6570\uff0c\u4ece\u800c\u63d0\u9ad8 \u9875\u9762\u7684\u52a0\u8f7d\u901f\u5ea6\u3002 2\uff09\u901a\u8fc7\u6574\u5408\u56fe\u7247\u6765\u51cf\u5c0f\u56fe\u7247\u7684\u4f53\u79ef\u3002
\n6\u3001\u4ec0\u4e48\u662fcss\u5c42\u53e0\u6837\u5f0f\u8868\uff1f\u4f18\u5148\u7ea7\u7b97\u6cd5\u5982\u4f55\u8ba1\u7b97\uff1f
\na.\u91cd\u8981\u6027\u548c\u6765\u6e90\u7684\u4f18\u5148\u7ea7\u6392\u5e8f\u4ece\u4f4e\u5230\u9ad8\u662f\uff1a<\/p>\n
1\uff09\u6d4f\u89c8\u5668\u9ed8\u8ba4\u6837\u5f0f<\/p>\n
2\uff09class\/id…..\u9009\u62e9\u5668\u7684\u6743\u91cd<\/p>\n
3\uff09\u884c\u95f4\u6837\u5f0f<\/p>\n
4\uff09\u5185\u8054\u6216\u8005\u5916\u8054 \uff08\u4e66\u5199\u987a\u5e8f\uff09<\/p>\n
5\uff09!important \u6700\u9ad8\u7684<\/p>\n
7\u3001display:none\u4e0evisibility:hidden\u7684\u533a\u522b
\n\u524d\u8005\uff1a\u9690\u85cf\u4e0d\u5360\u4f4d \u540e\u8005\uff1a\u9690\u85cf\u4f46\u662f\u5360\u4f4d\u7f6e
\n8\u3001\u6e05\u9664\u6d6e\u52a8\u7684\u51e0\u79cd\u65b9\u5f0f
\nhack1\uff1a\u7ed9\u7236\u5143\u7d20\u6dfb\u52a0\u58f0\u660eoverflow:hidden;
\nhack2: \u7ed9\u7236\u5143\u7d20\u52a0height
\nhack3: \u5728\u6d6e\u52a8\u5143\u7d20\u4e0b\u65b9\u6dfb\u52a0\u7a7adiv,\u5e76\u7ed9\u8be5\u5143\u7d20\u6dfb\u52a0 \u58f0\u660e\uff1adiv{clear:both; height:0; overflow:hidden;}
\nhack4:\u4e07\u80fd\u6e05\u9664\u6d6e\u52a8\u6cd5 p:after{content:\u201c.\u201d;clear:both;display:block;height:0;overflow:hidden; visibility:hidden;}
\n9\u3001\u54ea\u4e9b\u5c5e\u6027\u53ef\u4ee5\u7ee7\u627f\uff1f
\n1\uff09\u6587\u5b57\u76f8\u5173\uff1afont-family\u3001font-size\u3001font-style\u3001font-variant\u3001font-weight\u3001font\u3001letter-spacing\u3001line-height\u3001text-align\u3001text-indent\u3001text-transform\u3001word-spacing<\/p>\n
2\uff09\u5217\u8868\u76f8\u5173\uff1alist-style-image\u3001list-style-position\u3001list-style-type\u3001list-style<\/p>\n
3\uff09\u989c\u8272\u76f8\u5173\uff1acolor<\/p>\n
4\uff09\u900f\u660e\u5ea6\uff08\u5b50\u5143\u7d20\u4f1a\u7ee7\u627f\u7956\u5143\u7d20\u7684opacity\uff0c\u4f46\u662f\u65e0\u6cd5\u66f4\u6539\uff09<\/p>\n
\u6ce8\uff1afont-size\u7ee7\u627f\u7684\u662f\u7236\u5143\u7d20\u7684\u5927\u5c0f\uff0c\u800c\u4e0d\u662f\u6bd4\u4f8b\u3002line-height\u5f53\u7236\u5143\u7d20\u662f\u767e\u5206\u6bd4\u6216px\u503c\u5f97\u65f6\u5019\uff0c\u5b50\u5143\u7d20\u8ddf\u7236\u5143\u7d20\u76f8\u540c\uff0c\u5f53\u7236\u5143\u7d20\u662fnormal\u6216\u6570\u5b57\u7684\u65f6\u5019\uff0c\u5b50\u5143\u7d20\u7684line-height\u662f\u5b50\u5143\u7d20\u7684\u5b57\u4f53\u5927\u5c0f\u4e58\u4ee5\u6570\u5b57\u3002
\n10\u3001\u5b9a\u4f4d\u7684\u65b9\u5f0f
\nposition\u5c5e\u6027\u503c\uff1astatic\uff0crelative\uff0cabsolute\uff0cfixed<\/p>\n
1\uff09static<\/p>\n
static\u662f\u9ed8\u8ba4\u503c\uff0c\u5143\u7d20\u4f4d\u4e8e\u6587\u6863\u6d41\u4e2d\uff0c\u6b63\u5e38\u663e\u793a\uff0c\u5ffd\u7565\u5143\u7d20\u7684top\uff0cbottom\uff0cleft\uff0cright\u5c5e\u6027\u3002z-index\u5c5e\u6027\u59cb\u7ec8\u4e3a0.<\/p>\n
2\uff09relative<\/p>\n
\u76f8\u5bf9\u5b9a\u4f4d\uff0c\u4fdd\u7559\u5143\u7d20\u5728\u6587\u6863\u6d41\u4e2d\u5360\u7528\u7684\u4f4d\u7f6e\u548c\u5c3a\u5bf8\uff0c\u7531left\/right\/top\/bottom\u51e0\u4e2a\u5c5e\u6027\u786e\u5b9a\u76f8\u5bf9\u79fb\u52a8\u7684\u8ddd\u79bb\uff0c\u539f\u6765\u7684\u4f4d\u7f6e\u4fdd\u7559<\/p>\n
3\uff09absolute<\/p>\n
\u7edd\u5bf9\u5b9a\u4f4d\uff0c\u5c06\u5bf9\u8c61\u4ece\u6587\u6863\u6d41\u4e2d\u8131\u79bb\u51fa\u6765\uff0c\u4f7f\u7528left\/right\/top\/bottom\u7b49\u5c5e\u6027\u76f8\u5bf9\u5176\u6700\u63a5\u8fd1\u7684\u4e00\u4e2a\u5e76\u6709\u5b9a\u4f4d\u8bbe\u7f6e\u7684\u7236\u5143\u7d20\u8fdb\u884c\u7edd\u5bf9\u5b9a\u4f4d\uff1b\u5982\u679c\u6ca1\u6709\uff0c\u5219\u4f9d\u636ebody\u5bf9\u8c61<\/p>\n
4\uff09fixed<\/p>\n
fixed\u548cabsolute\u5dee\u4e0d\u591a\uff0c\u4f46\u662f\u4ed6\u76f8\u5bf9\u7684\u662f\u7a97\u53e3\u7684\u5de6\u4e0a\u89d2\uff0c\u4e0d\u4f1a\u8ddf\u968f\u6587\u6863\u6eda\u52a8\u3002\u4f46\u662f\u5982\u679c\u5728\u591aframe\u9875\u9762\u91cc\u9762\uff0c\u4ed6\u76f8\u5bf9\u7684\u662f\u6240\u5728frame\u7684\u5de6\u4e0a\u89d2\uff0c\u800c\u4e0d\u662f\u6d4f\u89c8\u5668\u5de6\u4e0a\u89d2\u3002
\n11\u3001link\u548c@import\u533a\u522b\uff1f
\n1\u3001\u8001\u7956\u5b97\u7684\u5dee\u522b\u3002link\u5c5e\u4e8eXHTML\u6807\u7b7e\uff0c\u800c@import\u5b8c\u5168\u662fCSS\u63d0\u4f9b\u7684\u4e00\u79cd\u65b9\u5f0f\u3002
\n2\u3001link\u6807\u7b7e\u9664\u4e86\u53ef\u4ee5\u52a0\u8f7dCSS\u5916\uff0c\u8fd8\u53ef\u4ee5\u505a\u5f88\u591a\u5176\u5b83\u7684\u4e8b\u60c5\uff0c\u6bd4\u5982\u5b9a\u4e49RSS\uff0c\u5b9a\u4e49rel\u8fde\u63a5\u5c5e\u6027\u7b49\uff0c@import\u5c31\u53ea\u80fd\u52a0\u8f7dCSS\u4e86
\n3\u3001\u52a0\u8f7d\u987a\u5e8f\u7684\u5dee\u522b\u3002\u5f53\u4e00\u4e2a\u9875\u9762\u88ab\u52a0\u8f7d\u7684\u65f6\u5019\uff08\u5c31\u662f\u88ab\u6d4f\u89c8\u8005\u6d4f\u89c8\u7684\u65f6\u5019\uff09\uff0clink\u5f15\u7528\u7684CSS\u4f1a\u540c\u65f6\u88ab\u52a0\u8f7d\uff0c\u800c@import\u5f15\u7528\u7684CSS \u4f1a\u7b49\u5230\u9875\u9762\u5168\u90e8\u88ab\u4e0b\u8f7d\u5b8c\u518d\u88ab\u52a0\u8f7d\u3002\u6240\u4ee5\u6709\u65f6\u5019\u6d4f\u89c8@import\u52a0\u8f7dCSS\u7684\u9875\u9762\u65f6\u5f00\u59cb\u4f1a\u6ca1\u6709\u6837\u5f0f\uff08\u5c31\u662f\u95ea\u70c1\uff09
\n4\u3001\u517c\u5bb9\u6027\u7684\u5dee\u522b\u3002\u7531\u4e8e@import\u662fCSS2.1\u63d0\u51fa\u7684\u6240\u4ee5\u8001\u7684\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\uff0c@import\u53ea\u6709\u5728IE5\u4ee5\u4e0a\u7684\u624d\u80fd\u8bc6\u522b\uff0c\u800clink\u6807\u7b7e\u65e0\u6b64\u95ee\u9898
\n5\u3001\u4f7f\u7528dom\u63a7\u5236\u6837\u5f0f\u65f6\u7684\u5dee\u522b\u3002\u5f53\u4f7f\u7528javascript\u63a7\u5236dom\u53bb\u6539\u53d8\u6837\u5f0f\u7684\u65f6\u5019\uff0c\u53ea\u80fd\u4f7f\u7528link\u6807\u7b7e\uff0c\u56e0\u4e3a@import\u4e0d\u662fdom\u53ef\u4ee5\u63a7\u5236\u7684<\/p>\n
12\u3001\u5b9a\u4f4d\u7684\u5c5e\u6027\u503c\u90fd\u6709\u54ea\u4e9b\uff1f\u6bcf\u4e2a\u503c\u5f97\u610f\u601d\uff1f
\n\u5404\u5c5e\u6027\u503c\u7684\u4f5c\u7528\uff1a
\nstatic\uff1a\u9ed8\u8ba4\u503c\u3002\u4f4d\u7f6e\u8bbe\u7f6e\u4e3a static \u7684\u5143\u7d20\u4f1a\u6b63\u5e38\u663e\u793a\uff0c\u5b83\u59cb\u7ec8\u4f1a\u5904\u4e8e\u6587\u6863\u6d41\u7ed9\u4e88\u7684\u4f4d\u7f6e\uff08static \u5143\u7d20\u4f1a\u5ffd\u7565\u4efb\u4f55 top\u3001bottom\u3001left \u6216 right \u58f0\u660e\uff09\u3002
\nabsolute\uff1a\u76f8\u5bf9\u4e8e\u7236\u7ea7\u5143\u7d20\u7684\u7edd\u5bf9\u5b9a\u4f4d\uff0cs\u6d6e\u51fa\u3001\u8131\u79bb\u5e03\u5c40\u6d41\uff0c\u5b83\u4e0d\u5360\u636e\u7a7a\u95f4\uff0c\u5c31\u662f\u6211\u4eec\u6240\u8bf4\u7684\u5c42\uff0c\u5176\u4f4d\u7f6e\u76f8\u5bf9\u4e8e\u6700\u8fd1\u7684\u5df2\u5b9a\u4f4d\u7236\u5143\u7d20\u800c\u8a00\u7684\u4f4d\u7f6e\uff0c\u53ef\u76f4\u63a5\u6307\u5b9a \u201cleft\u201d\u3001\u201ctop\u201d\u3001\u201cright\u201d \u4ee5\u53ca \u201cbottom\u201d \u5c5e\u6027\u3002\u82e5\u7236\u7ea7\u90fd\u6ca1\u6709\u5b9a\u4f4d\uff0c\u5219\u4ee5html\uff08\u6839\u5143\u7d20\uff09\u3002(\u5c42\u53e0\u7684\u987a\u5e8fz-index:value)
\nrelative\uff1a\u662f\u76f8\u5bf9\u4e8e\u9ed8\u8ba4\u4f4d\u7f6e\u7684\u504f\u79fb\u5b9a\u4f4d\uff0c\u901a\u8fc7\u8bbe\u7f6eleft\u3001top\u3001right\u3001bottom\u503c\u53ef\u5c06\u5176\u79fb\u81f3\u76f8\u5bf9\u4e8e\u5176\u6b63\u5e38\u4f4d\u7f6e\u7684\u5730\u65b9\uff08\u76f8\u5bf9\u4e8e\u81ea\u5df1\u7684\u5f00\u59cb\u7684\u4f4d\u7f6e\u53d1\u751f\u7684\u4f4d\u7f6e\u4e0a\u7684\u79fb\u52a8\uff0c\u3010\u4e0d\u4f1a\u7834\u574f\u6b63\u5e38\u7684\u5e03\u5c40\u6d41\u3011
\nfixed\uff1a\u76f8\u5bf9\u6d4f\u89c8\u5668\u7684\u7edd\u5bf9\u5b9a\u4f4d\uff0c\u662f\u76f8\u5bf9\u4e8e\u6d4f\u89c8\u5668\u7a97\u53e3\u7684\u6307\u5b9a\u5750\u6807\u8fdb\u884c\u5b9a\u4f4d\u3002\u6b64\u5143\u7d20\u7684\u4f4d\u7f6e\u53ef\u901a\u8fc7 “left”\u3001”top”\u3001”right” \u4ee5\u53ca”bottom” \u5c5e\u6027\u6765\u89c4\u5b9a\u3002\u4e0d\u8bba\u7a97\u53e3\u6eda\u52a8\u4e0e\u5426\uff0c\u5143\u7d20\u90fd\u4f1a\u7559\u5728\u90a3\u4e2a\u4f4d\u7f6e\u3002
\n13\u3001\u5199\u51fahtml5\u65b0\u589e\u7684\u6807\u7b7e15\u4e2a
\nheader nav footer main aside article section figure datalist video audio fieldest legend label caption
\n14\u3001\u4e00\u3001BFC\u662f\u4ec0\u4e48\uff1f\u4f5c\u7528\uff1f\u600e\u4e48\u4ea7\u751f\uff1f
\n1\u3001\u5757\u7ea7\u683c\u5f0f\u5316\u4e0a\u4e0b\u6587<\/p>\n
2\u3001\u81ea\u9002\u5e94\u4e24\u680f\u5e03\u5c40\u3001\u6e05\u9664\u5185\u90e8\u6d6e\u52a8\u3001\u9632\u6b62\u5782\u76f4margin\u91cd\u53e0\uff08\u653e\u5728\u4e24\u4e2aBFC\u91cc\uff09<\/p>\n
3\u3001\u6839\u5143\u7d20\u3001 float\u5c5e\u6027\u4e0d\u4e3anone\u3001 position\u4e3aabsolute\u6216fixed\u3001 display\u4e3ainline-block\uff0ctable-cell\uff0ctable-caption\uff0cflex\uff0cinline-flex\u3001 overflow\u4e0d\u4e3avisible<\/p>\n
15\u3001.px\uff0cem\uff0crem\uff0cpt\u7684\u533a\u522b
\n1\uff09px\u5b9e\u9645\u4e0a\u5c31\u662f\u50cf\u7d20\uff0c\u7528px\u8bbe\u7f6e\u5b57\u4f53\u5927\u5c0f\u65f6\uff0c\u6bd4\u8f83\u7a33\u5b9a\u548c\u7cbe\u786e<\/p>\n
\u4f46\u662f\u8fd9\u79cd\u65b9\u6cd5\u5b58\u5728\u4e00\u4e2a\u95ee\u9898\uff0c\u5f53\u7528\u6237\u5728\u6d4f\u89c8\u5668\u4e2d\u6d4f\u89c8\u6211\u4eec\u5236\u4f5c\u7684web\u9875\u9762\u65f6\uff0c\u5982\u679c\u5bf9\u6d4f\u89c8\u5668\u8fdb\u884c\u4e86\u7f29\u653e\uff0c\u8fd9\u65f6\u4f1a\u4f7f\u6211\u4eec\u7684web\u9875\u9762\u5e03\u5c40\u88ab\u6253\u7834\u3002\u56e0\u6b64\uff0c\u8fd9\u65f6\u5c31\u63d0\u51fa\u4e86\u4f7f\u7528\u201cem\u201d\u6765\u5b9a\u4e49web\u9875\u9762\u7684\u5b57\u4f53\u3002<\/p>\n
2\uff09em\u5c31\u662f\u6839\u636e\u57fa\u51c6\u6765\u7f29\u653e\u5b57\u4f53\u7684\u5927\u5c0f<\/p>\n
em\u662f\u76f8\u5bf9\u4e8e\u5176\u7236\u5143\u7d20\u6765\u8bbe\u7f6e\u5b57\u4f53\u5927\u5c0f\u7684\uff0c\u8fd9\u6837\u5c31\u4f1a\u5b58\u5728\u4e00\u4e2a\u95ee\u9898\uff0c\u8fdb\u884c\u4efb\u4f55\u5143\u7d20\u8bbe\u7f6e\uff0c\u90fd\u6709\u53ef\u80fd\u9700\u8981\u77e5\u9053\u4ed6\u7236\u5143\u7d20\u7684\u5927\u5c0f<\/p>\n
3\uff09rem\u662f\u76f8\u5bf9\u4e8e\u6839\u5143\u7d20\u5b57\u4f53\u5927\u5c0f\u6765\u663e\u793a\u7684<\/p>\n
rem\u662f\u76f8\u5bf9\u4e8e\u6839\u5143\u7d20<html>\uff0c\u8fd9\u6837\u5c31\u610f\u5473\u7740\uff0c\u6211\u4eec\u53ea\u9700\u8981\u5728\u6839\u5143\u7d20\u786e\u5b9a\u4e00\u4e2a\u53c2\u8003\u503c<\/p>\n
4\uff09pt\u7684\u5927\u5c0f\u7b49\u4e8e1\u82f1\u5bf8\u76841\/72<\/p>\n
\u78c5\uff1a\u4ed6\u662f\u4f5c\u4e3a\u6587\u5b57\u7684\u4e00\u79cd\u8ba1\u91cf\u5355\u4f4d<\/p>\n
\u8fd9\u79cd\u5ea6\u91cf\u65b9\u5f0f\u6765\u6e90\u4e8e\u6253\u5370-\u8bbe\u8ba1\u80cc\u666f\uff0c\u6700\u9002\u5408\u4e8e\u5a92\u4f53\uff0c\u4f46\u540c\u6837\u5e7f\u6cdb\u5e94\u7528\u4e8e\u663e\u793a\u5668
\n16\u3001\u5b9e\u73b0\u5782\u76f4+\u6c34\u5e73\u5c45\u4e2d\u6709\u54ea\u4e9b\u65b9\u6cd5\uff1f
\n1\u3001div{width:200px;height:200px;background:#f00;position:fixed;left:0;right:0;top:0;bottom:0;margin:auto;}
\n2\u3001div{width:200px;height:200px;background:#f00;position:fixed;left:50%;top:50%;margin:-100px 0 0 -100px;}
\n17\u3001\u6e10\u8fdb\u589e\u5f3a\u548c\u4f18\u96c5\u964d\u7ea7
\n\u6e10\u8fdb\u589e\u5f3a progressive enhancement\uff1a\u9488\u5bf9\u4f4e\u7248\u672c\u6d4f\u89c8\u5668\u8fdb\u884c\u6784\u5efa\u9875\u9762\uff0c\u4fdd\u8bc1\u6700\u57fa\u672c\u7684\u529f\u80fd\uff0c\u7136\u540e\u518d\u9488\u5bf9\u9ad8\u7ea7\u6d4f\u89c8\u5668\u8fdb\u884c\u6548\u679c\u3001\u4ea4\u4e92\u7b49\u6539\u8fdb\u548c\u8ffd\u52a0\u529f\u80fd\u8fbe\u5230\u66f4\u597d\u7684\u7528\u6237\u4f53\u9a8c\u3002
\n\u4f18\u96c5\u964d\u7ea7 graceful degradation\uff1a\u4e00\u5f00\u59cb\u5c31\u6784\u5efa\u5b8c\u6574\u7684\u529f\u80fd\uff0c\u7136\u540e\u518d\u9488\u5bf9\u4f4e\u7248\u672c\u6d4f\u89c8\u5668\u8fdb\u884c\u517c\u5bb9<\/p>\n
18\u3001css\u9009\u62e9\u7b26\u6709\u54ea\u4e9b\uff1f
\n1\uff09\u901a\u914d\u9009\u62e9\u7b26 *<\/p>\n
2\uff09\u7c7b\u578b\u9009\u62e9\u7b26 \/\u5143\u7d20\u9009\u62e9\u7b26 a<\/p>\n
3\uff09\u5c5e\u6027\u9009\u62e9\u7b26 input[type=”button”]4\uff09\u5305\u542b\u9009\u62e9\u7b26 div .code a<\/p>\n
5\uff09\u5b50\u5bf9\u8c61\u9009\u62e9\u7b26 ul.test>li<\/p>\n
6\uff09ID\u9009\u62e9\u7b26 #<\/p>\n
7\uff09\u7c7b\u9009\u62e9\u7b26 .<\/p>\n
8\uff09\u7fa4\u7ec4\u9009\u62e9\u7b26 body,ul,li<\/p>\n
9\uff09\u4f2a\u7c7b\u53ca\u4f2a\u5bf9\u8c61\u9009\u62e9\u7b26 div:first-letter a:hover<\/p>\n
10\uff09\u76f8\u90bb\u9009\u62e9\u7b26 li+li
\n19\u3001animation\u548ctransition\u7684\u533a\u522b<\/p>\n
\u76f8\u540c\u70b9\uff1a\u90fd\u662f\u968f\u7740\u65f6\u95f4\u6539\u53d8\u5143\u7d20\u7684\u5c5e\u6027\u503c\u3002
\n\u4e0d\u540c\u70b9\uff1a transition\u9700\u8981\u89e6\u53d1\u4e00\u4e2a\u4e8b\u4ef6(hover\u4e8b\u4ef6\u6216click\u4e8b\u4ef6\u7b49)\u624d\u4f1a\u968f\u65f6\u95f4\u6539\u53d8\u5176
\ncss\u5c5e\u6027\uff1b \u800canimation\u5728\u4e0d\u9700\u8981\u89e6\u53d1\u4efb\u4f55\u4e8b\u4ef6\u7684\u60c5\u51b5\u4e0b\u4e5f\u53ef\u4ee5\u663e\u5f0f\u7684\u968f\u7740\u65f6\u95f4\u53d8\u5316\u6765\u6539\u53d8\u5143\u7d20css\u7684\u5c5e\u6027\u503c\uff0c\u4ece\u800c\u8fbe\u5230\u4e00\u79cd\u52a8\u753b\u7684\u6548\u679c\uff0ccss3\u7684animation\u5c31\u9700\u8981\u660e\u786e\u7684\u52a8\u753b\u5c5e\u6027\u503c\u3002
\n20\u3001\u4ec0\u4e48\u662f\u6807\u51c6\u76d2\u6a21\u578b\u548c\u602a\u5f02\u76d2\u6a21\u578b\u3002\u4e24\u8005\u7684\u533a\u522b\uff0c\u5982\u4f55\u5b9e\u73b0\u602a\u5f02\u76d2\u6a21\u578b\uff0c\u548c\u6807\u51c6\u548c\u6a21\u578b
\n\u6807\u51c6\u76d2\u6a21\u578b\uff1acontent+border+padding <\/p>\n
\u602a\u5f02\u76d2\u6a21\u578b\uff1acontent
\n\u4e00\u4e2a\u7b97\u76d2\u5b50\u7684\u5bbd\u5ea6\u7684\u65f6\u5019\u52a0\u4e0aborder\u548cpadding\u53e6\u4e00\u4e2a\u4e0d\u52a0
\n\u602a\u5f02\u76d2\u6a21\u578b\u5b9e\u73b0\uff1abox-sizing:border-box<\/p>\n
\u6807\u51c6\u76d2\u6a21\u578b\uff1abox-sizing:content-box<\/p>\n
21\u3001\u5982\u4f55\u8ba9\u4e00\u4e2a\u5143\u7d20\u5728\u7236\u5143\u7d20\u5185\u4e0a\u4e0b\u5de6\u53f3\u5c45\u4e2d
\n1.<\/p>\n
css\uff1a<\/p>\n
.box{display:flex;width:800px;height:300px;justify-content:center}<\/p>\n
.box div{align-self:center}
\nhtml:<\/p>\n
<div class=”box”><\/p>\n
<div><\/div><\/p>\n
<\/div>
\n2.<\/p>\n
css:<\/p>\n
.box{display:flex;width:800px;height:800px;justify-content:center;align-items:center;}<\/p>\n
html:<\/p>\n
<div class=”box”><\/p>\n
<div><\/div><\/p>\n
<\/div>
\n22\u3001video\u4e0eaudio\u5e38\u7528\u7684\u683c\u5f0f\u6709\u54ea\u4e9b<\/p>\n
\u7528\u4e8e\u89c6\u9891\uff1avideo\/ogg video\/mp4 video\/webm \u7528\u4e8e\u97f3\u9891\uff1aaudio\/ogg audio\/mpeg
\n23\u3001\u7b80\u5355\u7684\u89e3\u91ca\u4e0b\u5f39\u6027\u76d2\u6a21\u578b\u7684\u5c5e\u6027\u548c\u5c5e\u6027\u503c\uff08\u81f3\u5c11\u5199\u51fa6\u4e2a\u5c5e\u6027\uff09
\ndisplay:flex;<\/p>\n
flex-direction:<\/p>\n
justify-content:<\/p>\n
align-items:<\/p>\n
align-self:<\/p>\n
align-content:<\/p>\n
flex-wrap:
\n23\u3001\u7b80\u5355\u7684\u4ecb\u7ecd\u4e00\u4e0b\u7ebf\u6027\u6e10\u53d8\u548c\u5f84\u5411\u6e10\u53d8\u3001\u91cd\u590d\u6e10\u53d8\u7684\u7528\u6cd5
\n\u7ebf\u6027\u6e10\u53d8\uff1alinear-gradient()<\/p>\n
\u5f84\u5411\u6e10\u53d8\uff1aradial-gradient()<\/p>\n
\u91cd\u590d\u7ebf\u6027\u6e10\u53d8\uff1arepeating-linear-gradient()<\/p>\n
\u91cd\u590d\u5f84\u5411\u6e10\u53d8\uff1arepeating-radial-gradient()
\n24\u3001\u7b80\u5355\u4ecb\u7ecd\u4e0banimation\u7684\u7528\u6cd5
\nanimation\u6709\u4e24\u90e8\u5206\u7ec4\u6210\uff1aanimation:\u52a8\u753b\u540d\u79f0 \u52a8\u753b\u6267\u884c\u65f6\u95f4 \u52a8\u753b\u7c7b\u578b \u52a8\u753b\u5ef6\u8fdf\u65f6\u95f4 \u52a8\u753b\u91cd\u590d\u6b21\u6570 \u52a8\u753b\u65b9\u5411\uff1b @keyframes \u52a8\u753b\u540d\u5b57
\n25\u3001css3D\u7684\u4e3b\u8981\u51e0\u4e2a\u5c5e\u6027\u548c\u5c5e\u6027\u503c<\/p>\n
1\u3001\u666f\u6df1\uff1aperspactive:number; \u60f3\u8981\u770b\u5230\u7684\u7269\u4f53\u8d8a\u5927\uff0c\u90a3\u4e48\u5c31\u628a\u503c\u8bbe\u7684\u8f83\u5c0f\uff0c\u5982\u679c\u8981\u770b\u7269\u4f53\u770b\u7684\u8d8a\u5c0f\u5c31\u628a\u503c\u8bbe\u7684\u8d8a\u5927
\n2\u30013D\u7684\u821e\u53f0\uff1atransform-style:preserve-3d;
\n3\u3001translateZ() rotateZ() scaleZ()
\n26\u30012D\u4e2d\u7684\u4e3b\u8981\u51e0\u4e2a\u5c5e\u6027
\ntransform:translate() rotate() skew() scale()<\/p>\n
transform-origin:
\n27\u3001\u7b80\u5355\u4ecb\u7ecd\u8fc7\u5ea6\u52a8\u753b\u7684\u5c5e\u6027\u548c\u5c5e\u6027\u503c
\ntransition:\u5c5e\u6027\u540d\u79f0\uff08\u53ef\u4ee5\u7528all\uff09 \u52a8\u753b\u6267\u884c\u7684\u65f6\u95f4 \u52a8\u753b\u7684\u7c7b\u578b \u52a8\u753b\u7684\u5ef6\u8fdf\u65f6\u95f4
\n28\u3001css3\u4e2d\u65b0\u589e\u7684\u80cc\u666f\u5c5e\u6027
\nbackground-origin:\u80cc\u666f\u539f\u70b9<\/p>\n
background-clip:\u80cc\u666f\u88c1\u5207<\/p>\n
background-size:\u80cc\u666f\u56fe\u50cf\u7684\u5c3a\u5bf8<\/p>\n
\u4ee5\u4e0b\u4e3abackground-size\u7684\u4e09\u4e2a\u503c
\nlength<\/p>\n
\u89c4\u5b9a\u80cc\u666f\u56fe\u7684\u5927\u5c0f\u3002\u7b2c\u4e00\u4e2a\u503c\u5bbd\u5ea6\uff0c\u7b2c\u4e8c\u4e2a\u503c\u9ad8\u5ea6\u3002
\nPercentage(%)<\/p>\n
\u4ee5\u767e\u5206\u6bd4\u4e3a\u503c\u8bbe\u7f6e\u80cc\u666f\u56fe\u5927\u5c0f
\ncover<\/p>\n
\u628a\u80cc\u666f\u56fe\u50cf\u6269\u5c55\u81f3\u8db3\u591f\u5927\uff0c\u4ee5\u4f7f\u80cc\u666f\u56fe\u50cf\u5b8c\u5168\u8986\u76d6\u80cc\u666f\u533a\u57df<\/p>\n
<\/p>\n
29\u3001\u5199\u51fa5\u5927\u6d4f\u89c8\u5668\u7684\u5185\u6838\u4ee5\u53ca\u4ed6\u4eec\u7684\u4ee3\u8868\u4f5c\u54c1
\n*Trident: IE\u3001Maxthon(\u9068\u6e38)\u3001\u817e\u8baf \u3001Theworld\u4e16\u754c\u4e4b\u7a97\u3001360\u6d4f\u89c8\u5668
\n*Gecko\uff1a\uff1a \u4ee3\u8868\u4f5c\u54c1Mozilla Firefox \u662f\u5f00\u6e90\u7684
\n*Webkit : \u4ee3\u8868\u4f5c\u54c1Safari\u3001Chrome \uff0c \u662f\u4e00\u4e2a\u5f00\u6e90\u9879\u76ee\u3002
\n*Presto : \u4ee3\u8868\u4f5c\u54c1Opera \uff0cPresto\u662f\u7531Opera Software\u5f00\u53d1\u7684\u6d4f\u89c8\u5668\u6392\u7248\u5f15\u64ce\u3002\u5b83\u4e5f\u662f\u4e16\u754c\u4e0a\u516c\u8ba4\u7684\u6e32\u67d3\u901f\u5ea6\u6700\u5feb\u7684\u5f15\u64ce\u3002
\n*Blink \uff1a\u7531Google\u548cOpera Software\u5f00\u53d1\u7684\u6d4f\u89c8\u5668\u6392\u7248\u5f15\u64ce\uff0c2013\u5e744\u6708\u53d1\u5e03\u3002
\n30\u3001\u5199\u51faIE6\u91cc\u9762\u5e38\u89c1\u7684\u51e0\u79cdbug\u4ee5\u53ca\u89e3\u51b3\u65b9\u6848(\u6700\u5c114\u79cd)
\n1)\u56fe\u7247\u6709\u8fb9\u6846BUG \u65b9\u6848\uff1a\u7ed9\u56fe\u7247\u52a0border:0;\u6216\u8005border:0 none;
\n2\u3001\u53cc\u500d\u6d6e\u5411\uff08\u53cc\u500d\u8fb9\u8ddd\uff09 \u65b9\u6848\uff1adisplay:inline
\n3\u3001\u9ed8\u8ba4\u9ad8\u5ea6\uff08IE6\u3001IE7\uff09 \u65b9\u6848\uff1a\u7ed9\u5143\u7d20\u6dfb\u52a0\u58f0\u660e\uff1afont-size:0; \u65b9\u68482\uff1a\u7ed9\u5143\u7d20\u6dfb\u52a0\u58f0\u660e\uff1aoverflow:hidden;
\n4\u3001\u6309\u94ae\u5143\u7d20\u9ed8\u8ba4\u5927\u5c0f\u4e0d\u4e00 \u65b9\u6848\uff1a\u7528a\u6807\u7b7e\u6a21\u62df
\n31\u3001IE\u7684\u8fc7\u6ee4\u5668\u6709\u54ea\u4e9b\uff1f
\n1\u3001 _ \u4e0b\u5212\u7ebf\u5c5e\u6027\u8fc7\u6ee4\u5668<\/p>\n
2\u3001 \\9 \uff1a IE\u7248\u672c\u8bc6\u522b\uff1b\u5176\u4ed6\u6d4f\u89c8\u5668\u90fd\u4e0d\u8bc6\u522b \u8bed\u6cd5\uff1a\u9009\u62e9\u7b26{\u5c5e\u6027\uff1a\u5c5e\u6027\u503c\\9;}<\/p>\n
3\u3001 \\0 : IE8\u53ca\u4ee5\u4e0a\u7248\u672c\u8bc6\u522b\uff1b\u5176\u4ed6\u6d4f\u89c8\u5668\u90fd\u4e0d\u8bc6\u522b \u8bed\u6cd5\uff1a\u9009\u62e9\u7b26{\u5c5e\u6027\uff1a\u5c5e\u6027\u503c\\0\uff1b}
\n32\u3001\u5143\u7d20\u9ad8\u5ea6\u584c\u9677\u89e3\u51b3\u65b9\u6848\uff08\u81f3\u5c114\u79cd\uff09<\/p>\n
hack1\uff1a\u7ed9\u7236\u5143\u7d20\u6dfb\u52a0\u58f0\u660eoverflow:hidden;
\nhack2: \u7ed9\u7236\u5143\u7d20\u52a0height
\nhack3: \u5728\u6d6e\u52a8\u5143\u7d20\u4e0b\u65b9\u6dfb\u52a0\u7a7adiv,\u5e76\u7ed9\u8be5\u5143\u7d20\u6dfb\u52a0 \u58f0\u660e\uff1adiv{clear:both; height:0; overflow:hidden;}
\nhack4:\u4e07\u80fd\u6e05\u9664\u6d6e\u52a8\u6cd5 p:after{content:\u201c.\u201d;clear:both;display:block;height:0;overflow:hidden; visibility:hidden;}<\/p>\n
\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a\u524d\u7aefABC<\/a> » html 5\u5e38\u89c1\u7684\u9762\u8bd5\u9898<\/a><\/p>","protected":false},"excerpt":{"rendered":" 1\u3001\u5e38\u89c1\u7684\u5757\u7ea7\u5143\u7d20 \u5185\u8054\u5143\u7d20 div -\u6700\u5e38\u7528\u7684\u5757\u7ea7\u5143\u7d20 dl – \u548cdt-dd \u642d\u914d\u4f7f\u7528\u7684\u5757\u7ea7\u5143\u7d20 &nb […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/1840"}],"collection":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1840"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/1840\/revisions"}],"predecessor-version":[{"id":1841,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/1840\/revisions\/1841"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1840"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1840"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1840"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}