-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdocs__interview__htmlcss__html.md.js
More file actions
1 lines (1 loc) · 23.1 KB
/
docs__interview__htmlcss__html.md.js
File metadata and controls
1 lines (1 loc) · 23.1 KB
1
(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([[24],{mkWP:function(e,n,t){"use strict";t.r(n);var l=t("q1tI"),a=t.n(l),c=t("dEAq"),r=t("H1Ra"),i=a.a.memo((e=>{e.demos;return a.a.createElement(a.a.Fragment,null,a.a.createElement("div",{className:"markdown"},a.a.createElement("h2",{id:"1html5-\u548c-css3-\u7684\u65b0\u7279\u6027"},a.a.createElement(c["AnchorLink"],{to:"#1html5-\u548c-css3-\u7684\u65b0\u7279\u6027","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"1\u3001Html5 \u548c css3 \u7684\u65b0\u7279\u6027"),a.a.createElement("p",null,a.a.createElement("strong",null,"html5 \u65b0\u7279\u6027\uff1a")),a.a.createElement("ol",null,a.a.createElement("li",null,"\u62d6\u62fd\u91ca\u653e(Drag and drop) API"),a.a.createElement("li",null,"\u8bed\u4e49\u5316\u66f4\u597d\u7684\u5185\u5bb9\u6807\u7b7e\uff08",a.a.createElement("code",null,"header,nav,footer,aside,article,section"),"\uff09"),a.a.createElement("li",null,"\u97f3\u9891\u3001\u89c6\u9891 API(audio,video)"),a.a.createElement("li",null,"\u753b\u5e03(",a.a.createElement("code",null,"Canvas"),") API"),a.a.createElement("li",null,"\u5730\u7406(",a.a.createElement("code",null,"Geolocation"),") API"),a.a.createElement("li",null,"\u672c\u5730\u79bb\u7ebf\u5b58\u50a8 ",a.a.createElement("code",null,"localStorage")," \u957f\u671f\u5b58\u50a8\u6570\u636e\uff0c\u6d4f\u89c8\u5668\u5173\u95ed\u540e\u6570\u636e\u4e0d\u4e22\u5931\uff1b"),a.a.createElement("li",null,a.a.createElement("code",null,"sessionStorage")," \u7684\u6570\u636e\u5728\u6d4f\u89c8\u5668\u5173\u95ed\u540e\u81ea\u52a8\u5220\u9664"),a.a.createElement("li",null,"\u8868\u5355\u63a7\u4ef6\uff0c",a.a.createElement("code",null,"calendar\u3001date\u3001time\u3001email\u3001url\u3001search")),a.a.createElement("li",null,"\u65b0\u7684\u6280\u672f ",a.a.createElement("code",null,"webworker"),", ",a.a.createElement("code",null,"websocket"),", ",a.a.createElement("code",null,"Geolocation"))),a.a.createElement("blockquote",null,a.a.createElement("p",null,"\u8bed\u4e49\u5316\u7684\u7406\u89e3(\u4f18\u70b9):")),a.a.createElement("ul",null,a.a.createElement("li",null,"html \u8bed\u4e49\u5316\u5c31\u662f\u8ba9\u9875\u9762\u7684\u5185\u5bb9\u7ed3\u6784\u5316\uff0c\u4fbf\u4e8e\u5bf9\u6d4f\u89c8\u5668\u3001\u641c\u7d22\u5f15\u64ce\u89e3\u6790\uff1b"),a.a.createElement("li",null,"\u5728\u6ca1\u6709\u6837\u5f0f CCS \u60c5\u51b5\u4e0b\u4e5f\u4ee5\u4e00\u79cd\u6587\u6863\u683c\u5f0f\u663e\u793a\uff0c\u5e76\u4e14\u662f\u5bb9\u6613\u9605\u8bfb\u7684\u3002"),a.a.createElement("li",null,"\u641c\u7d22\u5f15\u64ce\u7684\u722c\u866b\u4f9d\u8d56\u4e8e\u6807\u8bb0\u6765\u786e\u5b9a\u4e0a\u4e0b\u6587\u548c\u5404\u4e2a\u5173\u952e\u5b57\u7684\u6743\u91cd\uff0c\u5229\u4e8e SEO\u3002"),a.a.createElement("li",null,"\u4f7f\u9605\u8bfb\u6e90\u4ee3\u7801\u7684\u4eba\u5bf9\u7f51\u7ad9\u66f4\u5bb9\u6613\u5c06\u7f51\u7ad9\u5206\u5757\uff0c\u4fbf\u4e8e\u9605\u8bfb\u7ef4\u62a4\u7406\u89e3\u3002")),a.a.createElement("p",null,a.a.createElement("strong",null,"\u5982\u4f55\u533a\u5206 html \u548c html5")),a.a.createElement("ol",null,a.a.createElement("li",null,a.a.createElement("p",null,"\u6587\u6863\u7c7b\u578b\u58f0\u660e"),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"html")," \u58f0\u660e\uff1a",a.a.createElement("code",null,'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">'))),a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"html5"),"\uff1a",a.a.createElement("code",null,"<!doctype html>"))))),a.a.createElement("li",null,a.a.createElement("p",null,"\u7ed3\u6784\u8bed\u4e49"),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"html"),":\u6ca1\u6709\u4f53\u73b0\u7ed3\u6784\u8bed\u4e49\u5316\u7684\u6807\u7b7e\uff0c\u901a\u5e38\u662f\u7528",a.a.createElement("code",null,'<div id="header"></div>'),"\u6765\u8868\u793a\u5934\u90e8")),a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"html5"),":\u5728\u8bed\u4e49\u4e0a\u6709\u5f88\u5927\u4f18\u52bf\uff0c\u63d0\u4f9b\u4e86\u4e00\u4e9b\u65b0\u7684 html5 \u6807\u7b7e\uff0c\u6bd4\u5982\uff1a",a.a.createElement("code",null,"article\u3001footer\u3001header\u3001nav\u3001section")))))),a.a.createElement("h2",{id:"2\u5916\u8fb9\u8ddd\u91cd\u53e0"},a.a.createElement(c["AnchorLink"],{to:"#2\u5916\u8fb9\u8ddd\u91cd\u53e0","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"2\u3001\u5916\u8fb9\u8ddd\u91cd\u53e0"),a.a.createElement("ul",null,a.a.createElement("li",null,"\u4e24\u4e2a\u76f8\u90bb\u7684\u5916\u8fb9\u8ddd\u90fd\u662f\u6b63\u6570\u65f6\uff0c\u6298\u53e0\u7ed3\u679c\u662f\u5b83\u4eec\u4e24\u8005\u4e4b\u95f4\u8f83\u5927\u7684\u503c\u3002"),a.a.createElement("li",null,"\u4e24\u4e2a\u76f8\u90bb\u7684\u5916\u8fb9\u8ddd\u90fd\u662f\u8d1f\u6570\u65f6\uff0c\u6298\u53e0\u7ed3\u679c\u662f\u4e24\u8005\u7edd\u5bf9\u503c\u7684\u8f83\u5927\u503c\u3002"),a.a.createElement("li",null,"\u4e24\u4e2a\u5916\u8fb9\u8ddd\u4e00\u6b63\u4e00\u8d1f\u65f6\uff0c\u6298\u53e0\u7ed3\u679c\u662f\u4e24\u8005\u7684\u76f8\u52a0\u7684\u548c")),a.a.createElement("blockquote",null,a.a.createElement("p",null,"\u89e3\u51b3\u65b9\u6cd5 \u7236\u5143\u7d20\u6dfb\u52a0\uff1a",a.a.createElement("code",null,"overflow: hidden"))),a.a.createElement("h2",{id:"3position-\u7684\u51e0\u4e2a\u503c\u8bf4\u4e00\u4e0b"},a.a.createElement(c["AnchorLink"],{to:"#3position-\u7684\u51e0\u4e2a\u503c\u8bf4\u4e00\u4e0b","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"3\u3001position \u7684\u51e0\u4e2a\u503c\u8bf4\u4e00\u4e0b"),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"absolute")),a.a.createElement("p",null,"\u751f\u6210\u7edd\u5bf9\u5b9a\u4f4d\u7684\u5143\u7d20\uff0c\u76f8\u5bf9\u4e8e static \u5b9a\u4f4d\u4ee5\u5916\u7684\u7b2c\u4e00\u4e2a\u7236\u5143\u7d20\u8fdb\u884c\u5b9a\u4f4d\u3002")),a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"fixed")," \uff08\u8001 IE \u4e0d\u652f\u6301\uff09"),a.a.createElement("p",null,"\u751f\u6210\u7edd\u5bf9\u5b9a\u4f4d\u7684\u5143\u7d20\uff0c\u76f8\u5bf9\u4e8e\u6d4f\u89c8\u5668\u7a97\u53e3\u8fdb\u884c\u5b9a\u4f4d\u3002")),a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"relative")),a.a.createElement("p",null,"\u751f\u6210\u76f8\u5bf9\u5b9a\u4f4d\u7684\u5143\u7d20\uff0c\u76f8\u5bf9\u4e8e\u5176\u6b63\u5e38\u4f4d\u7f6e\u8fdb\u884c\u5b9a\u4f4d\u3002")),a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"static")," \u9ed8\u8ba4\u503c\u3002\u6ca1\u6709\u5b9a\u4f4d\uff0c\u5143\u7d20\u51fa\u73b0\u5728\u6b63\u5e38\u7684\u6d41\u4e2d"),a.a.createElement("p",null,"\uff08\u5ffd\u7565 top, bottom, left, right z-index \u58f0\u660e\uff09\u3002")),a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"inherit")," \u89c4\u5b9a\u4ece\u7236\u5143\u7d20\u7ee7\u627f position \u5c5e\u6027\u7684\u503c\u3002")),a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"sticky")," \uff1a\u7c98\u6027\u5b9a\u4f4d sticky \u76f8\u5f53\u4e8e\u76f8\u5bf9\u5b9a\u4f4d relative \u548c\u56fa\u5b9a\u5b9a\u4f4d fixed \u7684\u7ed3\u5408\uff08\u7528\u4e8e\u5438\u9876\u6548\u679c\uff09"))),a.a.createElement("h2",{id:"4css-\u5b9e\u73b0\u591a\u5217\u7b49\u9ad8\u5e03\u5c40\u8981\u6c42\u5143\u7d20\u5b9e\u9645\u5360\u7528\u7684\u9ad8\u5ea6\u4ee5\u591a\u5217\u4e2d\u8f83\u9ad8\u7684\u4e3a\u51c6"},a.a.createElement(c["AnchorLink"],{to:"#4css-\u5b9e\u73b0\u591a\u5217\u7b49\u9ad8\u5e03\u5c40\u8981\u6c42\u5143\u7d20\u5b9e\u9645\u5360\u7528\u7684\u9ad8\u5ea6\u4ee5\u591a\u5217\u4e2d\u8f83\u9ad8\u7684\u4e3a\u51c6","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"4\u3001css \u5b9e\u73b0\u591a\u5217\u7b49\u9ad8\u5e03\u5c40\uff0c\u8981\u6c42\u5143\u7d20\u5b9e\u9645\u5360\u7528\u7684\u9ad8\u5ea6\u4ee5\u591a\u5217\u4e2d\u8f83\u9ad8\u7684\u4e3a\u51c6\uff01"),a.a.createElement("ol",null,a.a.createElement("li",null,"\u7b2c\u4e00\u79cd\u4f7f\u7528 ",a.a.createElement("code",null,"flex")," \u5e03\u5c40\uff0c",a.a.createElement("code",null,"flex-direction")," \u9ed8\u8ba4\u4e3a row,align-items \u9ed8\u8ba4\u4e3a stretch\uff0c\u8be5\u53c2\u6570\u5c31\u662f\u5143\u7d20\u88ab\u62c9\u4f38\u9002\u5e94\u5bb9\u5668")),a.a.createElement(r["a"],{code:'<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <title>Document</title>\n <style type="text/css">\n .wrap {\n display: flex;\n /* flex-direction: row;\n align-items: stretch; */\n }\n .item {\n width: 0;\n flex: 1;\n margin-right: 5px;\n background-color: burlywood;\n }\n </style>\n </head>\n <body>\n <div class="wrap">\n <div class="item">left</div>\n <div class="item">\n <p>1</p>\n <p>1</p>\n <p>1</p>\n <p>1</p>\n <p>1</p>\n </div>\n <div class="item">right</div>\n </div>\n </body>\n</html>',lang:"html"}),a.a.createElement("ol",{start:2},a.a.createElement("li",null,a.a.createElement("code",null,"table-cell")," \u5e03\u5c40")),a.a.createElement(r["a"],{code:'<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <title>Document</title>\n <style type="text/css">\n .wrap {\n width: 100%;\n display: table;\n background-color: darkblue;\n table-layout: fixed;\n }\n .left,\n .centerWrap,\n .right {\n display: table-cell;\n }\n .left,\n .center,\n .right {\n background: darkkhaki;\n }\n .center {\n margin: 0 10px;\n }\n </style>\n </head>\n <body>\n <div class="wrap">\n <div class="left">left</div>\n <div class="centerWrap">\n <div class="center">\n <p>1</p>\n <p>1</p>\n <p>1</p>\n <p>1</p>\n <p>1</p>\n </div>\n </div>\n <div class="right">right</div>\n </div>\n </body>\n</html>',lang:"html"}),a.a.createElement("ol",{start:3},a.a.createElement("li",null,"\u5047\u7b49\u9ad8\u5e03\u5c40\uff0c\u7ed9\u6bcf\u5217\u8bbe\u7f6e\u6bd4\u8f83\u5927\u7684\u5e95\u90e8\u5185\u8fb9\u8ddd",a.a.createElement("code",null,"padding-bottom"),",\u7136\u540e\u7528\u76f8\u7b49\u6570\u503c\u7684\u8d1f\u5916\u8fb9\u8ddd",a.a.createElement("code",null,"margin-bottom"),"\u6d88\u9664\u6389")),a.a.createElement(r["a"],{code:'<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <title>Document</title>\n <style type="text/css">\n html,\n body,\n p {\n margin: 0;\n padding: 0;\n }\n .wrap {\n overflow: hidden;\n background-color: darkblue;\n }\n .left,\n .centerWrap,\n .right {\n float: left;\n width: 33.33%;\n padding-bottom: 9999px;\n margin-bottom: -9999px;\n }\n .left,\n .center,\n .right {\n background: darkorchid;\n }\n .center {\n margin: 0 10px;\n }\n </style>\n </head>\n <body>\n <div class="wrap">\n <div class="left">left</div>\n <div class="centerWrap">\n <div class="center">\n <p>1</p>\n <p>1</p>\n <p>1</p>\n <p>1</p>\n <p>1</p>\n </div>\n </div>\n <div class="right">right</div>\n </div>\n </body>\n</html>',lang:"html"}),a.a.createElement("ol",{start:4},a.a.createElement("li",null,a.a.createElement("code",null,"grid")," \u5e03\u5c40 grid-template-columns \u8bbe\u7f6e\u5217\u5bbd\uff0c grid-auto-flow \u81ea\u52a8\u5e03\u5c40\u7b97\u6cd5\uff0c\u8bbe\u7f6e\u4f18\u5148\u586b\u5145\u5217\uff0c\u5177\u4f53\u6559\u7a0b\u53c2\u8003",a.a.createElement(c["Link"],{to:"http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html"},"\u7f51\u683c\u5e03\u5c40"))),a.a.createElement(r["a"],{code:'<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <title>Document</title>\n <style type="text/css">\n html,\n body,\n p {\n margin: 0;\n padding: 0;\n }\n\n .wrap {\n display: grid;\n grid-template-columns: repeat(3, 33.33%);\n grid-auto-flow: colums;\n grid-gap: 10px;\n background: darkred;\n }\n .item {\n background: darkslateblue;\n }\n </style>\n </head>\n\n <body>\n <div class="wrap">\n <div class="item">left</div>\n\n <div class="item">\n <p>1</p>\n <p>1</p>\n <p>1</p>\n <p>1</p>\n <p>1</p>\n </div>\n\n <div class="item">right</div>\n </div>\n </body>\n</html>',lang:"html"}),a.a.createElement("h2",{id:"5\u5c45\u4e2d\u4e3a\u4ec0\u4e48\u8981\u7528-transfrom\u800c\u4e0d\u662f\u4f7f\u7528-marginleftmargintop"},a.a.createElement(c["AnchorLink"],{to:"#5\u5c45\u4e2d\u4e3a\u4ec0\u4e48\u8981\u7528-transfrom\u800c\u4e0d\u662f\u4f7f\u7528-marginleftmargintop","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"5\u3001\u5c45\u4e2d\u4e3a\u4ec0\u4e48\u8981\u7528 ",a.a.createElement("code",null,"transfrom"),",\u800c\u4e0d\u662f\u4f7f\u7528 ",a.a.createElement("code",null,"marginLeft\u3001marginTop"),"?"),a.a.createElement("p",null,"\u56e0\u4e3a ",a.a.createElement("code",null,"margin")," \u4f1a\u5bfc\u81f4\u9875\u9762\u91cd\u6392\u548c\u91cd\u7ed8\uff0c\u4f46\u662f ",a.a.createElement("code",null,"transfrom")," \u5374\u4e0d\u662f\uff0c",a.a.createElement("code",null,"tranfrom")," \u662f\u521b\u5efa\u4e00\u4e2a\u72ec\u7acb\u7684\u5c42\u3002"),a.a.createElement("p",null,a.a.createElement("strong",null,"\u6d4f\u89c8\u5668\u6e32\u67d3\u8fc7\u7a0b")),a.a.createElement("p",null,"\u62ff chrome \u4e3e\u4f8b\uff0cchrome \u6e32\u67d3\u4e3b\u8981\u5305\u62ec\uff1a"),a.a.createElement("ul",null,a.a.createElement("li",null,"Parse Html(html \u89e3\u6790)"),a.a.createElement("li",null,"RecalculateStyle(\u67e5\u627e\u5e76\u8ba1\u7b97\u6837\u5f0f\uff09"),a.a.createElement("li",null,"Layout(\u6392\u5e03)"),a.a.createElement("li",null,"Paint(\u7ed8\u5236)"),a.a.createElement("li",null,"Image Decode(\u56fe\u7247\u89e3\u7801)"),a.a.createElement("li",null,"Image Resize(\u56fe\u7247\u5927\u5c0f\u8bbe\u7f6e)"),a.a.createElement("li",null,"Composite Layers(\u5408\u5e76\u56fe\u5c42\u5e76\u8f93\u51fa\u9875\u9762\u5230\u5c4f\u5e55)\uff0c"),a.a.createElement("li",null,"\u6d4f\u89c8\u5668\u6700\u7ec8\u6e32\u67d3\u51fa\u9875\u9762")),a.a.createElement("p",null,a.a.createElement("strong",null,"tansform \u7684\u539f\u7406")),a.a.createElement("p",null,"transform \u662f\u901a\u8fc7\u521b\u5efa\u4e00\u4e2a ",a.a.createElement("code",null,"RenderLayers"),"(\u6e32\u67d3)\u5408\u6210\u5c42\uff0c\u62e5\u6709\u72ec\u7acb\u7684 ",a.a.createElement("code",null,"GraphicsLayers"),"(\u7ed8\u56fe\u5c42),\u6bcf\u4e00\u4e2a GraphicsLayers \u90fd\u6709\u4e00\u4e2a Graphics Context\uff0c\u5176\u5bf9\u5e94\u7684 RenderLayers \u4f1a Paint \u8fdb Graphics Context \u4e2d\uff0c\u5408\u6210\u5668(Compositor)\u6700\u7ec8\u8d1f\u8d23\u5c06 Graphics Context \u8f93\u51fa\u7684\u4f4d\u56fe\u5408\u5e76\u6210\u6700\u7ec8\u5c4f\u5e55\u5c55\u793a\u7684\u56fe\u6848"),a.a.createElement("p",null,a.a.createElement("strong",null,"margin")),a.a.createElement("p",null,"margin\uff1a\u5916\u8fb9\u8ddd\uff0c\u5b9a\u4e49\u5143\u7d20\u5468\u56f4\u7684\u7a7a\u95f4\uff1b\u7b80\u8a00\u4e4b\uff0c\u53ef\u4ee5\u6539\u53d8\u5143\u7d20\u7684\u4f4d\u79fb\uff0c\u5728\u6d4f\u89c8\u5668\u9875\u9762\u6e32\u67d3\u7684\u65f6\u5019\uff0cmargin \u53ef\u4ee5\u63a7\u5236\u5143\u7d20\u7684\u4f4d\u7f6e\uff0c\u4e5f\u5c31\u662f\u8bf4\uff0c\u6539\u53d8 margin\uff0c\u5c31\u4f1a\u6539\u53d8 render tree \u7684\u7ed3\u6784\uff0c\u5fc5\u5b9a\u4f1a\u5f15\u8d77\u9875\u9762 layout \u7684",a.a.createElement("code",null,"\u91cd\u6392"),"\u548c repaint \u7684",a.a.createElement("code",null,"\u91cd\u7ed8")),a.a.createElement("p",null,a.a.createElement("strong",null,"transform \u7684\u5c40\u9650\u6027")),a.a.createElement("p",null,"transform \u5b9e\u9645\u4e0a\u662f\u7528\u5230\u4e86 GPU \u52a0\u901f\uff0c\u4e5f\u5c31\u662f\u8bf4\u5360\u7528\u4e86\u5185\u5b58\uff0c\u7531\u6b64\u53ef\u89c1\u521b\u5efa GraphicsLayers,\u867d\u7136\u8282\u7701\u4e86 layout,paint \u63a5\u6536\u7aef\uff0c\u4f46\u662f layer \u521b\u5efa\u7684\u8d8a\u591a\uff0c\u5360\u7528\u5185\u5b58\u5c31\u4f1a\u8d8a\u5927\uff0c\u8fc7\u591a\u7684\u6e32\u67d3\u5f00\u9500\u4f1a\u8d85\u8fc7\u6027\u80fd\u7684\u6539\u5584"),a.a.createElement("p",null,a.a.createElement("strong",null,"\u72ec\u7acb\u7684\u5408\u6210\u5c42")),a.a.createElement("ul",null,a.a.createElement("li",null,"\u6709 ",a.a.createElement("code",null,"3D")," \u6216\u8005 perspective transform \u7684 css \u5c5e\u6027"),a.a.createElement("li",null,a.a.createElement("code",null,"video")," \u5143\u7d20\u7684\u5c42"),a.a.createElement("li",null,a.a.createElement("code",null,"canvas")," \u5143\u7d20\u7684\u5c42"),a.a.createElement("li",null,a.a.createElement("code",null,"flash")),a.a.createElement("li",null,"\u5bf9 opacity \u548c transform \u5e94\u7528\u4e86 css \u52a8\u753b\u7684\u5c42"),a.a.createElement("li",null,"\u4f7f\u7528\u4e86 css ",a.a.createElement("code",null,"\u6ee4\u955c"),"(filtters)"),a.a.createElement("li",null,"\u6709\u5408\u6210\u540e\u4ee3\u7684\u5c42"),a.a.createElement("li",null,"\u540c\u5408\u6210\u5c42\u91cd\u53e0\uff0c\u4e14\u5728\u8be5\u5408\u6210\u5c42\u4e0a\u9762(z-index)\u7684\u6e32\u67d3")),a.a.createElement("h2",{id:"6flex-\u5e03\u5c40\u5b9e\u73b0\u628a-9-\u4e2a\u5143\u7d20\u5206\u4e09\u884c\u6392\u5217"},a.a.createElement(c["AnchorLink"],{to:"#6flex-\u5e03\u5c40\u5b9e\u73b0\u628a-9-\u4e2a\u5143\u7d20\u5206\u4e09\u884c\u6392\u5217","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"6\u3001flex \u5e03\u5c40\u5b9e\u73b0\u628a 9 \u4e2a\u5143\u7d20\u5206\u4e09\u884c\u6392\u5217?"),a.a.createElement(r["a"],{code:'<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <title>Document</title>\n <style type="text/css">\n .content {\n display: flex;\n flex-flow: row wrap; /* \u6362\u884c */\n justify-content: center;\n align-items: center;\n }\n .item {\n flex: 0 1 33.33%; /* \u5bbd\u5ea6 */\n padding: 15px 0;\n text-align: center; /* \u6216\u8005 display: flex; */\n border-bottom: 1px solid #efefef;\n border-right: 1px solid #efefef;\n box-sizing: border-box;\n }\n </style>\n </head>\n <body>\n <div class="content">\n <div class="item">\u5546\u94fa</div>\n <div class="item">\u5546\u94fa</div>\n <div class="item">\u5546\u94fa</div>\n <div class="item">\u5546\u94fa</div>\n <div class="item">\u5546\u94fa</div>\n <div class="item">\u5546\u94fa</div>\n <div class="item">\u5546\u94fa</div>\n <div class="item">\u5546\u94fa</div>\n <div class="item">\u5546\u94fa</div>\n </div>\n </body>\n</html>',lang:"html"}),a.a.createElement("h2",{id:"7\u5b9e\u73b0\u4e00\u4e2a\u56fa\u5b9a\u5bbd\u5ea6\u4e3a-200px-\u7684-div-\u5728\u9875\u9762\u6c34\u5e73\u5782\u76f4\u5c45\u4e2d\u81f3\u5c11\u4e00\u79cd"},a.a.createElement(c["AnchorLink"],{to:"#7\u5b9e\u73b0\u4e00\u4e2a\u56fa\u5b9a\u5bbd\u5ea6\u4e3a-200px-\u7684-div-\u5728\u9875\u9762\u6c34\u5e73\u5782\u76f4\u5c45\u4e2d\u81f3\u5c11\u4e00\u79cd","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"7\u3001\u5b9e\u73b0\u4e00\u4e2a\u56fa\u5b9a\u5bbd\u5ea6\u4e3a 200px \u7684 div \u5728\u9875\u9762\u6c34\u5e73\u5782\u76f4\u5c45\u4e2d\uff08\u81f3\u5c11\u4e00\u79cd\uff09?"),a.a.createElement("h3",{id:"flex-\u65b9\u6cd5"},a.a.createElement(c["AnchorLink"],{to:"#flex-\u65b9\u6cd5","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"flex \u65b9\u6cd5"),a.a.createElement(r["a"],{code:'<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <title>Document</title>\n <style type="text/css">\n .main {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n height: 100vh;\n }\n .box {\n background: red;\n }\n </style>\n </head>\n <body>\n <div class="main">\n <div class="box">xdadsadsadasdasd</div>\n </div>\n </body>\n</html>',lang:"html"}),a.a.createElement("h3",{id:"\u7edd\u5bf9\u5b9a\u4f4d\u65b9\u6cd5\u4e0d\u77e5\u9053\u5bbd\u9ad8"},a.a.createElement(c["AnchorLink"],{to:"#\u7edd\u5bf9\u5b9a\u4f4d\u65b9\u6cd5\u4e0d\u77e5\u9053\u5bbd\u9ad8","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"\u7edd\u5bf9\u5b9a\u4f4d\u65b9\u6cd5(\u4e0d\u77e5\u9053\u5bbd\u9ad8)"),a.a.createElement("p",null,"\u4e0d\u786e\u5b9a\u5f53\u524d ",a.a.createElement("code",null,"div")," \u7684\u5bbd\u5ea6\u548c\u9ad8\u5ea6\uff0c\u91c7\u7528 ",a.a.createElement("code",null,"transform: translate(-50%,-50%);"),"\u5f53\u524d ",a.a.createElement("code",null,"div")," \u7684\u7236\u7ea7\u6dfb\u52a0\u76f8\u5bf9\u5b9a\u4f4d",a.a.createElement("code",null,"\uff08position: relative;\uff09")),a.a.createElement(r["a"],{code:'<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <title>Document</title>\n <style type="text/css">\n .main {\n position: relative;\n height: 100vh;\n }\n .box {\n background: red;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n </style>\n </head>\n <body>\n <div class="main">\n <div class="box">sdasdsawdddddddddddd</div>\n </div>\n </body>\n</html>',lang:"html"}),a.a.createElement("h3",{id:"\u7edd\u5bf9\u5b9a\u4f4d\u77e5\u9053\u5bbd\u9ad8"},a.a.createElement(c["AnchorLink"],{to:"#\u7edd\u5bf9\u5b9a\u4f4d\u77e5\u9053\u5bbd\u9ad8","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"\u7edd\u5bf9\u5b9a\u4f4d(\u77e5\u9053\u5bbd\u9ad8)"),a.a.createElement("p",null,"\u786e\u5b9a",a.a.createElement("code",null,"div"),"\u7684\u5bbd\u9ad8"),a.a.createElement(r["a"],{code:"//\u7b2c\u4e00\u79cd\n.box {\n background: red;\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n margin: auto;\n width: 100px;\n height: 100px;\n}\n//\u7b2c\u4e8c\u79cd\n.box {\n background: red;\n width: 100px;\n height: 100px;\n position: absolute;\n left: 50%;\n top: 50%;\n margin-left: -50px;\n margin-top: -50px;\n}",lang:"css"})))}));n["default"]=e=>{var n=a.a.useContext(c["context"]),t=n.demos;return a.a.useEffect((()=>{var n;null!==e&&void 0!==e&&null!==(n=e.location)&&void 0!==n&&n.hash&&c["AnchorLink"].scrollToAnchor(decodeURIComponent(e.location.hash.slice(1)))}),[]),a.a.createElement(i,{demos:t})}}}]);