mirror of
https://github.com/Sevichecc/Urara-Blog.git
synced 2025-05-01 07:19:29 +08:00
1 line
43 KiB
JavaScript
1 line
43 KiB
JavaScript
import{S as Hp,i as Lp,s as Pp,C as ho,w as m,x as _,y as C,z as Sp,A as rp,f as h,t as B,B as $,X as ip,l as t,r as i,a as n,V as E,m as p,n as F,u as c,h as l,c as r,W as d,p as f,b as a,G as o,E as Op}from"../chunks/index-cd58b8d1.js";import{P as qp}from"../chunks/post_layout-9085e57e.js";import{I as w}from"../chunks/post_card-e7f4525a.js";import"../chunks/posts-c52cb603.js";import"../chunks/title-765c989f.js";import"../chunks/index-81c83cec.js";import"../chunks/head-4a058b17.js";import"../chunks/icon-3aa13b39.js";import"../chunks/footer-1abd9501.js";import"../chunks/posts-57ab4794.js";function Ip(Es){let y,x,u,P,v,D,k,Da,ce,ds,S,fe,O,Ds,ua,ye,us,q,ve,ms,yl,ma,Ee,I,_s,_a,de,vl,fp=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #FFCB6B">*</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">margin</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">0</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">padding</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">0</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">box-sizing</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> border-box</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">}</span></div></code></div></pre>`,El,T,Cs,Ca,De,b,dl,ha,Ba,Dl,$a,ue,U,hs,xa,me,Bs,ul,wa,_e,$s,G,Ce,ml,yp=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">author-img</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">float</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> left</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">}</span></div></code></div></pre>`,_l,xs,Cl,ka,he,j,ws,ba,Be,ks,hl,Aa,$e,bs,Q,xe,Bl,vp=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #FFCB6B">p</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">float</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> right</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">}</span></div></code></div></pre>`,$l,V,As,Ha,we,Hs,z,ke,N,Ls,La,be,A,xl,Pa,Sa,wl,Oa,Ae,K,Ps,qa,He,H,Ia,kl,Ta,Ua,Le,bl,Ep=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">head</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">h1</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">title</span><span style="color: #89DDFF"></</span><span style="color: #F07178">h1</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">h2</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">title</span><span style="color: #89DDFF"></</span><span style="color: #F07178">h2</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">clear</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">head</span><span style="color: #89DDFF">></span></div></code></div></pre>`,Al,Hl,dp=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #546E7A">/*\u6E05\u9664\u4E24\u8005*/</span></div><div class='line'><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">clear</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">clear</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> both</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/*\u6E05\u9664\u5DE6\u8FB9*/</span></div><div class='line'><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">clear</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">clear</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> left</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">}</span></div></code></div></pre>`,Ll,Z,Ss,Ga,Pe,Os,ja,Se,Pl,Dp=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">head</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">clearfix</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">h1</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">title</span><span style="color: #89DDFF"></</span><span style="color: #F07178">h1</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">h2</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">title</span><span style="color: #89DDFF"></</span><span style="color: #F07178">h2</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">head</span><span style="color: #89DDFF">></span></div></code></div></pre>`,Sl,Ol,up=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">clearfix</span><span style="color: #89DDFF">::</span><span style="color: #C792EA">after</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">clear</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> both</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">content</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">''</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">display</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> block</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">}</span></div></code></div></pre>`,ql,W,qs,Qa,Oe,Is,R,qe,Ts,X,Ie,Us,Il,Va,Te,Tl,mp=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">container</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">display</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> flex</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">align-items</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> center</span><span style="color: #89DDFF">;</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">/*\u6C34\u5E73\u5C45\u4E2D*/</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">justify-content</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> center</span><span style="color: #89DDFF">;</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">/*\u5782\u76F4\u5C45\u4E2D*/</span></div><div class='line'><span style="color: #89DDFF">}</span></div></code></div></pre>`,Ul,J,Gs,za,Ue,js,Gl,Na,Ge,Qs,Ka,je,jl,_p=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">container</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">display</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> flex</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">align-items</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> stretch</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">justify-content</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> flex-start</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">}</span></div></code></div></pre>`,Ql,M,Vs,Za,Qe,Vl,Cp=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">items</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">align-self</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> flex-start</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">}</span></div></code></div></pre>`,zl,Y,zs,Wa,Ve,g,Ns,Ra,ze,Ks,Xa,Ne,ss,Zs,Ja,Ke,Ws,Ma,Ze,ls,Rs,Ya,We,Xs,ga,Re,es,Js,so,Xe,as,Nl,lo,eo,Je,Kl,hp=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #FFCB6B">flex-grow</span><span style="color: #EEFFFF">: 1;</span></div><div class='line'><span style="color: #FFCB6B">flex-shrink</span><span style="color: #EEFFFF">: 1;</span></div><div class='line'><span style="color: #FFCB6B">flex-basis</span><span style="color: #EEFFFF">: 0%;</span></div></code></div></pre>`,Zl,os,Ms,ao,Me,Ys,ts,Ye,gs,ps,ge,sl,Fs,sa,ns,ll,oo,la,Wl,Bp=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">container</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">display</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> grid</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">grid-template-columns</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">250px</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">200px</span><span style="color: #89DDFF">;</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">/*\u4E24\u5217*/</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">grid-template-rows</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">200px</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">200px</span><span style="color: #89DDFF">;</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">/*\u4E24\u884C*/</span></div><div class='line'><span style="color: #89DDFF">}</span></div></code></div></pre>`,Rl,el,Xl,to,ea,rs,al,po,aa,ol,Fo,oa,Jl,$p=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">container</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #546E7A">/*gap:20px;*/</span></div><div class='line'><span style="color: #EEFFFF"> columns-gap</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">30px</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">row-gap</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">20px</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">}</span></div></code></div></pre>`,Ml,is,tl,no,ta,pl,Yl,ro,pa,gl,xp=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #FFCB6B">justify-content</span><span style="color: #EEFFFF">: center;</span></div><div class='line'><span style="color: #FFCB6B">align-content</span><span style="color: #EEFFFF">: center;</span></div></code></div></pre>`,se,cs,Fl,io,Fa,le,wp=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">items</span><span style="color: #EEFFFF">: </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">grid-column</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">2</span><span style="color: #EEFFFF">/</span><span style="color: #F78C6C">3</span><span style="color: #89DDFF">;</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">/*\u5F53\u524D\u540E\u6570\u503C\u76F8\u5DEE\u53EA\u67091\u4F4D\u65F6\uFF0C\u53EF\u7701\u53BB\u540E\u9762\u7684\u6570\u5B57*/</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">grid-row</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">2</span><span style="color: #EEFFFF">/</span><span style="color: #F78C6C">3</span><span style="color: #89DDFF">;</span></div><div class='line'></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #546E7A">/*\u5360\u51E0\u4E2A\u5217/\u884C\u65F6*/</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">grid-column</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">1</span><span style="color: #EEFFFF">/</span><span style="color: #F78C6C">3</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">grid-row</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">1</span><span style="color: #EEFFFF">/</span><span style="color: #F78C6C">3</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #546E7A">/*\u6216\u8005*/</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">grid-column</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">1</span><span style="color: #EEFFFF"> / span </span><span style="color: #F78C6C">3</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #546E7A">/*\u81EA\u52A8\u586B\u5145\u5269\u4F59\u7A7A\u95F4*/</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">grid-column</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">1</span><span style="color: #EEFFFF">/</span><span style="color: #F78C6C">-1</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">}</span></div></code></div></pre>`,ee,fs,nl,co,na,ae,kp=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">container</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">align-items</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> center</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">justify-items</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> center</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">}</span></div></code></div></pre>`,oe,te,bp=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">item</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">align-self</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> end</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">}</span></div></code></div></pre>`,pe,ys,rl,fo,ra,L,il,Fe,yo,vo,Eo,ne,Do,ia,re,Ap=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">container</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">grid-template-columns</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">2fr</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">1fr</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">1fr</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">1fr</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #546E7A">/*shorthand*/</span></div><div class='line'></div><div class='line'><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">container</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">grid-template-columns</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">repeat</span><span style="color: #89DDFF">(</span><span style="color: #F78C6C">4</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">1fr</span><span style="color: #89DDFF">);</span></div><div class='line'><span style="color: #89DDFF">}</span></div></code></div></pre>`,ie,vs,cl,uo,ca,fl,mo,fa;return S=new w({props:{src:"https://s2.loli.net/2022/01/08/SjgmE2nl7TkUAqM.png"}}),q=new w({props:{src:"https://s2.loli.net/2022/01/09/yCScJXVD9dYIjqK.png",alt:"https://s2.loli.net/2022/01/09/yCScJXVD9dYIjqK.png"}}),G=new w({props:{src:"https://s2.loli.net/2022/01/08/HZlqu9dyfmG5QYV.png",alt:"https://s2.loli.net/2022/01/08/HZlqu9dyfmG5QYV.png"}}),Q=new w({props:{src:"https://s2.loli.net/2022/01/08/ESLcqpbH2VfuNXj.png",alt:"https://s2.loli.net/2022/01/08/ESLcqpbH2VfuNXj.png"}}),z=new w({props:{src:"https://s2.loli.net/2022/01/08/g6Zk2rDAWbxLeoI.png",alt:"https://s2.loli.net/2022/01/08/g6Zk2rDAWbxLeoI.png"}}),R=new w({props:{src:"https://s2.loli.net/2022/01/09/8HiwTDALGbCZQdf.png"}}),X=new w({props:{src:"https://s2.loli.net/2022/01/09/RMmiLHxa78n4Atw.png"}}),ts=new w({props:{src:"https://s2.loli.net/2022/01/09/6ovHUJOilxqtkjb.png"}}),ps=new w({props:{src:"https://s2.loli.net/2022/01/09/1vLi2G6okjNzrut.png"}}),Fs=new w({props:{src:"https://s2.loli.net/2022/01/09/krsGJ3AgQpR2Uf9.png"}}),{c(){y=t("p"),x=i("\u8BFE\u7A0B\uFF1A"),u=t("a"),P=i("Build Responsive Real-World Websites with HTML and CSS"),v=n(),D=t("h2"),k=t("a"),Da=i("Overview"),ce=n(),ds=t("p"),m(S.$$.fragment),fe=n(),O=t("h2"),Ds=t("a"),ua=i("Box-sizing"),ye=n(),us=t("p"),m(q.$$.fragment),ve=n(),ms=t("blockquote"),yl=t("p"),ma=i("\u672A\u5B9A\u4E49\u4E4B\u524D\uFF1Acontent-box"),Ee=n(),I=t("h3"),_s=t("a"),_a=i("reset"),de=n(),vl=new E(!1),El=n(),T=t("h2"),Cs=t("a"),Ca=i("Float Layout"),De=n(),b=t("ul"),dl=t("li"),ha=i("\u6D6E\u52A8\u5728\u9875\u9762\u4E4B\u4E0A\uFF0C\u5BF9\u5468\u56F4\u5143\u7D20\u6CA1\u6709\u5F71\u54CD"),Ba=n(),Dl=t("li"),$a=i("\u73B0\u5728\u5F88\u5C11\u7528\u4E86"),ue=n(),U=t("h3"),hs=t("a"),xa=i("left"),me=n(),Bs=t("ul"),ul=t("li"),wa=i("\u6D6E\u52A8\u5230\u9875\u9762\u5DE6\u8FB9"),_e=n(),$s=t("p"),m(G.$$.fragment),Ce=n(),ml=new E(!1),_l=n(),xs=t("blockquote"),Cl=t("p"),ka=i("\u6B64\u65F6\u56FE\u7247\u548C\u6587\u672C\u4E0D\u5728\u540C\u4E00\u4E2A\u5C42\u9762\u4E0A"),he=n(),j=t("h3"),ws=t("a"),ba=i("right"),Be=n(),ks=t("blockquote"),hl=t("p"),Aa=i("\u6D6E\u52A8\u5230\u9875\u9762\u53F3\u8FB9"),$e=n(),bs=t("p"),m(Q.$$.fragment),xe=n(),Bl=new E(!1),$l=n(),V=t("h3"),As=t("a"),Ha=i("ABSOLUTE POSITIONING VS. FLOATS"),we=n(),Hs=t("p"),m(z.$$.fragment),ke=n(),N=t("h3"),Ls=t("a"),La=i("Clear Float"),be=n(),A=t("ul"),xl=t("li"),Pa=i("\u5F53\u6CA1\u6709\u5176\u4ED6\u5143\u7D20\u53EF\u4EE5 clear float \u65F6\uFF0C\u5728\u5176\u540E\u65B0\u5EFA\u4E00\u4E2A\u5143\u7D20\u8BBE\u7F6E clear"),Sa=n(),wl=t("li"),Oa=i("\u5F53\u5B58\u5728\u9700\u8981\u6E05\u9664\u7684\u5143\u7D20\u65F6\uFF0C\u76F4\u63A5\u5728\u8BE5\u5143\u7D20\u4E0A\u6E05\u9664"),Ae=n(),K=t("h4"),Ps=t("a"),qa=i("\u65B9\u6CD5 1: empty div"),He=n(),H=t("p"),Ia=i("\u4F7F\u7528\u4E00\u4E2A\u5E76\u5217\u7684\u7A7A"),kl=t("code"),Ta=i("<div>"),Ua=i("\u5143\u7D20\u6765\u6E05\u9664"),Le=n(),bl=new E(!1),Al=n(),Hl=new E(!1),Ll=n(),Z=t("h4"),Ss=t("a"),Ga=i("\u65B9\u6CD5 2:clearfix hack"),Pe=n(),Os=t("p"),ja=i("\u539F\u7406\u548C empty div \u7684\u65B9\u5F0F\u4E00\u6837\uFF0C\u4F46\u66F4\u7B80\u5355\uFF0C\u5229\u7528 pseudo element \u5728 parent element \u540E\u589E\u52A0\u4E00\u4E2A\u5143\u7D20"),Se=n(),Pl=new E(!1),Sl=n(),Ol=new E(!1),ql=n(),W=t("h2"),qs=t("a"),Qa=i("Flexbox"),Oe=n(),Is=t("p"),m(R.$$.fragment),qe=n(),Ts=t("p"),m(X.$$.fragment),Ie=n(),Us=t("blockquote"),Il=t("p"),Va=i("\u52A0\u7C97\u5B57\u4F53\u4E3A\u9ED8\u8BA4\u72B6\u6001"),Te=n(),Tl=new E(!1),Ul=n(),J=t("h3"),Gs=t("a"),za=i("Flex container"),Ue=n(),js=t("ul"),Gl=t("li"),Na=i("flex container takes the height of the tallest items"),Ge=n(),Qs=t("p"),Ka=i("\u5E38\u7528\uFF1A"),je=n(),jl=new E(!1),Ql=n(),M=t("h3"),Vs=t("a"),Za=i("Flex items"),Qe=n(),Vl=new E(!1),zl=n(),Y=t("h3"),zs=t("a"),Wa=i("Propetities"),Ve=n(),g=t("h4"),Ns=t("a"),Ra=i("order"),ze=n(),Ks=t("p"),Xa=i("\u6570\u5B57\u8D8A\u5927\u8D8A\u9760\u540E"),Ne=n(),ss=t("h4"),Zs=t("a"),Ja=i("flex-grow"),Ke=n(),Ws=t("p"),Ma=i("\u6570\u5B57\u8D8A\u5927\u5360\u6BD4\u8D8A\u5927"),Ze=n(),ls=t("h4"),Rs=t("a"),Ya=i("flex-basis"),We=n(),Xs=t("p"),ga=i("item\u2019s width"),Re=n(),es=t("h4"),Js=t("a"),so=i("shorthand"),Xe=n(),as=t("p"),Nl=t("code"),lo=i("flex:1"),eo=i(" ="),Je=n(),Kl=new E(!1),Zl=n(),os=t("h2"),Ms=t("a"),ao=i("CSS Grid"),Me=n(),Ys=t("p"),m(ts.$$.fragment),Ye=n(),gs=t("p"),m(ps.$$.fragment),ge=n(),sl=t("p"),m(Fs.$$.fragment),sa=n(),ns=t("h3"),ll=t("a"),oo=i("grid container"),la=n(),Wl=new E(!1),Rl=n(),el=t("blockquote"),Xl=t("p"),to=i("\u901A\u5E38\u4E0D\u5B9A\u4E49 rows"),ea=n(),rs=t("h4"),al=t("a"),po=i("Gap"),aa=n(),ol=t("p"),Fo=i("\u7528 gap \u800C\u4E0D\u662F margin:"),oa=n(),Jl=new E(!1),Ml=n(),is=t("h4"),tl=t("a"),no=i("align tracks inside containers"),ta=n(),pl=t("blockquote"),Yl=t("p"),ro=i("when the content is smaller than the grid"),pa=n(),gl=new E(!1),se=n(),cs=t("h3"),Fl=t("a"),io=i("grid items"),Fa=n(),le=new E(!1),ee=n(),fs=t("h4"),nl=t("a"),co=i("align items inside cells"),na=n(),ae=new E(!1),oe=n(),te=new E(!1),pe=n(),ys=t("h3"),rl=t("a"),fo=i("fr"),ra=n(),L=t("ul"),il=t("li"),Fe=t("code"),yo=i("1fr"),vo=i(":\u81EA\u52A8\u586B\u5145\u5269\u4F59\u7A7A\u95F4"),Eo=n(),ne=t("li"),Do=i("2:1:1:1 \u7684\u56DB\u5217"),ia=n(),re=new E(!1),ie=n(),vs=t("h3"),cl=t("a"),uo=i("implicit row"),ca=n(),fl=t("p"),mo=i("\u6240\u5B9A\u4E49\u7684\u7A7A\u95F4\u88AB\u7528\u5B8C\u540E\u591A\u51FA\u6765\u7684\u5217"),this.h()},l(s){y=p(s,"P",{});var e=F(y);x=c(e,"\u8BFE\u7A0B\uFF1A"),u=p(e,"A",{href:!0,rel:!0,target:!0});var Bo=F(u);P=c(Bo,"Build Responsive Real-World Websites with HTML and CSS"),Bo.forEach(l),e.forEach(l),v=r(s),D=p(s,"H2",{id:!0});var $o=F(D);k=p($o,"A",{href:!0});var xo=F(k);Da=c(xo,"Overview"),xo.forEach(l),$o.forEach(l),ce=r(s),ds=p(s,"P",{});var wo=F(ds);_(S.$$.fragment,wo),wo.forEach(l),fe=r(s),O=p(s,"H2",{id:!0});var ko=F(O);Ds=p(ko,"A",{href:!0});var bo=F(Ds);ua=c(bo,"Box-sizing"),bo.forEach(l),ko.forEach(l),ye=r(s),us=p(s,"P",{});var Ao=F(us);_(q.$$.fragment,Ao),Ao.forEach(l),ve=r(s),ms=p(s,"BLOCKQUOTE",{});var Ho=F(ms);yl=p(Ho,"P",{});var Lo=F(yl);ma=c(Lo,"\u672A\u5B9A\u4E49\u4E4B\u524D\uFF1Acontent-box"),Lo.forEach(l),Ho.forEach(l),Ee=r(s),I=p(s,"H3",{id:!0});var Po=F(I);_s=p(Po,"A",{href:!0});var So=F(_s);_a=c(So,"reset"),So.forEach(l),Po.forEach(l),de=r(s),vl=d(s,!1),El=r(s),T=p(s,"H2",{id:!0});var Oo=F(T);Cs=p(Oo,"A",{href:!0});var qo=F(Cs);Ca=c(qo,"Float Layout"),qo.forEach(l),Oo.forEach(l),De=r(s),b=p(s,"UL",{});var ya=F(b);dl=p(ya,"LI",{});var Io=F(dl);ha=c(Io,"\u6D6E\u52A8\u5728\u9875\u9762\u4E4B\u4E0A\uFF0C\u5BF9\u5468\u56F4\u5143\u7D20\u6CA1\u6709\u5F71\u54CD"),Io.forEach(l),Ba=r(ya),Dl=p(ya,"LI",{});var To=F(Dl);$a=c(To,"\u73B0\u5728\u5F88\u5C11\u7528\u4E86"),To.forEach(l),ya.forEach(l),ue=r(s),U=p(s,"H3",{id:!0});var Uo=F(U);hs=p(Uo,"A",{href:!0});var Go=F(hs);xa=c(Go,"left"),Go.forEach(l),Uo.forEach(l),me=r(s),Bs=p(s,"UL",{});var jo=F(Bs);ul=p(jo,"LI",{});var Qo=F(ul);wa=c(Qo,"\u6D6E\u52A8\u5230\u9875\u9762\u5DE6\u8FB9"),Qo.forEach(l),jo.forEach(l),_e=r(s),$s=p(s,"P",{});var Vo=F($s);_(G.$$.fragment,Vo),Vo.forEach(l),Ce=r(s),ml=d(s,!1),_l=r(s),xs=p(s,"BLOCKQUOTE",{});var zo=F(xs);Cl=p(zo,"P",{});var No=F(Cl);ka=c(No,"\u6B64\u65F6\u56FE\u7247\u548C\u6587\u672C\u4E0D\u5728\u540C\u4E00\u4E2A\u5C42\u9762\u4E0A"),No.forEach(l),zo.forEach(l),he=r(s),j=p(s,"H3",{id:!0});var Ko=F(j);ws=p(Ko,"A",{href:!0});var Zo=F(ws);ba=c(Zo,"right"),Zo.forEach(l),Ko.forEach(l),Be=r(s),ks=p(s,"BLOCKQUOTE",{});var Wo=F(ks);hl=p(Wo,"P",{});var Ro=F(hl);Aa=c(Ro,"\u6D6E\u52A8\u5230\u9875\u9762\u53F3\u8FB9"),Ro.forEach(l),Wo.forEach(l),$e=r(s),bs=p(s,"P",{});var Xo=F(bs);_(Q.$$.fragment,Xo),Xo.forEach(l),xe=r(s),Bl=d(s,!1),$l=r(s),V=p(s,"H3",{id:!0});var Jo=F(V);As=p(Jo,"A",{href:!0});var Mo=F(As);Ha=c(Mo,"ABSOLUTE POSITIONING VS. FLOATS"),Mo.forEach(l),Jo.forEach(l),we=r(s),Hs=p(s,"P",{});var Yo=F(Hs);_(z.$$.fragment,Yo),Yo.forEach(l),ke=r(s),N=p(s,"H3",{id:!0});var go=F(N);Ls=p(go,"A",{href:!0});var st=F(Ls);La=c(st,"Clear Float"),st.forEach(l),go.forEach(l),be=r(s),A=p(s,"UL",{});var va=F(A);xl=p(va,"LI",{});var lt=F(xl);Pa=c(lt,"\u5F53\u6CA1\u6709\u5176\u4ED6\u5143\u7D20\u53EF\u4EE5 clear float \u65F6\uFF0C\u5728\u5176\u540E\u65B0\u5EFA\u4E00\u4E2A\u5143\u7D20\u8BBE\u7F6E clear"),lt.forEach(l),Sa=r(va),wl=p(va,"LI",{});var et=F(wl);Oa=c(et,"\u5F53\u5B58\u5728\u9700\u8981\u6E05\u9664\u7684\u5143\u7D20\u65F6\uFF0C\u76F4\u63A5\u5728\u8BE5\u5143\u7D20\u4E0A\u6E05\u9664"),et.forEach(l),va.forEach(l),Ae=r(s),K=p(s,"H4",{id:!0});var at=F(K);Ps=p(at,"A",{href:!0});var ot=F(Ps);qa=c(ot,"\u65B9\u6CD5 1: empty div"),ot.forEach(l),at.forEach(l),He=r(s),H=p(s,"P",{});var Ea=F(H);Ia=c(Ea,"\u4F7F\u7528\u4E00\u4E2A\u5E76\u5217\u7684\u7A7A"),kl=p(Ea,"CODE",{});var tt=F(kl);Ta=c(tt,"<div>"),tt.forEach(l),Ua=c(Ea,"\u5143\u7D20\u6765\u6E05\u9664"),Ea.forEach(l),Le=r(s),bl=d(s,!1),Al=r(s),Hl=d(s,!1),Ll=r(s),Z=p(s,"H4",{id:!0});var pt=F(Z);Ss=p(pt,"A",{href:!0});var Ft=F(Ss);Ga=c(Ft,"\u65B9\u6CD5 2:clearfix hack"),Ft.forEach(l),pt.forEach(l),Pe=r(s),Os=p(s,"P",{});var nt=F(Os);ja=c(nt,"\u539F\u7406\u548C empty div \u7684\u65B9\u5F0F\u4E00\u6837\uFF0C\u4F46\u66F4\u7B80\u5355\uFF0C\u5229\u7528 pseudo element \u5728 parent element \u540E\u589E\u52A0\u4E00\u4E2A\u5143\u7D20"),nt.forEach(l),Se=r(s),Pl=d(s,!1),Sl=r(s),Ol=d(s,!1),ql=r(s),W=p(s,"H2",{id:!0});var rt=F(W);qs=p(rt,"A",{href:!0});var it=F(qs);Qa=c(it,"Flexbox"),it.forEach(l),rt.forEach(l),Oe=r(s),Is=p(s,"P",{});var ct=F(Is);_(R.$$.fragment,ct),ct.forEach(l),qe=r(s),Ts=p(s,"P",{});var ft=F(Ts);_(X.$$.fragment,ft),ft.forEach(l),Ie=r(s),Us=p(s,"BLOCKQUOTE",{});var yt=F(Us);Il=p(yt,"P",{});var vt=F(Il);Va=c(vt,"\u52A0\u7C97\u5B57\u4F53\u4E3A\u9ED8\u8BA4\u72B6\u6001"),vt.forEach(l),yt.forEach(l),Te=r(s),Tl=d(s,!1),Ul=r(s),J=p(s,"H3",{id:!0});var Et=F(J);Gs=p(Et,"A",{href:!0});var dt=F(Gs);za=c(dt,"Flex container"),dt.forEach(l),Et.forEach(l),Ue=r(s),js=p(s,"UL",{});var Dt=F(js);Gl=p(Dt,"LI",{});var ut=F(Gl);Na=c(ut,"flex container takes the height of the tallest items"),ut.forEach(l),Dt.forEach(l),Ge=r(s),Qs=p(s,"P",{});var mt=F(Qs);Ka=c(mt,"\u5E38\u7528\uFF1A"),mt.forEach(l),je=r(s),jl=d(s,!1),Ql=r(s),M=p(s,"H3",{id:!0});var _t=F(M);Vs=p(_t,"A",{href:!0});var Ct=F(Vs);Za=c(Ct,"Flex items"),Ct.forEach(l),_t.forEach(l),Qe=r(s),Vl=d(s,!1),zl=r(s),Y=p(s,"H3",{id:!0});var ht=F(Y);zs=p(ht,"A",{href:!0});var Bt=F(zs);Wa=c(Bt,"Propetities"),Bt.forEach(l),ht.forEach(l),Ve=r(s),g=p(s,"H4",{id:!0});var $t=F(g);Ns=p($t,"A",{href:!0});var xt=F(Ns);Ra=c(xt,"order"),xt.forEach(l),$t.forEach(l),ze=r(s),Ks=p(s,"P",{});var wt=F(Ks);Xa=c(wt,"\u6570\u5B57\u8D8A\u5927\u8D8A\u9760\u540E"),wt.forEach(l),Ne=r(s),ss=p(s,"H4",{id:!0});var kt=F(ss);Zs=p(kt,"A",{href:!0});var bt=F(Zs);Ja=c(bt,"flex-grow"),bt.forEach(l),kt.forEach(l),Ke=r(s),Ws=p(s,"P",{});var At=F(Ws);Ma=c(At,"\u6570\u5B57\u8D8A\u5927\u5360\u6BD4\u8D8A\u5927"),At.forEach(l),Ze=r(s),ls=p(s,"H4",{id:!0});var Ht=F(ls);Rs=p(Ht,"A",{href:!0});var Lt=F(Rs);Ya=c(Lt,"flex-basis"),Lt.forEach(l),Ht.forEach(l),We=r(s),Xs=p(s,"P",{});var Pt=F(Xs);ga=c(Pt,"item\u2019s width"),Pt.forEach(l),Re=r(s),es=p(s,"H4",{id:!0});var St=F(es);Js=p(St,"A",{href:!0});var Ot=F(Js);so=c(Ot,"shorthand"),Ot.forEach(l),St.forEach(l),Xe=r(s),as=p(s,"P",{});var _o=F(as);Nl=p(_o,"CODE",{});var qt=F(Nl);lo=c(qt,"flex:1"),qt.forEach(l),eo=c(_o," ="),_o.forEach(l),Je=r(s),Kl=d(s,!1),Zl=r(s),os=p(s,"H2",{id:!0});var It=F(os);Ms=p(It,"A",{href:!0});var Tt=F(Ms);ao=c(Tt,"CSS Grid"),Tt.forEach(l),It.forEach(l),Me=r(s),Ys=p(s,"P",{});var Ut=F(Ys);_(ts.$$.fragment,Ut),Ut.forEach(l),Ye=r(s),gs=p(s,"P",{});var Gt=F(gs);_(ps.$$.fragment,Gt),Gt.forEach(l),ge=r(s),sl=p(s,"P",{});var jt=F(sl);_(Fs.$$.fragment,jt),jt.forEach(l),sa=r(s),ns=p(s,"H3",{id:!0});var Qt=F(ns);ll=p(Qt,"A",{href:!0});var Vt=F(ll);oo=c(Vt,"grid container"),Vt.forEach(l),Qt.forEach(l),la=r(s),Wl=d(s,!1),Rl=r(s),el=p(s,"BLOCKQUOTE",{});var zt=F(el);Xl=p(zt,"P",{});var Nt=F(Xl);to=c(Nt,"\u901A\u5E38\u4E0D\u5B9A\u4E49 rows"),Nt.forEach(l),zt.forEach(l),ea=r(s),rs=p(s,"H4",{id:!0});var Kt=F(rs);al=p(Kt,"A",{href:!0});var Zt=F(al);po=c(Zt,"Gap"),Zt.forEach(l),Kt.forEach(l),aa=r(s),ol=p(s,"P",{});var Wt=F(ol);Fo=c(Wt,"\u7528 gap \u800C\u4E0D\u662F margin:"),Wt.forEach(l),oa=r(s),Jl=d(s,!1),Ml=r(s),is=p(s,"H4",{id:!0});var Rt=F(is);tl=p(Rt,"A",{href:!0});var Xt=F(tl);no=c(Xt,"align tracks inside containers"),Xt.forEach(l),Rt.forEach(l),ta=r(s),pl=p(s,"BLOCKQUOTE",{});var Jt=F(pl);Yl=p(Jt,"P",{});var Mt=F(Yl);ro=c(Mt,"when the content is smaller than the grid"),Mt.forEach(l),Jt.forEach(l),pa=r(s),gl=d(s,!1),se=r(s),cs=p(s,"H3",{id:!0});var Yt=F(cs);Fl=p(Yt,"A",{href:!0});var gt=F(Fl);io=c(gt,"grid items"),gt.forEach(l),Yt.forEach(l),Fa=r(s),le=d(s,!1),ee=r(s),fs=p(s,"H4",{id:!0});var sp=F(fs);nl=p(sp,"A",{href:!0});var lp=F(nl);co=c(lp,"align items inside cells"),lp.forEach(l),sp.forEach(l),na=r(s),ae=d(s,!1),oe=r(s),te=d(s,!1),pe=r(s),ys=p(s,"H3",{id:!0});var ep=F(ys);rl=p(ep,"A",{href:!0});var ap=F(rl);fo=c(ap,"fr"),ap.forEach(l),ep.forEach(l),ra=r(s),L=p(s,"UL",{});var da=F(L);il=p(da,"LI",{});var Co=F(il);Fe=p(Co,"CODE",{});var op=F(Fe);yo=c(op,"1fr"),op.forEach(l),vo=c(Co,":\u81EA\u52A8\u586B\u5145\u5269\u4F59\u7A7A\u95F4"),Co.forEach(l),Eo=r(da),ne=p(da,"LI",{});var tp=F(ne);Do=c(tp,"2:1:1:1 \u7684\u56DB\u5217"),tp.forEach(l),da.forEach(l),ia=r(s),re=d(s,!1),ie=r(s),vs=p(s,"H3",{id:!0});var pp=F(vs);cl=p(pp,"A",{href:!0});var Fp=F(cl);uo=c(Fp,"implicit row"),Fp.forEach(l),pp.forEach(l),ca=r(s),fl=p(s,"P",{});var np=F(fl);mo=c(np,"\u6240\u5B9A\u4E49\u7684\u7A7A\u95F4\u88AB\u7528\u5B8C\u540E\u591A\u51FA\u6765\u7684\u5217"),np.forEach(l),this.h()},h(){f(u,"href","https://www.udemy.com/course/design-and-develop-a-killer-website-with-html5-and-css3/"),f(u,"rel","nofollow noopener noreferrer external"),f(u,"target","_blank"),f(k,"href","#overview"),f(D,"id","overview"),f(Ds,"href","#box-sizing"),f(O,"id","box-sizing"),f(_s,"href","#reset"),f(I,"id","reset"),vl.a=El,f(Cs,"href","#float-layout"),f(T,"id","float-layout"),f(hs,"href","#left"),f(U,"id","left"),ml.a=_l,f(ws,"href","#right"),f(j,"id","right"),Bl.a=$l,f(As,"href","#absolute-positioning-vs-floats"),f(V,"id","absolute-positioning-vs-floats"),f(Ls,"href","#clear-float"),f(N,"id","clear-float"),f(Ps,"href","#\u65B9\u6CD5-1-empty-div"),f(K,"id","\u65B9\u6CD5-1-empty-div"),bl.a=Al,Hl.a=Ll,f(Ss,"href","#\u65B9\u6CD5-2clearfix-hack"),f(Z,"id","\u65B9\u6CD5-2clearfix-hack"),Pl.a=Sl,Ol.a=ql,f(qs,"href","#flexbox"),f(W,"id","flexbox"),Tl.a=Ul,f(Gs,"href","#flex-container"),f(J,"id","flex-container"),jl.a=Ql,f(Vs,"href","#flex-items"),f(M,"id","flex-items"),Vl.a=zl,f(zs,"href","#propetities"),f(Y,"id","propetities"),f(Ns,"href","#order"),f(g,"id","order"),f(Zs,"href","#flex-grow"),f(ss,"id","flex-grow"),f(Rs,"href","#flex-basis"),f(ls,"id","flex-basis"),f(Js,"href","#shorthand"),f(es,"id","shorthand"),Kl.a=Zl,f(Ms,"href","#css-grid"),f(os,"id","css-grid"),f(ll,"href","#grid-container"),f(ns,"id","grid-container"),Wl.a=Rl,f(al,"href","#gap"),f(rs,"id","gap"),Jl.a=Ml,f(tl,"href","#align-tracks-inside-containers"),f(is,"id","align-tracks-inside-containers"),gl.a=se,f(Fl,"href","#grid-items"),f(cs,"id","grid-items"),le.a=ee,f(nl,"href","#align-items-inside-cells"),f(fs,"id","align-items-inside-cells"),ae.a=oe,te.a=pe,f(rl,"href","#fr"),f(ys,"id","fr"),re.a=ie,f(cl,"href","#implicit-row"),f(vs,"id","implicit-row")},m(s,e){a(s,y,e),o(y,x),o(y,u),o(u,P),a(s,v,e),a(s,D,e),o(D,k),o(k,Da),a(s,ce,e),a(s,ds,e),C(S,ds,null),a(s,fe,e),a(s,O,e),o(O,Ds),o(Ds,ua),a(s,ye,e),a(s,us,e),C(q,us,null),a(s,ve,e),a(s,ms,e),o(ms,yl),o(yl,ma),a(s,Ee,e),a(s,I,e),o(I,_s),o(_s,_a),a(s,de,e),vl.m(fp,s,e),a(s,El,e),a(s,T,e),o(T,Cs),o(Cs,Ca),a(s,De,e),a(s,b,e),o(b,dl),o(dl,ha),o(b,Ba),o(b,Dl),o(Dl,$a),a(s,ue,e),a(s,U,e),o(U,hs),o(hs,xa),a(s,me,e),a(s,Bs,e),o(Bs,ul),o(ul,wa),a(s,_e,e),a(s,$s,e),C(G,$s,null),a(s,Ce,e),ml.m(yp,s,e),a(s,_l,e),a(s,xs,e),o(xs,Cl),o(Cl,ka),a(s,he,e),a(s,j,e),o(j,ws),o(ws,ba),a(s,Be,e),a(s,ks,e),o(ks,hl),o(hl,Aa),a(s,$e,e),a(s,bs,e),C(Q,bs,null),a(s,xe,e),Bl.m(vp,s,e),a(s,$l,e),a(s,V,e),o(V,As),o(As,Ha),a(s,we,e),a(s,Hs,e),C(z,Hs,null),a(s,ke,e),a(s,N,e),o(N,Ls),o(Ls,La),a(s,be,e),a(s,A,e),o(A,xl),o(xl,Pa),o(A,Sa),o(A,wl),o(wl,Oa),a(s,Ae,e),a(s,K,e),o(K,Ps),o(Ps,qa),a(s,He,e),a(s,H,e),o(H,Ia),o(H,kl),o(kl,Ta),o(H,Ua),a(s,Le,e),bl.m(Ep,s,e),a(s,Al,e),Hl.m(dp,s,e),a(s,Ll,e),a(s,Z,e),o(Z,Ss),o(Ss,Ga),a(s,Pe,e),a(s,Os,e),o(Os,ja),a(s,Se,e),Pl.m(Dp,s,e),a(s,Sl,e),Ol.m(up,s,e),a(s,ql,e),a(s,W,e),o(W,qs),o(qs,Qa),a(s,Oe,e),a(s,Is,e),C(R,Is,null),a(s,qe,e),a(s,Ts,e),C(X,Ts,null),a(s,Ie,e),a(s,Us,e),o(Us,Il),o(Il,Va),a(s,Te,e),Tl.m(mp,s,e),a(s,Ul,e),a(s,J,e),o(J,Gs),o(Gs,za),a(s,Ue,e),a(s,js,e),o(js,Gl),o(Gl,Na),a(s,Ge,e),a(s,Qs,e),o(Qs,Ka),a(s,je,e),jl.m(_p,s,e),a(s,Ql,e),a(s,M,e),o(M,Vs),o(Vs,Za),a(s,Qe,e),Vl.m(Cp,s,e),a(s,zl,e),a(s,Y,e),o(Y,zs),o(zs,Wa),a(s,Ve,e),a(s,g,e),o(g,Ns),o(Ns,Ra),a(s,ze,e),a(s,Ks,e),o(Ks,Xa),a(s,Ne,e),a(s,ss,e),o(ss,Zs),o(Zs,Ja),a(s,Ke,e),a(s,Ws,e),o(Ws,Ma),a(s,Ze,e),a(s,ls,e),o(ls,Rs),o(Rs,Ya),a(s,We,e),a(s,Xs,e),o(Xs,ga),a(s,Re,e),a(s,es,e),o(es,Js),o(Js,so),a(s,Xe,e),a(s,as,e),o(as,Nl),o(Nl,lo),o(as,eo),a(s,Je,e),Kl.m(hp,s,e),a(s,Zl,e),a(s,os,e),o(os,Ms),o(Ms,ao),a(s,Me,e),a(s,Ys,e),C(ts,Ys,null),a(s,Ye,e),a(s,gs,e),C(ps,gs,null),a(s,ge,e),a(s,sl,e),C(Fs,sl,null),a(s,sa,e),a(s,ns,e),o(ns,ll),o(ll,oo),a(s,la,e),Wl.m(Bp,s,e),a(s,Rl,e),a(s,el,e),o(el,Xl),o(Xl,to),a(s,ea,e),a(s,rs,e),o(rs,al),o(al,po),a(s,aa,e),a(s,ol,e),o(ol,Fo),a(s,oa,e),Jl.m($p,s,e),a(s,Ml,e),a(s,is,e),o(is,tl),o(tl,no),a(s,ta,e),a(s,pl,e),o(pl,Yl),o(Yl,ro),a(s,pa,e),gl.m(xp,s,e),a(s,se,e),a(s,cs,e),o(cs,Fl),o(Fl,io),a(s,Fa,e),le.m(wp,s,e),a(s,ee,e),a(s,fs,e),o(fs,nl),o(nl,co),a(s,na,e),ae.m(kp,s,e),a(s,oe,e),te.m(bp,s,e),a(s,pe,e),a(s,ys,e),o(ys,rl),o(rl,fo),a(s,ra,e),a(s,L,e),o(L,il),o(il,Fe),o(Fe,yo),o(il,vo),o(L,Eo),o(L,ne),o(ne,Do),a(s,ia,e),re.m(Ap,s,e),a(s,ie,e),a(s,vs,e),o(vs,cl),o(cl,uo),a(s,ca,e),a(s,fl,e),o(fl,mo),fa=!0},p:Op,i(s){fa||(h(S.$$.fragment,s),h(q.$$.fragment,s),h(G.$$.fragment,s),h(Q.$$.fragment,s),h(z.$$.fragment,s),h(R.$$.fragment,s),h(X.$$.fragment,s),h(ts.$$.fragment,s),h(ps.$$.fragment,s),h(Fs.$$.fragment,s),fa=!0)},o(s){B(S.$$.fragment,s),B(q.$$.fragment,s),B(G.$$.fragment,s),B(Q.$$.fragment,s),B(z.$$.fragment,s),B(R.$$.fragment,s),B(X.$$.fragment,s),B(ts.$$.fragment,s),B(ps.$$.fragment,s),B(Fs.$$.fragment,s),fa=!1},d(s){s&&l(y),s&&l(v),s&&l(D),s&&l(ce),s&&l(ds),$(S),s&&l(fe),s&&l(O),s&&l(ye),s&&l(us),$(q),s&&l(ve),s&&l(ms),s&&l(Ee),s&&l(I),s&&l(de),s&&vl.d(),s&&l(El),s&&l(T),s&&l(De),s&&l(b),s&&l(ue),s&&l(U),s&&l(me),s&&l(Bs),s&&l(_e),s&&l($s),$(G),s&&l(Ce),s&&ml.d(),s&&l(_l),s&&l(xs),s&&l(he),s&&l(j),s&&l(Be),s&&l(ks),s&&l($e),s&&l(bs),$(Q),s&&l(xe),s&&Bl.d(),s&&l($l),s&&l(V),s&&l(we),s&&l(Hs),$(z),s&&l(ke),s&&l(N),s&&l(be),s&&l(A),s&&l(Ae),s&&l(K),s&&l(He),s&&l(H),s&&l(Le),s&&bl.d(),s&&l(Al),s&&Hl.d(),s&&l(Ll),s&&l(Z),s&&l(Pe),s&&l(Os),s&&l(Se),s&&Pl.d(),s&&l(Sl),s&&Ol.d(),s&&l(ql),s&&l(W),s&&l(Oe),s&&l(Is),$(R),s&&l(qe),s&&l(Ts),$(X),s&&l(Ie),s&&l(Us),s&&l(Te),s&&Tl.d(),s&&l(Ul),s&&l(J),s&&l(Ue),s&&l(js),s&&l(Ge),s&&l(Qs),s&&l(je),s&&jl.d(),s&&l(Ql),s&&l(M),s&&l(Qe),s&&Vl.d(),s&&l(zl),s&&l(Y),s&&l(Ve),s&&l(g),s&&l(ze),s&&l(Ks),s&&l(Ne),s&&l(ss),s&&l(Ke),s&&l(Ws),s&&l(Ze),s&&l(ls),s&&l(We),s&&l(Xs),s&&l(Re),s&&l(es),s&&l(Xe),s&&l(as),s&&l(Je),s&&Kl.d(),s&&l(Zl),s&&l(os),s&&l(Me),s&&l(Ys),$(ts),s&&l(Ye),s&&l(gs),$(ps),s&&l(ge),s&&l(sl),$(Fs),s&&l(sa),s&&l(ns),s&&l(la),s&&Wl.d(),s&&l(Rl),s&&l(el),s&&l(ea),s&&l(rs),s&&l(aa),s&&l(ol),s&&l(oa),s&&Jl.d(),s&&l(Ml),s&&l(is),s&&l(ta),s&&l(pl),s&&l(pa),s&&gl.d(),s&&l(se),s&&l(cs),s&&l(Fa),s&&le.d(),s&&l(ee),s&&l(fs),s&&l(na),s&&ae.d(),s&&l(oe),s&&te.d(),s&&l(pe),s&&l(ys),s&&l(ra),s&&l(L),s&&l(ia),s&&re.d(),s&&l(ie),s&&l(vs),s&&l(ca),s&&l(fl)}}}function Tp(Es){let y,x;const u=[Es[0],cp];let P={$$slots:{default:[Ip]},$$scope:{ctx:Es}};for(let v=0;v<u.length;v+=1)P=ho(P,u[v]);return y=new qp({props:P}),{c(){m(y.$$.fragment)},l(v){_(y.$$.fragment,v)},m(v,D){C(y,v,D),x=!0},p(v,[D]){const k=D&1?Sp(u,[D&1&&rp(v[0]),D&0&&rp(cp)]):{};D&2&&(k.$$scope={dirty:D,ctx:v}),y.$set(k)},i(v){x||(h(y.$$.fragment,v),x=!0)},o(v){B(y.$$.fragment,v),x=!1},d(v){$(y,v)}}}const cp={title:"CSS \xB7 \u4E09\u79CD\u5E03\u5C40\u65B9\u5F0F",slug:"/css-layout.md",tags:["CSS"],created:"2022-01-13T10:07:00.000Z",summary:"Float / Flexbox / Grid /",lastmod:"2022-05-07T05:30:20.613Z",path:"/css-layout",toc:[{depth:2,title:"Overview",slug:"overview"},{depth:2,title:"Box-sizing",slug:"box-sizing"},{depth:3,title:"reset",slug:"reset"},{depth:2,title:"Float Layout",slug:"float-layout"},{depth:3,title:"left",slug:"left"},{depth:3,title:"right",slug:"right"},{depth:3,title:"ABSOLUTE POSITIONING VS. FLOATS",slug:"absolute-positioning-vs-floats"},{depth:3,title:"Clear Float",slug:"clear-float"},{depth:4,title:"\u65B9\u6CD5 1: empty div",slug:"\u65B9\u6CD5-1-empty-div"},{depth:4,title:"\u65B9\u6CD5 2:clearfix hack",slug:"\u65B9\u6CD5-2clearfix-hack"},{depth:2,title:"Flexbox",slug:"flexbox"},{depth:3,title:"Flex container",slug:"flex-container"},{depth:3,title:"Flex items",slug:"flex-items"},{depth:3,title:"Propetities",slug:"propetities"},{depth:4,title:"order",slug:"order"},{depth:4,title:"flex-grow",slug:"flex-grow"},{depth:4,title:"flex-basis",slug:"flex-basis"},{depth:4,title:"shorthand",slug:"shorthand"},{depth:2,title:"CSS Grid",slug:"css-grid"},{depth:3,title:"grid container",slug:"grid-container"},{depth:4,title:"Gap",slug:"gap"},{depth:4,title:"align tracks inside containers",slug:"align-tracks-inside-containers"},{depth:3,title:"grid items",slug:"grid-items"},{depth:4,title:"align items inside cells",slug:"align-items-inside-cells"},{depth:3,title:"fr",slug:"fr"},{depth:3,title:"implicit row",slug:"implicit-row"}],updated:"2022-08-06T10:49:54.807Z"};function Up(Es,y,x){return Es.$$set=u=>{x(0,y=ho(ho({},y),ip(u)))},y=ip(y),[y]}class Xp extends Hp{constructor(y){super(),Lp(this,y,Up,Tp,Pp,{})}}export{Xp as default,cp as metadata};
|