{"id":192409,"date":"2020-11-09T04:22:23","date_gmt":"2020-11-08T20:22:23","guid":{"rendered":"http:\/\/4563.org\/?p=192409"},"modified":"2020-11-09T04:22:23","modified_gmt":"2020-11-08T20:22:23","slug":"%e5%a4%aa%e8%8f%9c%e4%ba%86%ef%bc%8c%e8%af%b7%e6%95%99%e4%b8%80%e4%b8%aa-css-%e5%b8%83%e5%b1%80%e7%9a%84%e9%97%ae%e9%a2%98%ef%bc%8c%e6%80%bb%e6%98%af%e6%95%b4%e4%b8%8d%e6%98%8e%e7%99%bd%e3%80%82","status":"publish","type":"post","link":"http:\/\/4563.org\/?p=192409","title":{"rendered":"\u592a\u83dc\u4e86\uff0c\u8bf7\u6559\u4e00\u4e2a css \u5e03\u5c40\u7684\u95ee\u9898\uff0c\u603b\u662f\u6574\u4e0d\u660e\u767d\u3002"},"content":{"rendered":"
\n
\n
\n

\u592a\u83dc\u4e86\uff0c\u8bf7\u6559\u4e00\u4e2a css \u5e03\u5c40\u7684\u95ee\u9898\uff0c\u603b\u662f\u6574\u4e0d\u660e\u767d\u3002 <\/h1>\n

<\/p>\n

\n
\u8cc7\u6df1\u5927\u4f6c : yazoox <\/span> <\/i> 4<\/span> <\/div>\n
<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
<\/p>\n

\"\u592a\u83dc\u4e86\uff0c\u8bf7\u6559\u4e00\u4e2a<\/p>\n

\u5982\u4e0a\u56fe\u6240\u793a\uff0c\u9ed1\u8272\u662f\u5df2\u7ecf\u6709\u6846\u67b6\u5e03\u5c40\u3002\u5f69\u8272\u662f\u65b0\u7684\u9700\u6c42\u3002 \u5c31\u662f\u6dfb\u52a0\u4e00\u4e2a\u5de5\u5177\u680f\uff0c\u6709\u4e00\u4e2a button \u3002\u6309\u4e0b\u5b83\uff0c\u5c31\u4f1a\u5f39\u51fa\u4e00\u83dc\u5355\u3002\u83dc\u5355\u9700\u8981\u548c button \u5de6\u4fa7\u5bf9\u9f50\u3002<\/p>\n

button & menu \u90fd\u662f\u73b0\u6210\u7684\u7ec4\u4ef6<\/p>\n

\u4e0b\u9762\u8fd9\u4e2a\u662f\u6211\u753b\u51fa\u6765\u7684 \"\u592a\u83dc\u4e86\uff0c\u8bf7\u6559\u4e00\u4e2a<\/p>\n

\/\/ \u6211\u81ea\u5df1\u8bbe\u60f3\u7684\u7ed3\u6784 <div class=\"toolbar\">   <div class=\"container\">    <div class=\"mybutton\">     if showmenu && (     <menu \/>) \/\/ \u6211\u4eec\u6846\u67b6\u662f react \u7684\uff0c\u70b9\u51fb button\uff0c\u6539\u53d8 state\uff0c\u663e\u793a \/\u9690\u85cf menu     <\/div>   <\/div> <\/div> <\/code><\/pre>\n
.toolbar {  position: absolute;  top: \u5e7f\u544a\u680f top + height + 5px;  left: 0; }  .container {  position: absolute;  top: 0;  left: 0;  display: flex;  flex-direction: column; \/\/ \u6211\u672c\u6765\u662f\u60f3\u8ba9 button \u548c menu \u5728 flex \u7684\u4f5c\u7528\u4e0b\uff0c\u81ea\u5df1\u5bf9\u9f50\uff0c\u7ed3\u679c\u4e0d\u5de5\u4f5c\u3002 }  \/\/ menu \u662f\u4e00\u4e2a legacy \u7ec4\u4ef6\uff0c\u5185\u90e8\u6709\u5f88\u590d\u6742\u7684\u8ba1\u7b97 top, left \u7b49\u7b49\u7684\u8ba1\u7b97\u3002\u73b0\u5728\u662f\u548c\u6253\u5f00\u5b83\u7684 button \u5c45\u4e2d\u5bf9\u9f50\u3002 <\/code><\/pre>\n
\u8bf7\u6559\u4e00\u4e0b\u5927\u5bb6\uff0c\u8fd9\u6837\u7684\u5e03\u5c40\u600e\u4e48\u505a\u6bd4\u8f83\u597d\uff1f \u662f\u76f4\u63a5\u7528 position \u7b97\uff1f\u8fd8\u662f\u7528 flex \u628a\u5185\u90e8\u7684\u6846\u8d77\u6765\uff1f<\/p>\n
\u5927\u6982\u600e\u4e48\u5199\u8fd9\u4e2a css \u5e03\u5c40\uff1f<\/p>\n
\u8c22\u8c22\uff01<\/p>\n
p.s.\u6539 legacy code\uff0c\u8fd8\u8981\u5199 css, \u771f\u662f……<\/p>\n<\/p><\/div>\n
 \u5927\u4f6c\u6709\u8a71\u8aaa<\/b> (2<\/span>)        <\/div>\n
 <\/div>\n<\/p><\/div>\n<\/p><\/div>\n
    \n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : lllllliu <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 \u6055\u6211\u773c\u62d9\u3002\u3002\u770b\u4e0d\u61c2\u7b2c\u4e8c\u4e2a\u56fe\u3002\u7231\u83ab\u80fd\u52a9                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : kop1989 <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 1 \u3001\u6574\u4e2a\u7f51\u9875\u672c\u8eab\u5c31\u53ef\u4ee5\u505a flex \u5e03\u5c40\u3002\u6700\u5927\u7684 flex \u6a2a\u5411\u6392\u5217\uff0c\u5305\u542b\u5e7f\u544a\u680f+\u4e00\u4e2a\u7eb5\u5411\u6392\u5217\u7684 flex\uff0c\u547d\u540d\u4e3a B \uff08\u5305\u542b\u5e7f\u544a\u3001toolbar\uff0c\u4ee5\u53ca\u4e0b\u9762\u7684\u90e8\u5206\uff09\u3002\u8fd9\u6837\u80fd\u89e3\u51b3\u7eff\u6846\u7a7f\u900f\u5230\u5de6\u4fa7\u7684\u95ee\u9898\u3002
    2 \u3001button \u6ca1\u6709\u88ab\u7ea2\u6846\u5bb9\u7eb3\uff0c\u8bf4\u660e container \u548c mybutton \u6837\u5f0f\u6709\u51b2\u7a81\uff0cF12 \u8c03\u8bd5\u4e00\u4e0b\u770b\u770b\u3002                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n","protected":false},"excerpt":{"rendered":"
    \u592a\u83dc\u4e86\uff0c\u8bf7\u6559\u4e00\u4e2a css \u5e03\u5c40\u7684\u95ee…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[],"_links":{"self":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/192409"}],"collection":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=192409"}],"version-history":[{"count":0,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/192409\/revisions"}],"wp:attachment":[{"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=192409"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=192409"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=192409"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}