-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdocs__myblog__css__csslayout.md.js
More file actions
1 lines (1 loc) · 7.55 KB
/
docs__myblog__css__csslayout.md.js
File metadata and controls
1 lines (1 loc) · 7.55 KB
1
(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([[37],{pADS:function(n,e,t){"use strict";t.r(e);var a=t("q1tI"),l=t.n(a),i=t("dEAq"),r=t("H1Ra"),d=l.a.memo((n=>{n.demos;return l.a.createElement(l.a.Fragment,null,l.a.createElement("div",{className:"markdown"},l.a.createElement("h2",{id:"pc-\u7aef\u5e03\u5c40"},l.a.createElement(i["AnchorLink"],{to:"#pc-\u7aef\u5e03\u5c40","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"pc \u7aef\u5e03\u5c40"),l.a.createElement("h3",{id:"\u5723\u676f\u5e03\u5c40"},l.a.createElement(i["AnchorLink"],{to:"#\u5723\u676f\u5e03\u5c40","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u5723\u676f\u5e03\u5c40"),l.a.createElement("p",null,"\u4e3a\u4e86\u8ba9\u4e2d\u95f4 div \u5185\u5bb9\u4e0d\u88ab\u906e\u6321\uff0c\u5c06\u4e2d\u95f4 div \u8bbe\u7f6e\u4e86\u5de6\u53f3 padding-left \u548c padding-right \u540e\uff0c\u5c06\u5de6\u53f3\u4e24\u4e2a div \u7528\u76f8\u5bf9\u5e03\u5c40 position: relative \u5e76\u5206\u522b\u914d\u5408 right \u548c left \u5c5e\u6027\uff0c\u4ee5\u4fbf\u5de6\u53f3\u4e24\u680f div \u79fb\u52a8\u540e\u4e0d\u906e\u6321\u4e2d\u95f4 div"),l.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>\u5723\u676f\u5e03\u5c40</title>\n <style type="text/css">\n body {\n margin: 0;\n padding: 0;\n }\n\n .container {\n min-width: 400px;\n height: 200px;\n /*\u9884\u7559\u51fa\u4f4d\u7f6e */\n padding-left: 200px;\n padding-right: 150px;\n }\n\n .main {\n width: 100%;\n height: 100px;\n float: left;\n background-color: red;\n }\n\n .left {\n width: 200px;\n height: 200px;\n background-color: skyblue;\n float: left;\n margin-left: -100%;\n position: relative;\n left: -200px;\n }\n\n .right {\n width: 150px;\n height: 150px;\n background-color: skyblue;\n float: left;\n margin-left: -150px;\n position: relative;\n right: -150px;\n }\n </style>\n </head>\n\n <body>\n <div class="container">\n <div class="main">\u4e2d\u95f4</div>\n <div class="left">\u5de6\u8fb9</div>\n <div class="right">\u53f3\u8fb9</div>\n </div>\n </body>\n</html>',lang:"html"}),l.a.createElement("h3",{id:"\u53cc\u98de\u7ffc\u5e03\u5c40"},l.a.createElement(i["AnchorLink"],{to:"#\u53cc\u98de\u7ffc\u5e03\u5c40","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u53cc\u98de\u7ffc\u5e03\u5c40"),l.a.createElement("p",null,"\u4e3a\u4e86\u8ba9\u4e2d\u95f4 div \u5185\u5bb9\u4e0d\u88ab\u906e\u6321\uff0c\u76f4\u63a5\u5728\u4e2d\u95f4 div \u5185\u90e8\u521b\u5efa\u5b50 div \u7528\u4e8e\u653e\u7f6e\u5185\u5bb9\uff0c\u5728\u8be5 div \u91cc\u7528 margin-left \u548c margin-right \u4e3a\u5de6\u53f3\u4e24\u680f div \u7559\u51fa\u4f4d\u7f6e"),l.a.createElement("ul",null,l.a.createElement("li",null,"float \u5b9e\u73b0"),l.a.createElement("li",null,"position \u5b9e\u73b0"),l.a.createElement("li",null,"\u8d1f\u8fb9\u8ddd"),l.a.createElement("li",null,"\u7b49\u9ad8"),l.a.createElement("li",null,"\u76d2\u5b50\u6a21\u578b"),l.a.createElement("li",null,"\u6e05\u9664\u6d6e\u52a8")),l.a.createElement(r["a"],{code:'\x3c!-- \u6b63\u5e38\u60c5\u51b5\u4e0b\u662f\u5de6\u4e2d\u53f3\u5e03\u5c40\uff0c\u4f46\u662f\u8981\u8003\u8651\u4e00\u4e2a\u95ee\u9898\uff0c\u5c31\u662fhtml\u89e3\u6790\u662f\u4ece\u4e0a\u5230\u4e0b\u89e3\u6790\uff0c\u8fd9\u6837\u4f1a\u5bfc\u81f4left\u4f18\u5148\u89e3\u6790\uff0c\u4f46\u662f\u8fd9\u6837\u4e0d\u5bf9\u7684,\u56e0\u4e3a\u4e00\u4e2a\u7f51\u9875\u4e2d\u7528\u6237\u6700\u5173\u5fc3\u7684\u662f\u4e2d\u95f4\u533a\u57df\u7684\u4f4d\u7f6e\uff0c\u6240\u4ee5\u6211\u4eec\u5fc5\u987b\u5148\u89e3\u6790\u4e2d\u95f4\u6a21\u5757\uff0c\u6240\u4ee5\u5de6\u4e2d\u53f3\u5e03\u5c40\u662f\u4e0d\u884c\u7684\uff0c\u6211\u4eec\u8981\u60f3\u529e\u6cd5\u8ba9middle\u4f18\u5148\u89e3\u6790 --\x3e\n\n\x3c!-- \u53cc\u98de\u7ffc\u5e03\u5c40 --\x3e\n<!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>\u53cc\u98de\u7ffc\u5e03\u5c40</title>\n <style type="text/css">\n body {\n margin: 0;\n padding: 0;\n }\n\n .container {\n min-width: 400px;\n height: 300px;\n background: honeydew;\n }\n .left {\n width: 200px;\n height: 200px;\n background: red;\n float: left;\n margin-left: -100%; /*\u8ba9\u5de6\u8fb9\u7684\u76d2\u5b50\u79fb\u52a8\u5230\u6700\u5de6\u8fb9*/\n }\n .right {\n width: 200px;\n height: 200px;\n background: red;\n float: left;\n margin-left: -200px; /*\u8ba9\u53f3\u8fb9\u7684\u76d2\u5b50\u79fb\u52a8\u5230\u6700\u53f3\u8fb9*/\n }\n .main {\n width: 100%;\n height: 200px;\n background: lawngreen;\n float: left;\n }\n .content {\n margin-left: 200px; /*\u8ba9\u4e2d\u95f4\u7684\u76d2\u5b50\u7a7a\u51fa\u5de6\u53f3\u4e24\u8fb9\u7684\u5bbd\u5ea6*/\n margin-right: 200px;\n }\n </style>\n </head>\n\n <body>\n <div class="container">\n <div class="main">\n <div class="content">\u4e2d\u95f4</div>\n </div>\n <div class="left">\u5de6\u8fb9</div>\n <div class="right">\u53f3\u8fb9</div>\n </div>\n </body>\n</html>',lang:"html"}),l.a.createElement("h3",{id:"flex-\u5e03\u5c40"},l.a.createElement(i["AnchorLink"],{to:"#flex-\u5e03\u5c40","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"flex \u5e03\u5c40"),l.a.createElement("h2",{id:"\u79fb\u52a8\u7aef"},l.a.createElement(i["AnchorLink"],{to:"#\u79fb\u52a8\u7aef","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u79fb\u52a8\u7aef"),l.a.createElement("ul",null,l.a.createElement("li",null,"\u4f7f\u7528 vh,vm,rem\uff0c\u76ee\u524d\u8bbe\u8ba1\u7a3f\u90fd\u662f 640\u3001750\u30011125 \u7684\u8bbe\u8ba1")),l.a.createElement(r["a"],{code:"10 / 16 = 0.625; //\u4e00\u822c\u662f\u6309\u7167\u8fd9\u4e2a\u5927\u5c0f\u6765\u8bbe\u7f6e",lang:"js"}),l.a.createElement("ul",null,l.a.createElement("li",null,"\u79fb\u52a8\u7aef\u5b57\u4f53\u4e0d\u5efa\u8bae\u7528 rem\uff0cdata-dpr \u52a8\u6001\u8bbe\u7f6e\u5b57\u4f53\u5927\u5c0f\uff0c\u5c4f\u5e55\u53d8\u5927\u653e\u66f4\u591a\u7684\u5b57\uff0c\u6216\u8005\u5c4f\u5e55\u53d8\u5927\u653e\u66f4\u591a\u7684\u5b57"),l.a.createElement("li",null,"\u795e\u5947\u7684 padding/margin-top \u7b49\u6bd4\u4f8b\u7f29\u653e\u95f4\u8ddd"),l.a.createElement("li",null,"html","{","box-sizing:border-box;","}",",\u6587\u5b57\u8d85\u51fa\u4e5f\u4e0d\u62c5\u5fc3\u88ab\u6491\u5f00\uff0c\u4ed6\u4f1a\u5411\u5185\u6324"),l.a.createElement("li",null,"\u5199\u5b57\u4f53\u4e0d\u8981\u53ea\u5199\u4e2d\u6587\u540d\u5b57\uff0c\u8981\u4fdd\u8bc1\u897f\u6587\u5b57\u4f53\u5728\u4e2d\u6587\u5b57\u4f53\u524d\u9762\uff0cmac>windows>linux"),l.a.createElement("li",null,"\u4e0d\u8981\u76f4\u63a5\u4f7f\u7528\u8bbe\u8ba1\u5e08\u7684 font-family"),l.a.createElement("li",null,"font-family:sans-serif:\u7cfb\u7edf\u9ed8\u8ba4\uff0c\u5b57\u4f53\u591a\u4e2a\u5355\u8bcd"))))}));e["default"]=n=>{var e=l.a.useContext(i["context"]),t=e.demos;return l.a.useEffect((()=>{var e;null!==n&&void 0!==n&&null!==(e=n.location)&&void 0!==e&&e.hash&&i["AnchorLink"].scrollToAnchor(decodeURIComponent(n.location.hash.slice(1)))}),[]),l.a.createElement(d,{demos:t})}}}]);