docs__interview__htmlcss__css.md.js

(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([[23],{"41Cg":function(e,l,n){"use strict";n.r(l);var a=n("q1tI"),t=n.n(a),c=n("dEAq"),r=n("H1Ra"),m=t.a.memo((e=>{e.demos;return t.a.createElement(t.a.Fragment,null,t.a.createElement("div",{className:"markdown"},t.a.createElement("h2",{id:"1css3-\u65b0\u7279\u6027"},t.a.createElement(c["AnchorLink"],{to:"#1css3-\u65b0\u7279\u6027","aria-hidden":"true",tabIndex:-1},t.a.createElement("span",{className:"icon icon-link"})),"1\u3001css3 \u65b0\u7279\u6027\uff1a"),t.a.createElement("ul",null,t.a.createElement("li",null,t.a.createElement("ol",null,t.a.createElement("li",null,"CSS3 \u5b9e\u73b0\u5706\u89d2\uff08",t.a.createElement("code",null,"border-radius"),"\uff09\uff0c\u9634\u5f71\uff08",t.a.createElement("code",null,"box-shadow"),"\uff09\uff0c ",t.a.createElement("code",null,"border-image")))),t.a.createElement("li",null,t.a.createElement("ol",{start:2},t.a.createElement("li",null,"\u5bf9\u6587\u5b57\u52a0\u7279\u6548\uff08",t.a.createElement("code",null,"text-shadow"),"\uff09\uff0c\u7ebf\u6027\u6e10\u53d8\uff08",t.a.createElement("code",null,"gradient"),"\uff09\uff0c\u65cb\u8f6c\uff08",t.a.createElement("code",null,"transform"),"\uff09"))),t.a.createElement("li",null,t.a.createElement("ol",{start:3},t.a.createElement("li",null,t.a.createElement("code",null,"transform:rotate(9deg) scale(0.85,0.90)")," ",t.a.createElement("code",null,"translate(0px,-30px) skew(-9deg,0deg);"),"// \u65cb\u8f6c,\u7f29\u653e,\u5b9a\u4f4d,\u503e\u659c"))),t.a.createElement("li",null,t.a.createElement("ol",{start:4},t.a.createElement("li",null,"\u589e\u52a0\u4e86\u66f4\u591a\u7684 CSS \u9009\u62e9\u5668 \u591a\u80cc\u666f rgba"))),t.a.createElement("li",null,t.a.createElement("ol",{start:5},t.a.createElement("li",null,"\u5728 CSS3 \u4e2d\u552f\u4e00\u5f15\u5165\u7684\u4f2a\u5143\u7d20\u662f ",t.a.createElement("code",null,"::selection.")))),t.a.createElement("li",null,t.a.createElement("ol",{start:6},t.a.createElement("li",null,"\u5a92\u4f53\u67e5\u8be2(media)\uff0c\u591a\u680f\u5e03\u5c40")))),t.a.createElement("h2",{id:"2css-\u9009\u62e9\u5668\u7684\u4f18\u5148\u7ea7"},t.a.createElement(c["AnchorLink"],{to:"#2css-\u9009\u62e9\u5668\u7684\u4f18\u5148\u7ea7","aria-hidden":"true",tabIndex:-1},t.a.createElement("span",{className:"icon icon-link"})),"2\u3001css \u9009\u62e9\u5668\u7684\u4f18\u5148\u7ea7"),t.a.createElement("ol",null,t.a.createElement("li",null,"\u4e0d\u540c\u7ea7\u522b")),t.a.createElement("p",null,t.a.createElement("code",null,"!important(10000)>\u5185\u8054\u6837\u5f0f style(1000) > #id(100) > class(10)/\u4f2a\u7c7b(:hover) > tag(1)>\u901a\u914d\u7b26\u9009\u62e9\u5668")),t.a.createElement("ol",{start:2},t.a.createElement("li",null,"\u540c\u4e00\u7ea7\u522b")),t.a.createElement("ul",null,t.a.createElement("li",null,"\u540e\u5199\u7684\u4f1a\u8986\u76d6\u5148\u5199\u7684\u6837\u5f0f"),t.a.createElement("li",null,"\u5185\u8054(",t.a.createElement("code",null,"\u884c\u5185,div\u5185\u90e8"),")\u6837\u5f0f>\u5185\u90e8\u6837\u5f0f\u8868(",t.a.createElement("code",null,"\u5934\u90e8 style"),")>\u5916\u90e8\u6837\u5f0f\u8868(",t.a.createElement("code",null,"link"),")>\u5bfc\u5165\u6837\u5f0f(",t.a.createElement("code",null,"@import"),")")),t.a.createElement("ol",{start:3},t.a.createElement("li",null,"\u590d\u6742\u9009\u62e9\u5668\u4f18\u5148\u7ea7")),t.a.createElement("ul",null,t.a.createElement("li",null,"id \u4e2a\u6570\u591a\u7684\u4f18\u5148\u7ea7\u9ad8"),t.a.createElement("li",null,"id \u4e2a\u6570\u76f8\u7b49\u7684\u770b class \u4e2a\u6570\uff0cclass \u8d8a\u591a\u4f18\u5148\u7ea7\u8d8a\u9ad8"),t.a.createElement("li",null,"id \u548c class \u4e2a\u6570\u76f8\u7b49\uff0c\u770b\u5143\u7d20\u4e2a\u6570\uff0c\u4e2a\u6570\u8d8a\u591a\u4f18\u5148\u7ea7\u8d8a\u9ad8\u3002")),t.a.createElement(r["a"],{code:'\x3c!--\u867d\u7136\u7b2c\u4e09\u4e2a\u6837\u5f0f\u7684class\u4e2a\u6570\u591a\uff0c\u4f46\u662f\u4ed6\u8fd9\u4e2a\u6837\u5f0f\u7684span\u6807\u7b7e\u7684\u6837\u5f0f\u662f\u7ee7\u627f\u7684\uff0c\u770b\u7b2c\u4e00\u4e2a\u7684\u603b\u7ed3\uff0c\n\u4ed6\u7684\u4f18\u5148\u7ea7\u662f\u6700\u4f4e\u7684\u3002\u6240\u4ee5\u4ed6\u6ca1\u6709\u9009\u4e2d\u7684\u4f18\u5148\u7ea7\u9ad8\u3002\u8fd9\u91cc\u6211\u5c31\u4e0d\u5199\u4e86\uff0c\u81ea\u5df1\u5728\u7b2c\u4e09\u4e2a\u6837\u5f0fp\u7684\u540e\u9762\u5728\u5199\u4e0a\u4e00\u4e2aspan\u6807\u7b7e\u3002\n\u4f60\u4f1a\u53d1\u73b0\u4ed6\u7684\u6837\u5f0f\u4f18\u5148\u7ea7\u662f\u6700\u9ad8\u7684\u3002--\x3e\n\x3c!-- \u8fd9\u91cc\u6700\u540e\u7684\u7ed3\u679c\u989c\u8272\u662fred\u7ea2\u8272\uff0c\u56e0\u4e3a\u76f4\u63a5\u9009\u4e2d\u7684span\u6bd4\u4e0b\u9762\u7684class\u4f18\u5148\u7ea7\u9ad8 --\x3e\n<style type="text/css">\n  #box .head span {\n    color: blue;\n  }\n  #box .head span {\n    color: red;\n  }\n  #box .head .p {\n    color: deeppink;\n  }\n</style>\n<div class="box" id="box">\n  <div class="head">\n    <p class="p"><span>\u6211\u7684\u989c\u8272</span></p>\n  </div>\n</div>',lang:"html"}),t.a.createElement("ul",null,t.a.createElement("li",null,"\u4f18\u5148\u7ea7\u76f8\u540c\uff0c\u540e\u9762\u7684\u6837\u5f0f\u4f1a\u8986\u76d6\u524d\u9762\u7684\u6837\u5f0f\uff0c \u4e0d\u5206\u5148\u540e\u987a\u5e8f\uff0c\u53ea\u770b\u9009\u62e9\u5668\u7c7b\u578b\u548c\u4e2a\u6570")),t.a.createElement("h2",{id:"3\u4f2a\u7c7b\u548c\u4f2a\u5143\u7d20\u7684\u533a\u522b"},t.a.createElement(c["AnchorLink"],{to:"#3\u4f2a\u7c7b\u548c\u4f2a\u5143\u7d20\u7684\u533a\u522b","aria-hidden":"true",tabIndex:-1},t.a.createElement("span",{className:"icon icon-link"})),"3\u3001\u4f2a\u7c7b\u548c\u4f2a\u5143\u7d20\u7684\u533a\u522b"),t.a.createElement("ol",null,t.a.createElement("li",null,"\u4f2a\u7c7b")),t.a.createElement("p",null,"\u5c31\u662f\u7528\u6765\u9009\u62e9 DOM \u6811\u4e4b\u5916\u7684\u4fe1\u606f\uff0c\u4e0d\u80fd\u591f\u88ab\u666e\u901a\u9009\u62e9\u5668\u9009\u62e9\u7684\u6587\u6863\u4e4b\u5916\u7684\u5143\u7d20\uff0c\u7528\u6765\u63d0\u6848\u53ca\u4e00\u4e9b\u9009\u62e9\u5668\u7684\u7279\u6b8a\u6548\u679c\uff0c\u6bd4\u5982",t.a.createElement("code",null,":hover"),"\u3001",t.a.createElement("code",null,":link"),"\u3001",t.a.createElement("code",null,":visited"),"\u3001",t.a.createElement("code",null,":first-child"),"\u3001",t.a.createElement("code",null,":focus"),"\u3001",t.a.createElement("code",null,":lang")," \u7b49"),t.a.createElement("p",null,"\u7531\u4e8e\u72b6\u6001\u7684\u53d8\u5316\u662f\u975e\u9759\u6001\u7684\uff0c\u6240\u4ee5\u5143\u7d20\u8fbe\u5230\u4e00\u4e2a\u7279\u5b9a\u7684\u72b6\u6001\u65f6,\u4ed6\u53ef\u80fd\u5f97\u5230\u4e00\u4e2a\u4f2a\u7c7b\u7684\u6837\u5f0f\uff0c\u5f53\u72b6\u6001\u6539\u53d8\u7684\u65f6\u5019\uff0c\u4ed6\u53c8\u4f1a\u5931\u53bb\u8fd9\u4e2a\u6837\u5f0f\uff0c\u6240\u4ee5\u4ed6\u867d\u7136\u548c class \u6709\u7c7b\u4f3c\u7684\u6548\u679c\uff0c\u4f46\u662f\u57fa\u4e8e\u6587\u6863\u4e4b\u5916\u7684\u62bd\u8c61\uff0c\u6240\u4ee5\u53eb\u505a",t.a.createElement("code",null,"\u4f2a\u7c7b")),t.a.createElement("ol",{start:2},t.a.createElement("li",null,"\u4f2a\u5143\u7d20")),t.a.createElement("p",null,"\u6838\u5fc3\u5c31\u662f\u521b\u5efa\u4e0d\u5b58\u5728\u4e8e\u6587\u6863\u4e2d\u7684\u5143\u7d20\uff0c\u6bd4\u5982",t.a.createElement("code",null,"::before"),"\u3001",t.a.createElement("code",null,"::after"),",\u4f2a\u5143\u7d20\u63a7\u5236\u7684\u5185\u5bb9\u548c\u5143\u7d20\u662f\u6ca1\u6709\u5dee\u522b\u7684\uff0c\u4f46\u662f\u672c\u8eab\u53ea\u662f\u57fa\u4e8e\u5143\u7d20\u7684\u62bd\u8c61,",t.a.createElement("code",null,"\u5e76\u4e0d\u5b58\u5728\u4e8e\u6587\u6863\u4e2d"),"\uff0c\u6240\u4ee5\u79f0\u4e3a",t.a.createElement("code",null,"\u4f2a\u5143\u7d20")),t.a.createElement("p",null,t.a.createElement("strong",null,"\u76f8\u540c\u4e4b\u5904")),t.a.createElement("blockquote",null,t.a.createElement("p",null,"\u4f2a\u7c7b\u548c\u4f2a\u5143\u7d20\u90fd\u4e0d\u5b58\u5728\u4e8e\u6e90\u6587\u4ef6\u548c DOM \u6811\u4e2d\uff0c\u4e5f\u5c31\u662f\u8bf4\u5728\u6e90\u6587\u4ef6\u548c DOM \u6811\u4e2d\u662f\u770b\u4e0d\u5230\u4f2a\u7c7b\u548c\u4f2a\u5143\u7d20\u7684")),t.a.createElement("p",null,t.a.createElement("strong",null,"\u4e0d\u540c\u4e4b\u5904")),t.a.createElement("blockquote",null),t.a.createElement("ol",null,t.a.createElement("li",null,"\u8868\u793a\u65b9\u6cd5\u4e0d\u540c\uff0c\u4f2a\u7c7b\u7528:,\u4f2a\u5143\u7d20\u7528::",t.a.createElement("blockquote",null)),t.a.createElement("li",null,"\u5b9a\u4e49\u4e0d\u540c\uff0c\u4f2a\u7c7b\u662f\u5047\u7684\u7c7b;\u4f2a\u5143\u7d20\u662f\u5047\u5143\u7d20\uff0c\u9700\u8981\u901a\u8fc7\u6dfb\u52a0\u5143\u7d20\u624d\u80fd\u8fbe\u5230\u6548\u679c")),t.a.createElement("h2",{id:"4flex-\u5e03\u5c40\u7684\u5c5e\u6027\u6709\u54ea\u4e9b\u90fd\u662f\u5e72\u5565\u7684"},t.a.createElement(c["AnchorLink"],{to:"#4flex-\u5e03\u5c40\u7684\u5c5e\u6027\u6709\u54ea\u4e9b\u90fd\u662f\u5e72\u5565\u7684","aria-hidden":"true",tabIndex:-1},t.a.createElement("span",{className:"icon icon-link"})),"4\u3001flex \u5e03\u5c40\u7684\u5c5e\u6027\u6709\u54ea\u4e9b\uff0c\u90fd\u662f\u5e72\u5565\u7684\uff1f"),t.a.createElement("ol",null,t.a.createElement("li",null,"\u7236\u5143\u7d20\u5c5e\u6027")),t.a.createElement("ul",null,t.a.createElement("li",null,t.a.createElement("p",null,t.a.createElement("code",null,"display:flex"),"\uff0c\u5b9a\u4e49\u4e86\u4e00\u4e2a flex \u5bb9\u5668")),t.a.createElement("li",null,t.a.createElement("p",null,t.a.createElement("code",null,"flex-direction")," \u51b3\u5b9a\u4e3b\u8f74\u7684\u65b9\u5411"),t.a.createElement("ul",null,t.a.createElement("li",null,t.a.createElement("code",null,"row")," \u9ed8\u8ba4\u503c \u6c34\u5e73\u4ece\u5de6\u5230\u53f3"),t.a.createElement("li",null,t.a.createElement("code",null,"column")," \u5782\u76f4\u4ece\u4e0a\u5230\u4e0b"),t.a.createElement("li",null,t.a.createElement("code",null,"row-reverse")," \u6c34\u5e73\u4ece\u53f3\u5230\u5de6"),t.a.createElement("li",null,t.a.createElement("code",null,"column-reverse")," \u5782\u76f4\u4ece\u4e0b\u5230\u4e0a"))),t.a.createElement("li",null,t.a.createElement("p",null,t.a.createElement("code",null,"flex-wrap")," \u5b9a\u4e49\u5982\u4f55\u6362\u884c"),t.a.createElement("ul",null,t.a.createElement("li",null,t.a.createElement("code",null,"nowrap")," \u9ed8\u8ba4\u4e0d\u6362\u884c"),t.a.createElement("li",null,t.a.createElement("code",null,"wrap")," \u6362\u884c"),t.a.createElement("li",null,t.a.createElement("code",null,"wrap-reverse")," \u6362\u884c\u4e14\u98a0\u5012\u987a\u5e8f\uff0c\u7b2c\u4e00\u884c\u5728\u4e0b\u9762"))),t.a.createElement("li",null,t.a.createElement("p",null,t.a.createElement("code",null,"flex-flow")," \u5c5e\u6027\u662f ",t.a.createElement("code",null,"flex-deriction")," \u5c5e\u6027\u548c ",t.a.createElement("code",null,"flex-wrap"),"\u5c5e\u6027\u7684\u7b80\u5199\u5f62\u5f0f\uff0c\u9ed8\u8ba4\u503c\u662f row nowrap")),t.a.createElement("li",null,t.a.createElement("p",null,t.a.createElement("code",null,"justify-content")," \u8bbe\u7f6e\u6216\u68c0\u7d22\u5f39\u6027\u76d2\u5b50\u5143\u7d20\u5728\u4e3b\u8f74(\u6a2a\u8f74)\u65b9\u5411\u7684\u5bf9\u9f50\u65b9\u5f0f"),t.a.createElement("ul",null,t.a.createElement("li",null,t.a.createElement("p",null,t.a.createElement("code",null,"flex-start")," \u884c\u8d77\u59cb\u4f4d\u7f6e\u5bf9\u9f50")),t.a.createElement("li",null,t.a.createElement("p",null,t.a.createElement("code",null,"flex-end")," \u5c06\u5411\u884c\u7ed3\u675f\u4f4d\u7f6e\u5bf9\u9f50")),t.a.createElement("li",null,t.a.createElement("p",null,t.a.createElement("code",null,"center")," \u5f39\u6027\u76d2\u5b50\u5143\u7d20\u5c06\u5411\u884c\u4e2d\u5bf9\u9f50")),t.a.createElement("li",null,t.a.createElement("p",null,t.a.createElement("code",null,"space-between")," \u5f39\u6027\u76d2\u5b50\u5e73\u5747\u7684\u5206\u5e03\u5728\u884c\u91cc")),t.a.createElement("li",null,t.a.createElement("p",null,t.a.createElement("code",null,"space-around")," \u5f39\u6027\u76d2\u5b50\u5e73\u5747\u7684\u5206\u5e03\u5728\u884c\u91cc\uff0c\u4e24\u7aef\u4fdd\u7559\u5b50\u5143\u7d20\u4e0e\u5b50\u5143\u7d20\u4e4b\u95f4\u95f4\u8ddd\u5927\u5c0f\u7684\u4e00\u534a")))),t.a.createElement("li",null,t.a.createElement("p",null,t.a.createElement("code",null,"align-items")," \u5f39\u6027\u76d2\u5b50\u5728\u7eb5\u8f74\u65b9\u5411\u4e0a\u7684\u5bf9\u9f50"),t.a.createElement("ul",null,t.a.createElement("li",null,t.a.createElement("p",null,t.a.createElement("code",null,"flex-start"))),t.a.createElement("li",null,t.a.createElement("p",null,t.a.createElement("code",null,"flex-end"))),t.a.createElement("li",null,t.a.createElement("p",null,t.a.createElement("code",null,"center"))),t.a.createElement("li",null,t.a.createElement("p",null,t.a.createElement("code",null,"baseline"))),t.a.createElement("li",null,t.a.createElement("p",null,t.a.createElement("code",null,"stretch"))))),t.a.createElement("li",null,t.a.createElement("p",null,t.a.createElement("code",null,"align-content")," \u5f39\u6027\u76d2\u5b50\u5806\u53e0\u4f38\u7f29\u884c\u7684\u5bf9\u9f50\u65b9\u5f0f"),t.a.createElement("ul",null,t.a.createElement("li",null,t.a.createElement("p",null,t.a.createElement("code",null,"felx-start"))),t.a.createElement("li",null,t.a.createElement("p",null,t.a.createElement("code",null,"flex-end"))),t.a.createElement("li",null,t.a.createElement("p",null,t.a.createElement("code",null,"center"))),t.a.createElement("li",null,t.a.createElement("p",null,t.a.createElement("code",null,"space-between"))),t.a.createElement("li",null,t.a.createElement("p",null,t.a.createElement("code",null,"space-around"))),t.a.createElement("li",null,t.a.createElement("p",null,t.a.createElement("code",null,"stretch")))))),t.a.createElement("ol",{start:2},t.a.createElement("li",null,"\u5b50\u5143\u7d20\u4e0a\u5c5e\u6027")),t.a.createElement("ul",null,t.a.createElement("li",null,t.a.createElement("code",null,"order")),t.a.createElement("li",null,t.a.createElement("code",null,"flex-grow")," \u7528\u4e8e\u8bbe\u7f6e\u6216\u68c0\u7d22\u5f39\u6027\u76d2\u5b50\u7684\u6269\u5c55\u6bd4\u7387"),t.a.createElement("li",null,t.a.createElement("code",null,"flex-shrink")," flex \u5143\u7d20\u4ec5\u5728\u9ed8\u8ba4\u5bbd\u5ea6\u4e4b\u548c\u5927\u4e8e\u5bb9\u5668\u7684\u65f6\u5019\u624d\u4f1a\u53d1\u751f\u6536\u7f29\uff0c\u5176\u6536\u7f29\u7684\u5927\u5c0f\u662f\u4f9d\u636e flex-shrink \u7684\u503c"),t.a.createElement("li",null,t.a.createElement("code",null,"flex-basis")," \u7528\u4e8e\u8bbe\u7f6e\u6216\u68c0\u7d22\u5f39\u6027\u76d2\u4f38\u7f29\u57fa\u51c6\u503c"),t.a.createElement("li",null,t.a.createElement("code",null,"flex")," \u662f ",t.a.createElement("code",null,"felx-grow"),",",t.a.createElement("code",null,"flex-sharink")," \u548c ",t.a.createElement("code",null,"flex-basis")," \u7684\u95f4\u6b47\uff0c\u9ed8\u8ba4\u503c 0 1 auto,\u540e\u4e24\u4e2a\u5c5e\u6027\u53ef\u9009"),t.a.createElement("li",null,t.a.createElement("code",null,"align-self")," \u8bbe\u7f6e\u5b50\u5143\u7d20\u5728\u7eb5\u8f74\u4e0a\u7684\u5bf9\u9f50\u65b9\u5f0f\uff0c\u53ef\u4ee5\u8986\u76d6 ",t.a.createElement("code",null,"align-items")," \u7684\u8bbe\u7f6e")),t.a.createElement("h2",{id:"5\u5b9e\u73b0\u4e0d\u77e5\u9053\u5bbd\u9ad8\u7684-div-\u5c45\u4e2d\u65b9\u5f0f\u6709\u51e0\u79cd"},t.a.createElement(c["AnchorLink"],{to:"#5\u5b9e\u73b0\u4e0d\u77e5\u9053\u5bbd\u9ad8\u7684-div-\u5c45\u4e2d\u65b9\u5f0f\u6709\u51e0\u79cd","aria-hidden":"true",tabIndex:-1},t.a.createElement("span",{className:"icon icon-link"})),"5\u3001\u5b9e\u73b0\u4e0d\u77e5\u9053\u5bbd\u9ad8\u7684 div \u5c45\u4e2d\u65b9\u5f0f\u6709\u51e0\u79cd\uff1f"),t.a.createElement("ol",null,t.a.createElement("li",null,t.a.createElement("code",null,"transform(-50%,-50%)"),",\u5f80\u4e0a\uff08X \u8f74\uff09\uff0c\u5de6\uff08Y \u8f74\uff09\u79fb\u52a8\u81ea\u8eab\u957f\u5ea6\u7684 50%\uff0c\u4ee5\u4f7f\u5176\u5c45\u4e8e\u4e2d\u5fc3\u4f4d\u7f6e")),t.a.createElement(r["a"],{code:".cell {\n  background: #ff0;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}",lang:"css"}),t.a.createElement("ol",{start:2},t.a.createElement("li",null,"\u5f39\u6027\u5e03\u5c40 ",t.a.createElement("code",null,"flex"),"\u8bbe\u7f6e\u4e86 margin: auto \u7684\u5143\u7d20\uff0c\u5728\u901a\u8fc7 justify-content \u548c align-self \u8fdb\u884c\u5bf9\u9f50\u4e4b\u524d\uff0c\u4efb\u4f55\u6b63\u5904\u4e8e\u7a7a\u95f2\u7684\u7a7a\u95f4\u90fd\u4f1a\u5206\u914d\u5230\u8be5\u65b9\u5411\u7684\u81ea\u52a8 margin \u4e2d\u53bb")),t.a.createElement(r["a"],{code:'<style type="text/css">\n  .main {\n    width: 200px;\n    height: 200px;\n    background: firebrick;\n    display: flex;\n  }\n  .cell {\n    margin: auto;\n  }\n</style>\n<body>\n  <div class="main">\n    <div class="cell">\n      <p>\u6211\u7231\u4f60</p>\n    </div>\n  </div>\n</body>',lang:"html"}),t.a.createElement("ol",{start:3},t.a.createElement("li",null,t.a.createElement("code",null,"display:table-cell,"),"\u7ec4\u5408\u4f7f\u7528 display:table-cell \u548c vertical-align\u3001text-align\uff0c\u4f7f\u7236\u5143\u7d20\u5185\u7684\u6240\u6709\u884c\u5185\u5143\u7d20\u6c34\u5e73\u5782\u76f4\u5c45\u4e2d\uff08\u5185\u90e8 div \u8bbe\u7f6e display:inline-block \u5373\u53ef\uff09")),t.a.createElement(r["a"],{code:".cell {\n  display: table-cell;\n  vertical-align: middle;\n  text-align: center;\n  max-width: 240px;\n  /* width: 240px;\n  height: 180px; */\n  border: 1px solid red;\n}",lang:"css"}),t.a.createElement("h2",{id:"6displaynone\u548cvisibilityhidden\u7684\u533a\u522b"},t.a.createElement(c["AnchorLink"],{to:"#6displaynone\u548cvisibilityhidden\u7684\u533a\u522b","aria-hidden":"true",tabIndex:-1},t.a.createElement("span",{className:"icon icon-link"})),"6\u3001",t.a.createElement("code",null,"display:none"),"\u548c",t.a.createElement("code",null,"visibility:hidden\u7684\u533a\u522b\uff1f")),t.a.createElement("ul",null,t.a.createElement("li",null,t.a.createElement("code",null,"display:none"),",\u662f\u4e0d\u5360\u636e\u7a7a\u95f4\uff0c\u64cd\u4f5c\u8fd9\u4e2a\u4f1a\u5bfc\u81f4",t.a.createElement("strong",null,"\u91cd\u7ed8\u548c\u56de\u6d41(\u91cd\u6392)")),t.a.createElement("li",null,t.a.createElement("code",null,"visibility:hidden"),",\u5360\u636e\u7a7a\u95f4\u53ea\u662f\u9690\u85cf\u8d77\u6765\u4e86\uff0c\u64cd\u4f5c\u8fd9\u4e2a\u4f1a\u5bfc\u81f4",t.a.createElement("strong",null,"\u91cd\u7ed8"))),t.a.createElement("p",null,"\u91cd\u6392\u6bd4\u91cd\u7ed8\u66f4\u6d88\u8017\u6027\u80fd"),t.a.createElement("h2",{id:"7\u76d2\u6a21\u578b\u6982\u5ff5\u5982\u4f55\u5207\u6362\u76d2\u6a21\u578b"},t.a.createElement(c["AnchorLink"],{to:"#7\u76d2\u6a21\u578b\u6982\u5ff5\u5982\u4f55\u5207\u6362\u76d2\u6a21\u578b","aria-hidden":"true",tabIndex:-1},t.a.createElement("span",{className:"icon icon-link"})),"7\u3001\u76d2\u6a21\u578b\u6982\u5ff5\uff0c\u5982\u4f55\u5207\u6362\u76d2\u6a21\u578b\uff1f"),t.a.createElement("ol",null,t.a.createElement("li",null,t.a.createElement("p",null,"\u6807\u51c6\u76d2\u6a21\u578b \u5143\u7d20\u7684 width=content \u7684 width\u3002")),t.a.createElement("li",null,t.a.createElement("p",null,"IE \u76d2\u6a21\u578b(\u602a\u5f02\u76d2\u6a21\u578b) \u5143\u7d20\u7684 width=content \u7684 width+padding+border\u3002")),t.a.createElement("li",null,t.a.createElement("p",null,"\u5207\u6362\u4e24\u79cd\u76d2\u6a21\u578b\u65b9\u6cd5"))),t.a.createElement(r["a"],{code:"box-sizing: content-box; //\u6807\u51c6\u76d2\u6a21\u578b\uff08\u9ed8\u8ba4\uff09\nbox-sizing: border-box; //IE\u76d2\u6a21\u578b",lang:"css"}),t.a.createElement("h2",{id:"8\u5b9e\u73b0-1px-\u8fb9\u68461px-\u7ebf\u6761"},t.a.createElement(c["AnchorLink"],{to:"#8\u5b9e\u73b0-1px-\u8fb9\u68461px-\u7ebf\u6761","aria-hidden":"true",tabIndex:-1},t.a.createElement("span",{className:"icon icon-link"})),"8\u3001\u5b9e\u73b0 1px \u8fb9\u6846\uff1f1px \u7ebf\u6761\uff1f"),t.a.createElement("ul",null,t.a.createElement("li",null,t.a.createElement("code",null,"transform: scale(0.5)"),"\u65b9\u6848 - \u63a8\u8350: \u5f88\u7075\u6d3b",t.a.createElement("ol",null,t.a.createElement("li",null,"\u8bbe\u7f6e",t.a.createElement("code",null,"height: 1px"),"\uff0c\u6839\u636e\u5a92\u4f53\u67e5\u8be2\u7ed3\u5408",t.a.createElement("code",null,"transform"),"\u7f29\u653e\u4e3a\u76f8\u5e94\u5c3a\u5bf8\u3002")),t.a.createElement(r["a"],{code:"div {\n  height: 1px;\n  background: #000;\n  -webkit-transform: scaleY(0.5);\n  -webkit-transform-origin: 0 0;\n  overflow: hidden;\n}",lang:"css"}),t.a.createElement("ol",{start:2},t.a.createElement("li",null,"\u7528",t.a.createElement("code",null,"::after"),"\u548c:",t.a.createElement("code",null,":before"),",\u8bbe\u7f6e",t.a.createElement("code",null,"border-bottom\uff1a1px solid #000"),",\u7136\u540e\u5728\u7f29\u653e",t.a.createElement("code",null,"-webkit-transform: scaleY(0.5);"),"\u53ef\u4ee5\u5b9e\u73b0\u4e24\u6839\u8fb9\u7ebf\u7684\u9700\u6c42")),t.a.createElement(r["a"],{code:"div::after {\n  content: '';\n  width: 100%;\n  border-bottom: 1px solid #000;\n  transform: scaleY(0.5);\n}",lang:"css"}),t.a.createElement("ol",{start:3},t.a.createElement("li",null,"\u7528",t.a.createElement("code",null,"::after"),"\u8bbe\u7f6e",t.a.createElement("code",null,"border\uff1a1px solid #000; width:200%; height:200%"),",\u7136\u540e\u518d\u7f29\u653e",t.a.createElement("code",null,"scaleY(0.5)"),"; \u4f18\u70b9\u53ef\u4ee5\u5b9e\u73b0\u5706\u89d2\uff0c\u4eac\u4e1c\u5c31\u662f\u8fd9\u4e48\u5b9e\u73b0\u7684\uff0c\u7f3a\u70b9\u662f\u6309\u94ae\u6dfb\u52a0 active \u6bd4\u8f83\u9ebb\u70e6")),t.a.createElement(r["a"],{code:".div::after {\n  content: '';\n  width: 200%;\n  height: 200%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  border: 1px solid #bfbfbf;\n  border-radius: 4px;\n  -webkit-transform: scale(0.5, 0.5);\n  transform: scale(0.5, 0.5);\n  -webkit-transform-origin: top left;\n}",lang:"css"})))))}));l["default"]=e=>{var l=t.a.useContext(c["context"]),n=l.demos;return t.a.useEffect((()=>{var l;null!==e&&void 0!==e&&null!==(l=e.location)&&void 0!==l&&l.hash&&c["AnchorLink"].scrollToAnchor(decodeURIComponent(e.location.hash.slice(1)))}),[]),t.a.createElement(m,{demos:n})}}}]);