docs__myblog__css__css.md.js

(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([[32],{"kq/z":function(e,n,a){"use strict";a.r(n);var t=a("q1tI"),l=a.n(t),c=a("dEAq"),i=l.a.memo((e=>{e.demos;return l.a.createElement(l.a.Fragment,null,l.a.createElement("div",{className:"markdown"},l.a.createElement("h2",{id:"css-oo-\u7684\u6982\u5ff5"},l.a.createElement(c["AnchorLink"],{to:"#css-oo-\u7684\u6982\u5ff5","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"CSS OO \u7684\u6982\u5ff5"),l.a.createElement("p",null,"OO CSS \u5c06\u9875\u9762\u53ef\u91cd\u7528\u5143\u7d20\u62bd\u8c61\u6210\u4e00\u4e2a\u7c7b\uff0c\u7528 class \u52a0\u4ee5\u63cf\u8ff0\uff0c\u800c\u4e0e\u5176\u5bf9\u5e94\u7684 HTML \u5373\u53ef\u770b\u6210\u662f\u6b64\u7c7b\u7684\u5b9e\u4f8b"),l.a.createElement("h3",{id:"oo-css-\u4f5c\u7528"},l.a.createElement(c["AnchorLink"],{to:"#oo-css-\u4f5c\u7528","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"OO CSS \u4f5c\u7528"),l.a.createElement("ul",null,l.a.createElement("li",null,"\u52a0\u5f3a\u4ee3\u7801\u590d\u7528\u4ee5\u4fbf\u4e8e\u7ef4\u62a4"),l.a.createElement("li",null,"\u51cf\u5c0f CSS \u4f53\u79ef"),l.a.createElement("li",null,"\u63d0\u5347\u6e32\u67d3\u6548\u7387"),l.a.createElement("li",null,"\u7ec4\u4ef6\u5e93\u601d\u60f3\u3001\u6805\u683c\u5e03\u5c40\u53ef\u5171\u7528\u3001\u51cf\u5c11\u9009\u62e9\u5668\uff0c\u65b9\u4fbf\u6269\u5c55")),l.a.createElement("h3",{id:"\u91cd\u7f6e-css"},l.a.createElement(c["AnchorLink"],{to:"#\u91cd\u7f6e-css","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u91cd\u7f6e css"),l.a.createElement("ul",null,l.a.createElement("li",null,"reset.css \u91cd\u7f6e\u6d4f\u89c8\u5668"),l.a.createElement("li",null,"normalize.css \u4fee\u590d\u6d4f\u89c8\u5668"),l.a.createElement("li",null,"neat.css \u524d\u4e24\u8005\u878d\u5408")),l.a.createElement("h2",{id:"bfcifcgfcffc-\u662f\u4ec0\u4e48"},l.a.createElement(c["AnchorLink"],{to:"#bfcifcgfcffc-\u662f\u4ec0\u4e48","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"BFC\u3001IFC\u3001GFC\u3001FFC \u662f\u4ec0\u4e48\uff1f"),l.a.createElement("h3",{id:"bfc-\u662f\u4ec0\u4e48"},l.a.createElement(c["AnchorLink"],{to:"#bfc-\u662f\u4ec0\u4e48","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"BFC \u662f\u4ec0\u4e48\uff1f"),l.a.createElement("p",null,"\u67e5\u770b",l.a.createElement(c["Link"],{to:"/myblog/css/bfc"},"\u4ec0\u4e48\u662f BFC?")),l.a.createElement("h3",{id:"ifc"},l.a.createElement(c["AnchorLink"],{to:"#ifc","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"IFC"),l.a.createElement("blockquote",null,l.a.createElement("p",null,"IFC(inline Formatting Contexts)\u76f4\u8bd1\u4e3a\u201d\u5185\u8054\u683c\u5f0f\u5316\u4e0a\u4e0b\u6587\u201c\uff0cIFC \u7684 line box\uff08\u7ebf\u6846\uff09\u9ad8\u5ea6\u7531\u5176\u5305\u542b\u884c\u5185\u5143\u7d20\u4e2d\u6700\u9ad8\u7684\u5b9e\u9645\u9ad8\u5ea6\u8ba1\u7b97\u800c\u6765(\u4e0d\u53d7\u5782\u76f4\u65b9\u5411\u7684 padding/margin \u5f71\u54cd)")),l.a.createElement("h3",{id:"ffc"},l.a.createElement(c["AnchorLink"],{to:"#ffc","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"FFC"),l.a.createElement("blockquote",null,l.a.createElement("p",null,"FFC\uff08flex Formatting Contexts\uff09\u76f4\u8bd1\u4e3a\u201d\u81ea\u9002\u5e94\u683c\u5f0f\u5316\u4e0a\u4e0b\u6587\u201c\uff0cdisplay \u503c\u4e3a flex \u6216\u8005 inline-flex \u7684\u5143\u7d20\u5c06\u4f1a\u751f\u6210\u81ea\u9002\u5e94\u5bb9\u5668")),l.a.createElement("h3",{id:"gfc"},l.a.createElement(c["AnchorLink"],{to:"#gfc","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"GFC"),l.a.createElement("blockquote",null,l.a.createElement("p",null,"GFC\uff08Gridlayout Formatting Contexts\uff09\u76f4\u8bd1\u4e3a \u201d\u7f51\u7edc\u5e03\u5c40\u683c\u5f0f\u5316\u4e0a\u4e0b\u6587\u201c,\u5f53\u4e3a\u4e00\u4e2a\u5143\u7d20\u8bbe\u7f6e display \u4e3a grid \u7684\u65f6\u5019\uff0c\u6b64\u5143\u7d20\u5c06\u4f1a\u83b7\u5f97\u4e00\u4e2a\u72ec\u7acb\u7684\u6e32\u67d3\u533a\u57df\uff0c\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u5728\u7f51\u683c\u5bb9\u5668(grid container)\u4e0a\u5b9a\u4e49\u7f51\u7edc\u5b9a\u4e49\u884c(grid definition rows)\u548c\u7f51\u7edc\u5b9a\u4e49\u5217(grid definition columns)\u5c5e\u6027\u5404\u5728\u7f51\u7edc\u9879\u76ee(grid item)\u4e0a\u5b9a\u4e49\u7f51\u7edc\u884c(grid row)\u548c\u7f51\u7edc\u5217(grid columns)\u4e3a\u6bcf\u4e00\u4e2a\u7f51\u7edc\u9879\u76ee(grid item)\u5b9a\u4e49\u4f4d\u7f6e\u548c\u7a7a\u95f4"))))}));n["default"]=e=>{var n=l.a.useContext(c["context"]),a=n.demos;return l.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)))}),[]),l.a.createElement(i,{demos:a})}}}]);