[{"data":1,"prerenderedAt":4481},["ShallowReactive",2],{"blog:\u002Fblog\u002Fcss\u002Fnote":3},{"id":4,"title":5,"author":6,"body":7,"category":4467,"date":4468,"description":4469,"draft":4470,"extension":4471,"image":4472,"meta":4473,"navigation":1389,"path":4474,"seo":4475,"series":4472,"seriesOrder":4472,"seriesTitle":4472,"stem":4476,"tags":4477,"updatedAt":4479,"__hash__":4480},"blog\u002Fblog\u002Fcss\u002Fnote.md","CSS 筆記","charles",{"type":8,"value":9,"toc":4444},"minimark",[10,14,181,191,196,200,444,448,1265,1269,1837,1841,2140,2144,2147,2155,2158,2174,2177,2389,2393,2398,2407,2817,2821,2848,2854,2858,2863,2968,2972,2977,3008,3012,3089,3097,3102,3108,3112,3135,3139,3144,3279,3283,3288,3293,3476,3480,3485,3773,3777,3782,3785,3816,3819,4044,4049,4053,4058,4067,4070,4441],[11,12,13],"h2",{"id":13},"基本框架",[15,16,17,65,131],"ul",{},[18,19,20,21],"li",{},"Inline Style",[22,23,28],"pre",{"className":24,"code":25,"language":26,"meta":27,"style":27},"language-css shiki shiki-themes material-theme-lighter github-light github-dark","\u003Ch1 style=\"text-align: center; color: red\">Test\u003C\u002Fh1>\n","css","",[29,30,31],"code",{"__ignoreMap":27},[32,33,36,40,44,47,50,53,57,60,62],"span",{"class":34,"line":35},"line",1,[32,37,39],{"class":38},"su5hD","\u003C",[32,41,43],{"class":42},"s83vy","h1",[32,45,46],{"class":38}," style=\"",[32,48,49],{"class":42},"text-align",[32,51,52],{"class":38},": center; color: red\"",[32,54,56],{"class":55},"smGrS",">",[32,58,59],{"class":38},"Test\u003C\u002F",[32,61,43],{"class":42},[32,63,64],{"class":55},">\n",[18,66,67,68],{},"Internal Style Sheet",[22,69,71],{"className":24,"code":70,"language":26,"meta":27,"style":27},"\u003Chead>\n    \u003Cstyle>\n        #demo{ }\n    \u003C\u002Fstyle>\n\u003C\u002Fhead>\n",[29,72,73,82,93,111,121],{"__ignoreMap":27},[32,74,75,77,80],{"class":34,"line":35},[32,76,39],{"class":38},[32,78,79],{"class":42},"head",[32,81,64],{"class":55},[32,83,85,88,91],{"class":34,"line":84},2,[32,86,87],{"class":38},"    \u003C",[32,89,90],{"class":42},"style",[32,92,64],{"class":55},[32,94,96,100,104,108],{"class":34,"line":95},3,[32,97,99],{"class":98},"stp6e","        #",[32,101,103],{"class":102},"sPLZw","demo",[32,105,107],{"class":106},"sP7_E","{",[32,109,110],{"class":106}," }\n",[32,112,114,117,119],{"class":34,"line":113},4,[32,115,116],{"class":38},"    \u003C\u002F",[32,118,90],{"class":42},[32,120,64],{"class":55},[32,122,124,127,129],{"class":34,"line":123},5,[32,125,126],{"class":38},"\u003C\u002F",[32,128,79],{"class":42},[32,130,64],{"class":55},[18,132,133,134],{},"External style sheet",[22,135,139],{"className":136,"code":137,"language":138,"meta":27,"style":27},"language-html shiki shiki-themes material-theme-lighter github-light github-dark","\u003Clink rel=\"stylesheet\" href=\"style.css\" \u002F>\n","html",[29,140,141],{"__ignoreMap":27},[32,142,143,145,149,153,156,160,164,166,169,171,173,176,178],{"class":34,"line":35},[32,144,39],{"class":106},[32,146,148],{"class":147},"sQzsp","link",[32,150,152],{"class":151},"s9AJx"," rel",[32,154,155],{"class":106},"=",[32,157,159],{"class":158},"sjJ54","\"",[32,161,163],{"class":162},"s_sjI","stylesheet",[32,165,159],{"class":158},[32,167,168],{"class":151}," href",[32,170,155],{"class":106},[32,172,159],{"class":158},[32,174,175],{"class":162},"style.css",[32,177,159],{"class":158},[32,179,180],{"class":106}," \u002F>\n",[182,183,184],"blockquote",{},[185,186,187],"p",{},[188,189,190],"strong",{},"優先權 Inline Style ＞ Internal Style ＞ External Style",[182,192,193],{},[185,194,195],{},"External 最好維護，最常見，適合多個 html 頁面存取同一個 css file\nInternal 適合 css 只跟單一 html 的相依性較高時使用",[11,197,199],{"id":198},"color","Color",[15,201,202,242,300,352,387],{},[18,203,204,205],{},"keyword\n",[22,206,208],{"className":24,"code":207,"language":26,"meta":27,"style":27},".demo {\n  color: red;\n}\n",[29,209,210,221,237],{"__ignoreMap":27},[32,211,212,215,218],{"class":34,"line":35},[32,213,214],{"class":98},".",[32,216,103],{"class":217},"sbgvK",[32,219,220],{"class":106}," {\n",[32,222,223,227,230,234],{"class":34,"line":84},[32,224,226],{"class":225},"soE4H","  color",[32,228,229],{"class":106},":",[32,231,233],{"class":232},"s_hVV"," red",[32,235,236],{"class":106},";\n",[32,238,239],{"class":34,"line":95},[32,240,241],{"class":106},"}\n",[18,243,244,245,292],{},"rgb\n",[22,246,248],{"className":24,"code":247,"language":26,"meta":27,"style":27},".demo {\n  color: rgb(100, 100, 100);\n}\n",[29,249,250,258,288],{"__ignoreMap":27},[32,251,252,254,256],{"class":34,"line":35},[32,253,214],{"class":98},[32,255,103],{"class":217},[32,257,220],{"class":106},[32,259,260,262,264,268,271,275,278,281,283,285],{"class":34,"line":84},[32,261,226],{"class":225},[32,263,229],{"class":106},[32,265,267],{"class":266},"sptTA"," rgb",[32,269,270],{"class":106},"(",[32,272,274],{"class":273},"srdBf","100",[32,276,277],{"class":106},",",[32,279,280],{"class":273}," 100",[32,282,277],{"class":106},[32,284,280],{"class":273},[32,286,287],{"class":106},");\n",[32,289,290],{"class":34,"line":95},[32,291,241],{"class":106},[182,293,294],{},[185,295,296,297],{},"value 為 ",[29,298,299],{},"0 ~ 255",[18,301,302,303,347],{},"rgba\n",[22,304,306],{"className":24,"code":305,"language":26,"meta":27,"style":27},".demo {\n  color: rgb(100, 100, 100, 0.5);\n}\n",[29,307,308,316,343],{"__ignoreMap":27},[32,309,310,312,314],{"class":34,"line":35},[32,311,214],{"class":98},[32,313,103],{"class":217},[32,315,220],{"class":106},[32,317,318,320,322,324,326,328,330,332,334,336,338,341],{"class":34,"line":84},[32,319,226],{"class":225},[32,321,229],{"class":106},[32,323,267],{"class":266},[32,325,270],{"class":106},[32,327,274],{"class":273},[32,329,277],{"class":106},[32,331,280],{"class":273},[32,333,277],{"class":106},[32,335,280],{"class":273},[32,337,277],{"class":106},[32,339,340],{"class":273}," 0.5",[32,342,287],{"class":106},[32,344,345],{"class":34,"line":95},[32,346,241],{"class":106},[182,348,349],{},[185,350,351],{},"a 為 alpha，設定透明度 0 (透明) ~ 1 (不透明)",[18,353,354,355],{},"hex\n",[22,356,358],{"className":24,"code":357,"language":26,"meta":27,"style":27},".demo {\n  color: #1f6e6f;\n}\n",[29,359,360,368,383],{"__ignoreMap":27},[32,361,362,364,366],{"class":34,"line":35},[32,363,214],{"class":98},[32,365,103],{"class":217},[32,367,220],{"class":106},[32,369,370,372,374,378,381],{"class":34,"line":84},[32,371,226],{"class":225},[32,373,229],{"class":106},[32,375,377],{"class":376},"s39Yj"," #",[32,379,380],{"class":232},"1f6e6f",[32,382,236],{"class":106},[32,384,385],{"class":34,"line":95},[32,386,241],{"class":106},[18,388,389,390,439],{},"HSL\n",[22,391,393],{"className":24,"code":392,"language":26,"meta":27,"style":27},".demo {\n  color: hsl(131, 45%, 62%);\n}\n",[29,394,395,403,435],{"__ignoreMap":27},[32,396,397,399,401],{"class":34,"line":35},[32,398,214],{"class":98},[32,400,103],{"class":217},[32,402,220],{"class":106},[32,404,405,407,409,412,414,417,419,422,426,428,431,433],{"class":34,"line":84},[32,406,226],{"class":225},[32,408,229],{"class":106},[32,410,411],{"class":266}," hsl",[32,413,270],{"class":106},[32,415,416],{"class":273},"131",[32,418,277],{"class":106},[32,420,421],{"class":273}," 45",[32,423,425],{"class":424},"sw1J6","%",[32,427,277],{"class":106},[32,429,430],{"class":273}," 62",[32,432,425],{"class":424},[32,434,287],{"class":106},[32,436,437],{"class":34,"line":95},[32,438,241],{"class":106},[182,440,441],{},[185,442,443],{},"Hue   \u002F Saturation \u002F Lightness (色相 \u002F 飽和度 \u002F 亮度)\n0~359 \u002F  0~100%  \u002F   0~100%",[11,445,447],{"id":446},"selectors","Selectors",[15,449,450,487,520,592,666,738,793,904,1001,1109,1166,1200],{},[18,451,452,453,456,457,482],{},"Universal  ",[29,454,455],{},"*"," (全域)",[22,458,460],{"className":24,"code":459,"language":26,"meta":27,"style":27},"* {\n  color: red;\n}\n",[29,461,462,468,478],{"__ignoreMap":27},[32,463,464,466],{"class":34,"line":35},[32,465,455],{"class":42},[32,467,220],{"class":106},[32,469,470,472,474,476],{"class":34,"line":84},[32,471,226],{"class":225},[32,473,229],{"class":106},[32,475,233],{"class":232},[32,477,236],{"class":106},[32,479,480],{"class":34,"line":95},[32,481,241],{"class":106},[182,483,484],{},[185,485,486],{},"指定任何類型的 Html Element",[18,488,489,490,515],{},"Element",[22,491,493],{"className":24,"code":492,"language":26,"meta":27,"style":27},"h1 {\n  color: red;\n}\n",[29,494,495,501,511],{"__ignoreMap":27},[32,496,497,499],{"class":34,"line":35},[32,498,43],{"class":42},[32,500,220],{"class":106},[32,502,503,505,507,509],{"class":34,"line":84},[32,504,226],{"class":225},[32,506,229],{"class":106},[32,508,233],{"class":232},[32,510,236],{"class":106},[32,512,513],{"class":34,"line":95},[32,514,241],{"class":106},[182,516,517],{},[185,518,519],{},"指定特定名稱的 Html Element",[18,521,522,523,559,587],{},"ID",[22,524,526],{"className":136,"code":525,"language":138,"meta":27,"style":27},"\u003C!-- html -->\n\u003Cp id=\"first_paragraph\">\u003C\u002Fp>\n",[29,527,528,534],{"__ignoreMap":27},[32,529,530],{"class":34,"line":35},[32,531,533],{"class":532},"sutJx","\u003C!-- html -->\n",[32,535,536,538,540,543,545,547,550,552,555,557],{"class":34,"line":84},[32,537,39],{"class":106},[32,539,185],{"class":147},[32,541,542],{"class":151}," id",[32,544,155],{"class":106},[32,546,159],{"class":158},[32,548,549],{"class":162},"first_paragraph",[32,551,159],{"class":158},[32,553,554],{"class":106},">\u003C\u002F",[32,556,185],{"class":147},[32,558,64],{"class":106},[22,560,562],{"className":24,"code":561,"language":26,"meta":27,"style":27},"#first_paragraph {\n  color: red;\n}\n",[29,563,564,573,583],{"__ignoreMap":27},[32,565,566,569,571],{"class":34,"line":35},[32,567,568],{"class":98},"#",[32,570,549],{"class":102},[32,572,220],{"class":106},[32,574,575,577,579,581],{"class":34,"line":84},[32,576,226],{"class":225},[32,578,229],{"class":106},[32,580,233],{"class":232},[32,582,236],{"class":106},[32,584,585],{"class":34,"line":95},[32,586,241],{"class":106},[182,588,589],{},[185,590,591],{},"指定特定 ID 的 Html Element",[18,593,594,595,628,656,661],{},"Class",[22,596,598],{"className":136,"code":597,"language":138,"meta":27,"style":27},"\u003C!-- html -->\n\u003Cp class=\"blue_text\">\u003C\u002Fp>\n",[29,599,600,604],{"__ignoreMap":27},[32,601,602],{"class":34,"line":35},[32,603,533],{"class":532},[32,605,606,608,610,613,615,617,620,622,624,626],{"class":34,"line":84},[32,607,39],{"class":106},[32,609,185],{"class":147},[32,611,612],{"class":151}," class",[32,614,155],{"class":106},[32,616,159],{"class":158},[32,618,619],{"class":162},"blue_text",[32,621,159],{"class":158},[32,623,554],{"class":106},[32,625,185],{"class":147},[32,627,64],{"class":106},[22,629,631],{"className":24,"code":630,"language":26,"meta":27,"style":27},".blue_text {\n  color: blue;\n}\n",[29,632,633,641,652],{"__ignoreMap":27},[32,634,635,637,639],{"class":34,"line":35},[32,636,214],{"class":98},[32,638,619],{"class":217},[32,640,220],{"class":106},[32,642,643,645,647,650],{"class":34,"line":84},[32,644,226],{"class":225},[32,646,229],{"class":106},[32,648,649],{"class":232}," blue",[32,651,236],{"class":106},[32,653,654],{"class":34,"line":95},[32,655,241],{"class":106},[182,657,658],{},[185,659,660],{},"指定所有特定 class 的 Html Element",[182,662,663],{},[185,664,665],{},"ID     -> 獨一無二，一個 ID 只能被賦予一個 Element\nClass -> 可套用多個 Element",[18,667,668,669,699,733],{},"Element & Class 並用\nfds",[22,670,671],{"className":136,"code":597,"language":138,"meta":27,"style":27},[29,672,673,677],{"__ignoreMap":27},[32,674,675],{"class":34,"line":35},[32,676,533],{"class":532},[32,678,679,681,683,685,687,689,691,693,695,697],{"class":34,"line":84},[32,680,39],{"class":106},[32,682,185],{"class":147},[32,684,612],{"class":151},[32,686,155],{"class":106},[32,688,159],{"class":158},[32,690,619],{"class":162},[32,692,159],{"class":158},[32,694,554],{"class":106},[32,696,185],{"class":147},[32,698,64],{"class":106},[22,700,702],{"className":24,"code":701,"language":26,"meta":27,"style":27},"\u002F* css *\u002F\np.blue_text {\n  color: blue;\n}\n",[29,703,704,709,719,729],{"__ignoreMap":27},[32,705,706],{"class":34,"line":35},[32,707,708],{"class":532},"\u002F* css *\u002F\n",[32,710,711,713,715,717],{"class":34,"line":84},[32,712,185],{"class":42},[32,714,214],{"class":98},[32,716,619],{"class":217},[32,718,220],{"class":106},[32,720,721,723,725,727],{"class":34,"line":95},[32,722,226],{"class":225},[32,724,229],{"class":106},[32,726,649],{"class":232},[32,728,236],{"class":106},[32,730,731],{"class":34,"line":113},[32,732,241],{"class":106},[182,734,735],{},[185,736,737],{},"指定有 class 為 blue_text 的 p 標籤",[18,739,740,741,788],{},"Grouping (分組)",[22,742,744],{"className":24,"code":743,"language":26,"meta":27,"style":27},"h1,\nh2,\nh3,\nh4 {\n  color: red;\n}\n",[29,745,746,753,759,766,773,783],{"__ignoreMap":27},[32,747,748,750],{"class":34,"line":35},[32,749,43],{"class":42},[32,751,752],{"class":106},",\n",[32,754,755,757],{"class":34,"line":84},[32,756,11],{"class":42},[32,758,752],{"class":106},[32,760,761,764],{"class":34,"line":95},[32,762,763],{"class":42},"h3",[32,765,752],{"class":106},[32,767,768,771],{"class":34,"line":113},[32,769,770],{"class":42},"h4",[32,772,220],{"class":106},[32,774,775,777,779,781],{"class":34,"line":123},[32,776,226],{"class":225},[32,778,229],{"class":106},[32,780,233],{"class":232},[32,782,236],{"class":106},[32,784,786],{"class":34,"line":785},6,[32,787,241],{"class":106},[182,789,790],{},[185,791,792],{},"選取多個 Html Element，用逗號分隔",[18,794,795,796,863,899],{},"Descendant (子代、後裔)",[22,797,799],{"className":136,"code":798,"language":138,"meta":27,"style":27},"\u003C!-- html -->\n\u003Cdiv class=\"link1\">\n  \u003Ca href=\"https:\u002F\u002Fwww.google.com\">google首頁\u003C\u002Fa>\n\u003C\u002Fdiv>\n",[29,800,801,805,825,855],{"__ignoreMap":27},[32,802,803],{"class":34,"line":35},[32,804,533],{"class":532},[32,806,807,809,812,814,816,818,821,823],{"class":34,"line":84},[32,808,39],{"class":106},[32,810,811],{"class":147},"div",[32,813,612],{"class":151},[32,815,155],{"class":106},[32,817,159],{"class":158},[32,819,820],{"class":162},"link1",[32,822,159],{"class":158},[32,824,64],{"class":106},[32,826,827,830,833,835,837,839,842,844,846,849,851,853],{"class":34,"line":95},[32,828,829],{"class":106},"  \u003C",[32,831,832],{"class":147},"a",[32,834,168],{"class":151},[32,836,155],{"class":106},[32,838,159],{"class":158},[32,840,841],{"class":162},"https:\u002F\u002Fwww.google.com",[32,843,159],{"class":158},[32,845,56],{"class":106},[32,847,848],{"class":38},"google首頁",[32,850,126],{"class":106},[32,852,832],{"class":147},[32,854,64],{"class":106},[32,856,857,859,861],{"class":34,"line":113},[32,858,126],{"class":106},[32,860,811],{"class":147},[32,862,64],{"class":106},[22,864,866],{"className":24,"code":865,"language":26,"meta":27,"style":27},"\u002F* css *\u002F\ndiv.link1 a {\n  color: blue;\n}\n",[29,867,868,872,885,895],{"__ignoreMap":27},[32,869,870],{"class":34,"line":35},[32,871,708],{"class":532},[32,873,874,876,878,880,883],{"class":34,"line":84},[32,875,811],{"class":42},[32,877,214],{"class":98},[32,879,820],{"class":217},[32,881,882],{"class":42}," a",[32,884,220],{"class":106},[32,886,887,889,891,893],{"class":34,"line":95},[32,888,226],{"class":225},[32,890,229],{"class":106},[32,892,649],{"class":232},[32,894,236],{"class":106},[32,896,897],{"class":34,"line":113},[32,898,241],{"class":106},[182,900,901],{},[185,902,903],{},"由兩個或多個由空格分隔的選擇器組成",[18,905,906,907,949,996],{},"Attribute (屬性)",[22,908,910],{"className":136,"code":909,"language":138,"meta":27,"style":27},"\u003C!-- html -->\n\u003Cinput type=\"text\" name=\"context\" \u002F>\n",[29,911,912,916],{"__ignoreMap":27},[32,913,914],{"class":34,"line":35},[32,915,533],{"class":532},[32,917,918,920,923,926,928,930,933,935,938,940,942,945,947],{"class":34,"line":84},[32,919,39],{"class":106},[32,921,922],{"class":147},"input",[32,924,925],{"class":151}," type",[32,927,155],{"class":106},[32,929,159],{"class":158},[32,931,932],{"class":162},"text",[32,934,159],{"class":158},[32,936,937],{"class":151}," name",[32,939,155],{"class":106},[32,941,159],{"class":158},[32,943,944],{"class":162},"context",[32,946,159],{"class":158},[32,948,180],{"class":106},[22,950,952],{"className":24,"code":951,"language":26,"meta":27,"style":27},"\u002F* css *\u002F\ninput[type=\"text\"] {\n  color: black;\n}\n",[29,953,954,958,981,992],{"__ignoreMap":27},[32,955,956],{"class":34,"line":35},[32,957,708],{"class":532},[32,959,960,962,965,968,970,972,974,976,979],{"class":34,"line":84},[32,961,922],{"class":42},[32,963,964],{"class":106},"[",[32,966,967],{"class":151},"type",[32,969,155],{"class":55},[32,971,159],{"class":158},[32,973,932],{"class":162},[32,975,159],{"class":158},[32,977,978],{"class":106},"]",[32,980,220],{"class":106},[32,982,983,985,987,990],{"class":34,"line":95},[32,984,226],{"class":225},[32,986,229],{"class":106},[32,988,989],{"class":232}," black",[32,991,236],{"class":106},[32,993,994],{"class":34,"line":113},[32,995,241],{"class":106},[182,997,998],{},[185,999,1000],{},"指定所有具有相同屬性的 Html Element",[18,1002,1003,1004,1082],{},"pseudo-class (偽 class)",[22,1005,1007],{"className":24,"code":1006,"language":26,"meta":27,"style":27},"input[type=\"text\"] {\n  color: black;\n}\ninput[type=\"text\"]:hover {\n  color: red;\n}\n",[29,1008,1009,1029,1039,1043,1068,1078],{"__ignoreMap":27},[32,1010,1011,1013,1015,1017,1019,1021,1023,1025,1027],{"class":34,"line":35},[32,1012,922],{"class":42},[32,1014,964],{"class":106},[32,1016,967],{"class":151},[32,1018,155],{"class":55},[32,1020,159],{"class":158},[32,1022,932],{"class":162},[32,1024,159],{"class":158},[32,1026,978],{"class":106},[32,1028,220],{"class":106},[32,1030,1031,1033,1035,1037],{"class":34,"line":84},[32,1032,226],{"class":225},[32,1034,229],{"class":106},[32,1036,989],{"class":232},[32,1038,236],{"class":106},[32,1040,1041],{"class":34,"line":95},[32,1042,241],{"class":106},[32,1044,1045,1047,1049,1051,1053,1055,1057,1059,1061,1063,1066],{"class":34,"line":113},[32,1046,922],{"class":42},[32,1048,964],{"class":106},[32,1050,967],{"class":151},[32,1052,155],{"class":55},[32,1054,159],{"class":158},[32,1056,932],{"class":162},[32,1058,159],{"class":158},[32,1060,978],{"class":106},[32,1062,229],{"class":98},[32,1064,1065],{"class":151},"hover",[32,1067,220],{"class":106},[32,1069,1070,1072,1074,1076],{"class":34,"line":123},[32,1071,226],{"class":225},[32,1073,229],{"class":106},[32,1075,233],{"class":232},[32,1077,236],{"class":106},[32,1079,1080],{"class":34,"line":785},[32,1081,241],{"class":106},[15,1083,1084,1089,1095],{},[18,1085,1086,1088],{},[1065,1087],{}," : 懸浮在物件上",[18,1090,1091,1094],{},[1092,1093],"active",{}," : 左鍵點擊期間",[18,1096,1097,1100,1101,1104],{},[1098,1099],"focus",{}," : 焦點在物件上 (例如輸入游標在該物件上) ",[1102,1103],"br",{},[182,1105,1106],{},[185,1107,1108],{},"指定所選元素的特定狀態",[18,1110,1111,1112,1148],{},"pseudo-element (偽元素)",[22,1113,1115],{"className":24,"code":1114,"language":26,"meta":27,"style":27},"p::first-line {\n  font-size: 24px;\n}\n",[29,1116,1117,1129,1144],{"__ignoreMap":27},[32,1118,1119,1121,1124,1127],{"class":34,"line":35},[32,1120,185],{"class":42},[32,1122,1123],{"class":98},"::",[32,1125,1126],{"class":151},"first-line",[32,1128,220],{"class":106},[32,1130,1131,1134,1136,1139,1142],{"class":34,"line":84},[32,1132,1133],{"class":225},"  font-size",[32,1135,229],{"class":106},[32,1137,1138],{"class":273}," 24",[32,1140,1141],{"class":424},"px",[32,1143,236],{"class":106},[32,1145,1146],{"class":34,"line":95},[32,1147,241],{"class":106},[15,1149,1150,1153,1156],{},[18,1151,1152],{},"::before    : 所有指定內容的前面",[18,1154,1155],{},"::first-line : 所有指定內容的第一行",[18,1157,1158,1159,1161],{},"::selection: 所有指定內容中，被 user 選取起來時 ",[1102,1160],{},[182,1162,1163],{},[185,1164,1165],{},"創造一個 DOM 當中不存在的 Html Element，用來指定並沒有定義 Element 的區域",[18,1167,1168,1169,1171,1172,1195],{},"Inheritance (繼承)",[1102,1170],{},"常見會繼承的 tag",[15,1173,1174,1176,1179,1182,1185,1188],{},[18,1175,198],{},[18,1177,1178],{},"font-family",[18,1180,1181],{},"font-size",[18,1183,1184],{},"font-weight",[18,1186,1187],{},"list-style-type",[18,1189,49,1190],{},[182,1191,1192],{},[185,1193,1194],{},"child node 會繼承 parent node 設定的樣式",[182,1196,1197],{},[185,1198,1199],{},"user agent stylesheet (使用者代理程式樣式表) 優先級 > inheritance\n例如 anchor tag，因此需要另外設定，無法依賴繼承",[18,1201,1202,1203,1208,1213],{},"Conflicting Styling (樣式衝突)",[182,1204,1205],{},[185,1206,1207],{},"當 Element 被不同來源的 CSS 重複設定時",[182,1209,1210],{},[185,1211,1212],{},"處理原則：Priority (優先度) => Specificity (特定度) => Order Rule (順序規則)",[15,1214,1215,1233,1254],{},[18,1216,1217,1218],{},"Priority\n",[1219,1220,1221,1224,1227,1230],"ol",{},[18,1222,1223],{},"Inline",[18,1225,1226],{},"User Stylesheet (內部順序由 Specificity 決定)",[18,1228,1229],{},"User Agent Stylesheet",[18,1231,1232],{},"Inheritance",[18,1234,1235,1236],{},"Specificity\n",[1219,1237,1238,1241,1244],{},[18,1239,1240],{},"id     (1,0,0)",[18,1242,1243],{},"class (0,1,0)",[18,1245,1246,1247,1249],{},"tag   (0,0,1) ",[1102,1248],{},[182,1250,1251],{},[185,1252,1253],{},"優先級由 (1,1,1) ~ (0,0,0)",[18,1255,1256,1257],{},"Order Rule\n",[15,1258,1259],{},[18,1260,1261,1262,163],{},"發生衝突時由後面的設定覆寫，包含引用外部的 ",[29,1263,1264],{},"\u003Clink> ",[11,1266,1268],{"id":1267},"text-styling","text styling",[15,1270,1271,1336,1419,1460,1492,1524,1759,1790],{},[18,1272,1273,1274],{},"font-size：絕對 or 相對單位",[22,1275,1277],{"className":24,"code":1276,"language":26,"meta":27,"style":27},"h1 {\n  \u002F*絕對單位*\u002F\n  font-size: 24px;\n}\np {\n  \u002F*相對單位*\u002F\n  font-size: 24rem;\n}\n",[29,1278,1279,1285,1290,1302,1306,1312,1317,1331],{"__ignoreMap":27},[32,1280,1281,1283],{"class":34,"line":35},[32,1282,43],{"class":42},[32,1284,220],{"class":106},[32,1286,1287],{"class":34,"line":84},[32,1288,1289],{"class":532},"  \u002F*絕對單位*\u002F\n",[32,1291,1292,1294,1296,1298,1300],{"class":34,"line":95},[32,1293,1133],{"class":225},[32,1295,229],{"class":106},[32,1297,1138],{"class":273},[32,1299,1141],{"class":424},[32,1301,236],{"class":106},[32,1303,1304],{"class":34,"line":113},[32,1305,241],{"class":106},[32,1307,1308,1310],{"class":34,"line":123},[32,1309,185],{"class":42},[32,1311,220],{"class":106},[32,1313,1314],{"class":34,"line":785},[32,1315,1316],{"class":532},"  \u002F*相對單位*\u002F\n",[32,1318,1320,1322,1324,1326,1329],{"class":34,"line":1319},7,[32,1321,1133],{"class":225},[32,1323,229],{"class":106},[32,1325,1138],{"class":273},[32,1327,1328],{"class":424},"rem",[32,1330,236],{"class":106},[32,1332,1334],{"class":34,"line":1333},8,[32,1335,241],{"class":106},[18,1337,1338,1339,1358],{},"text-align：block element 或 table cell 中，內容的水平對齊位置",[15,1340,1341,1344,1347,1350],{},[18,1342,1343],{},"center：置中對齊",[18,1345,1346],{},"right：靠右對齊",[18,1348,1349],{},"justify：左右對齊",[18,1351,1352,1353],{},"inherit：繼承 parent element 對齊方式\n",[182,1354,1355],{},[185,1356,1357],{},"left、initial (預設值)，靠左不用設定",[22,1359,1361],{"className":24,"code":1360,"language":26,"meta":27,"style":27},"h1 {\n  text-align: center;\n}\n\ntd,\nth {\n  text-align: center;\n}\n",[29,1362,1363,1369,1381,1385,1391,1398,1405,1415],{"__ignoreMap":27},[32,1364,1365,1367],{"class":34,"line":35},[32,1366,43],{"class":42},[32,1368,220],{"class":106},[32,1370,1371,1374,1376,1379],{"class":34,"line":84},[32,1372,1373],{"class":225},"  text-align",[32,1375,229],{"class":106},[32,1377,1378],{"class":232}," center",[32,1380,236],{"class":106},[32,1382,1383],{"class":34,"line":95},[32,1384,241],{"class":106},[32,1386,1387],{"class":34,"line":113},[32,1388,1390],{"emptyLinePlaceholder":1389},true,"\n",[32,1392,1393,1396],{"class":34,"line":123},[32,1394,1395],{"class":42},"td",[32,1397,752],{"class":106},[32,1399,1400,1403],{"class":34,"line":785},[32,1401,1402],{"class":42},"th",[32,1404,220],{"class":106},[32,1406,1407,1409,1411,1413],{"class":34,"line":1319},[32,1408,1373],{"class":225},[32,1410,229],{"class":106},[32,1412,1378],{"class":232},[32,1414,236],{"class":106},[32,1416,1417],{"class":34,"line":1333},[32,1418,241],{"class":106},[18,1420,1421,1422,1433],{},"text-decoration：文字線段修飾特效",[15,1423,1424,1427,1430],{},[18,1425,1426],{},"none：無線段特效",[18,1428,1429],{},"underline：底線",[18,1431,1432],{},"line-though：刪除線",[22,1434,1436],{"className":24,"code":1435,"language":26,"meta":27,"style":27},"a {\n  text-decoration: underline;\n}\n",[29,1437,1438,1444,1456],{"__ignoreMap":27},[32,1439,1440,1442],{"class":34,"line":35},[32,1441,832],{"class":42},[32,1443,220],{"class":106},[32,1445,1446,1449,1451,1454],{"class":34,"line":84},[32,1447,1448],{"class":225},"  text-decoration",[32,1450,229],{"class":106},[32,1452,1453],{"class":232}," underline",[32,1455,236],{"class":106},[32,1457,1458],{"class":34,"line":95},[32,1459,241],{"class":106},[18,1461,1462,1463],{},"line-height：文字行距",[22,1464,1466],{"className":24,"code":1465,"language":26,"meta":27,"style":27},"p {\n  line-height: 20px;\n}\n",[29,1467,1468,1474,1488],{"__ignoreMap":27},[32,1469,1470,1472],{"class":34,"line":35},[32,1471,185],{"class":42},[32,1473,220],{"class":106},[32,1475,1476,1479,1481,1484,1486],{"class":34,"line":84},[32,1477,1478],{"class":225},"  line-height",[32,1480,229],{"class":106},[32,1482,1483],{"class":273}," 20",[32,1485,1141],{"class":424},[32,1487,236],{"class":106},[32,1489,1490],{"class":34,"line":95},[32,1491,241],{"class":106},[18,1493,1494,1495],{},"letter-spacing：文字水平間距",[22,1496,1498],{"className":24,"code":1497,"language":26,"meta":27,"style":27},"p {\n  letter-spacing: 2px;\n}\n",[29,1499,1500,1506,1520],{"__ignoreMap":27},[32,1501,1502,1504],{"class":34,"line":35},[32,1503,185],{"class":42},[32,1505,220],{"class":106},[32,1507,1508,1511,1513,1516,1518],{"class":34,"line":84},[32,1509,1510],{"class":225},"  letter-spacing",[32,1512,229],{"class":106},[32,1514,1515],{"class":273}," 2",[32,1517,1141],{"class":424},[32,1519,236],{"class":106},[32,1521,1522],{"class":34,"line":95},[32,1523,241],{"class":106},[18,1525,1526,1527,1569,1574,1653,1736],{},"font-family：字體系列的優先列表",[22,1528,1530],{"className":24,"code":1529,"language":26,"meta":27,"style":27},"p {\n  font-family: \"Times New Roman\", Times, serif;\n}\n",[29,1531,1532,1538,1565],{"__ignoreMap":27},[32,1533,1534,1536],{"class":34,"line":35},[32,1535,185],{"class":42},[32,1537,220],{"class":106},[32,1539,1540,1543,1545,1548,1551,1553,1555,1558,1560,1563],{"class":34,"line":84},[32,1541,1542],{"class":225},"  font-family",[32,1544,229],{"class":106},[32,1546,1547],{"class":158}," \"",[32,1549,1550],{"class":162},"Times New Roman",[32,1552,159],{"class":158},[32,1554,277],{"class":106},[32,1556,1557],{"class":232}," Times",[32,1559,277],{"class":106},[32,1561,1562],{"class":232}," serif",[32,1564,236],{"class":106},[32,1566,1567],{"class":34,"line":95},[32,1568,241],{"class":106},[182,1570,1571],{},[185,1572,1573],{},"\"設定字型\", 備援字型 1, 備援字型 2",[15,1575,1576],{},[18,1577,1578,1579],{},"指定 Local font 做為顯示字體\n",[22,1580,1582],{"className":24,"code":1581,"language":26,"meta":27,"style":27},"@font-face {\n  font-family: \"font_001\";\n  src: url(.\u002Ffont_001.ttf);\n}\n* {\n  font-family: \"font_001\";\n}\n",[29,1583,1584,1592,1607,1625,1629,1635,1649],{"__ignoreMap":27},[32,1585,1586,1590],{"class":34,"line":35},[32,1587,1589],{"class":1588},"sVHd0","@font-face",[32,1591,220],{"class":106},[32,1593,1594,1596,1598,1600,1603,1605],{"class":34,"line":84},[32,1595,1542],{"class":225},[32,1597,229],{"class":106},[32,1599,1547],{"class":158},[32,1601,1602],{"class":162},"font_001",[32,1604,159],{"class":158},[32,1606,236],{"class":106},[32,1608,1609,1612,1614,1617,1619,1623],{"class":34,"line":95},[32,1610,1611],{"class":225},"  src",[32,1613,229],{"class":106},[32,1615,1616],{"class":266}," url",[32,1618,270],{"class":106},[32,1620,1622],{"class":1621},"s99_P",".\u002Ffont_001.ttf",[32,1624,287],{"class":106},[32,1626,1627],{"class":34,"line":113},[32,1628,241],{"class":106},[32,1630,1631,1633],{"class":34,"line":123},[32,1632,455],{"class":42},[32,1634,220],{"class":106},[32,1636,1637,1639,1641,1643,1645,1647],{"class":34,"line":785},[32,1638,1542],{"class":225},[32,1640,229],{"class":106},[32,1642,1547],{"class":158},[32,1644,1602],{"class":162},[32,1646,159],{"class":158},[32,1648,236],{"class":106},[32,1650,1651],{"class":34,"line":1319},[32,1652,241],{"class":106},[22,1654,1656],{"className":136,"code":1655,"language":138,"meta":27,"style":27},"\u003C!-- 置於html head中，link style.css之上 -->\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin \u002F>\n\u003Clink\n  href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Noto+Sans+TC&display=swap\"\n  rel=\"stylesheet\"\n\u002F>\n",[29,1657,1658,1663,1696,1703,1718,1731],{"__ignoreMap":27},[32,1659,1660],{"class":34,"line":35},[32,1661,1662],{"class":532},"\u003C!-- 置於html head中，link style.css之上 -->\n",[32,1664,1665,1667,1669,1671,1673,1675,1678,1680,1682,1684,1686,1689,1691,1694],{"class":34,"line":84},[32,1666,39],{"class":106},[32,1668,148],{"class":147},[32,1670,152],{"class":151},[32,1672,155],{"class":106},[32,1674,159],{"class":158},[32,1676,1677],{"class":162},"preconnect",[32,1679,159],{"class":158},[32,1681,168],{"class":151},[32,1683,155],{"class":106},[32,1685,159],{"class":158},[32,1687,1688],{"class":162},"https:\u002F\u002Ffonts.gstatic.com",[32,1690,159],{"class":158},[32,1692,1693],{"class":151}," crossorigin",[32,1695,180],{"class":106},[32,1697,1698,1700],{"class":34,"line":95},[32,1699,39],{"class":106},[32,1701,1702],{"class":147},"link\n",[32,1704,1705,1708,1710,1712,1715],{"class":34,"line":113},[32,1706,1707],{"class":151},"  href",[32,1709,155],{"class":106},[32,1711,159],{"class":158},[32,1713,1714],{"class":162},"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Noto+Sans+TC&display=swap",[32,1716,1717],{"class":158},"\"\n",[32,1719,1720,1723,1725,1727,1729],{"class":34,"line":123},[32,1721,1722],{"class":151},"  rel",[32,1724,155],{"class":106},[32,1726,159],{"class":158},[32,1728,163],{"class":162},[32,1730,1717],{"class":158},[32,1732,1733],{"class":34,"line":785},[32,1734,1735],{"class":106},"\u002F>\n",[22,1737,1739],{"className":24,"code":1738,"language":26,"meta":27,"style":27},"\u002F* css *\u002F\nfont-family: \"Noto Sans TC\", sans-serif;\n",[29,1740,1741,1745],{"__ignoreMap":27},[32,1742,1743],{"class":34,"line":35},[32,1744,708],{"class":532},[32,1746,1747,1749,1752,1754,1757],{"class":34,"line":84},[32,1748,1178],{"class":42},[32,1750,1751],{"class":38},": \"Noto Sans TC\"",[32,1753,277],{"class":106},[32,1755,1756],{"class":42}," sans-serif",[32,1758,236],{"class":38},[18,1760,1761,1762],{},"text-indent：段落第一行縮排字元",[22,1763,1765],{"className":24,"code":1764,"language":26,"meta":27,"style":27},"p {\n  text-indent: 2rem;\n}\n",[29,1766,1767,1773,1786],{"__ignoreMap":27},[32,1768,1769,1771],{"class":34,"line":35},[32,1770,185],{"class":42},[32,1772,220],{"class":106},[32,1774,1775,1778,1780,1782,1784],{"class":34,"line":84},[32,1776,1777],{"class":225},"  text-indent",[32,1779,229],{"class":106},[32,1781,1515],{"class":273},[32,1783,1328],{"class":424},[32,1785,236],{"class":106},[32,1787,1788],{"class":34,"line":95},[32,1789,241],{"class":106},[18,1791,1792,1793,1810],{},"font-weight：設定粗體字",[15,1794,1795,1798,1801,1804,1807],{},[18,1796,1797],{},"normal：和數值 400 相同",[18,1799,1800],{},"bold：和數值 700 相同",[18,1802,1803],{},"100-900：9 個等級的字體粗細程度",[18,1805,1806],{},"bolder：比 parent element 更粗",[18,1808,1809],{},"lighter：比 parent element 更細",[22,1811,1813],{"className":24,"code":1812,"language":26,"meta":27,"style":27},"p {\n  font-weight: normal;\n}\n",[29,1814,1815,1821,1833],{"__ignoreMap":27},[32,1816,1817,1819],{"class":34,"line":35},[32,1818,185],{"class":42},[32,1820,220],{"class":106},[32,1822,1823,1826,1828,1831],{"class":34,"line":84},[32,1824,1825],{"class":225},"  font-weight",[32,1827,229],{"class":106},[32,1829,1830],{"class":232}," normal",[32,1832,236],{"class":106},[32,1834,1835],{"class":34,"line":95},[32,1836,241],{"class":106},[11,1838,1840],{"id":1839},"units-css-單位類別","units (css 單位類別)",[15,1842,1843,1851],{},[18,1844,1845,1846],{},"absolute units (絕對單位)\n",[182,1847,1848],{},[185,1849,1850],{},"有預設值或生活中已定義的單位\ne.g., px (pixel), mm, cm, in",[18,1852,1853,1854],{},"relative units (相對單位)\n",[15,1855,1856,1935,1971,2032,2088],{},[18,1857,1858,1859,1867],{},"em：相對 parent element 的長度\n",[182,1860,1861],{},[185,1862,1863,1864],{},"⚠️在多層 DOM Tree 中，越下層 element 的 em 值較難計算\n因此實務上",[188,1865,1866],{},"避免使用",[22,1868,1870],{"className":24,"code":1869,"language":26,"meta":27,"style":27},"\u002F* parent element *\u002F\nbody {\n  font-size: 50px;\n}\n\u002F* current element *\u002F\nh1 {\n  font-size: 2em;\n  \u002F* 2 * 50px = 100px *\u002F\n}\n",[29,1871,1872,1877,1884,1897,1901,1906,1912,1925,1930],{"__ignoreMap":27},[32,1873,1874],{"class":34,"line":35},[32,1875,1876],{"class":532},"\u002F* parent element *\u002F\n",[32,1878,1879,1882],{"class":34,"line":84},[32,1880,1881],{"class":42},"body",[32,1883,220],{"class":106},[32,1885,1886,1888,1890,1893,1895],{"class":34,"line":95},[32,1887,1133],{"class":225},[32,1889,229],{"class":106},[32,1891,1892],{"class":273}," 50",[32,1894,1141],{"class":424},[32,1896,236],{"class":106},[32,1898,1899],{"class":34,"line":113},[32,1900,241],{"class":106},[32,1902,1903],{"class":34,"line":123},[32,1904,1905],{"class":532},"\u002F* current element *\u002F\n",[32,1907,1908,1910],{"class":34,"line":785},[32,1909,43],{"class":42},[32,1911,220],{"class":106},[32,1913,1914,1916,1918,1920,1923],{"class":34,"line":1319},[32,1915,1133],{"class":225},[32,1917,229],{"class":106},[32,1919,1515],{"class":273},[32,1921,1922],{"class":424},"em",[32,1924,236],{"class":106},[32,1926,1927],{"class":34,"line":1333},[32,1928,1929],{"class":532},"  \u002F* 2 * 50px = 100px *\u002F\n",[32,1931,1933],{"class":34,"line":1932},9,[32,1934,241],{"class":106},[18,1936,1937,1938],{},"rem (root em)：以 html 元素計算，瀏覽器預設為 16px，使用者若有修改瀏覽器設定大小則依修改後為基準單位計算顯示\n",[22,1939,1941],{"className":24,"code":1940,"language":26,"meta":27,"style":27},"h1 {\n  font-size: 1.5rem;\n  \u002F* 1.5 * 16px = 24px *\u002F\n}\n",[29,1942,1943,1949,1962,1967],{"__ignoreMap":27},[32,1944,1945,1947],{"class":34,"line":35},[32,1946,43],{"class":42},[32,1948,220],{"class":106},[32,1950,1951,1953,1955,1958,1960],{"class":34,"line":84},[32,1952,1133],{"class":225},[32,1954,229],{"class":106},[32,1956,1957],{"class":273}," 1.5",[32,1959,1328],{"class":424},[32,1961,236],{"class":106},[32,1963,1964],{"class":34,"line":95},[32,1965,1966],{"class":532},"  \u002F* 1.5 * 16px = 24px *\u002F\n",[32,1968,1969],{"class":34,"line":113},[32,1970,241],{"class":106},[18,1972,1973,1974,2027],{},"vw (viewport width)：當前視窗寬度的 1%\n",[22,1975,1977],{"className":24,"code":1976,"language":26,"meta":27,"style":27},"body {\n  width: 1920px;\n}\nh1 {\n  width: 90vw;\n}\n",[29,1978,1979,1985,1999,2003,2009,2023],{"__ignoreMap":27},[32,1980,1981,1983],{"class":34,"line":35},[32,1982,1881],{"class":42},[32,1984,220],{"class":106},[32,1986,1987,1990,1992,1995,1997],{"class":34,"line":84},[32,1988,1989],{"class":225},"  width",[32,1991,229],{"class":106},[32,1993,1994],{"class":273}," 1920",[32,1996,1141],{"class":424},[32,1998,236],{"class":106},[32,2000,2001],{"class":34,"line":95},[32,2002,241],{"class":106},[32,2004,2005,2007],{"class":34,"line":113},[32,2006,43],{"class":42},[32,2008,220],{"class":106},[32,2010,2011,2013,2015,2018,2021],{"class":34,"line":123},[32,2012,1989],{"class":225},[32,2014,229],{"class":106},[32,2016,2017],{"class":273}," 90",[32,2019,2020],{"class":424},"vw",[32,2022,236],{"class":106},[32,2024,2025],{"class":34,"line":785},[32,2026,241],{"class":106},[182,2028,2029],{},[185,2030,2031],{},"設定 100vw 為略微超出網頁寬度，會產生 horizontal scrollbar",[18,2033,2034,2035],{},"vh (viewport height)：當前視窗高度的 1%\n",[22,2036,2038],{"className":24,"code":2037,"language":26,"meta":27,"style":27},"body {\n  height: 1080px;\n}\nh1 {\n  height: 10vh;\n}\n",[29,2039,2040,2046,2060,2064,2070,2084],{"__ignoreMap":27},[32,2041,2042,2044],{"class":34,"line":35},[32,2043,1881],{"class":42},[32,2045,220],{"class":106},[32,2047,2048,2051,2053,2056,2058],{"class":34,"line":84},[32,2049,2050],{"class":225},"  height",[32,2052,229],{"class":106},[32,2054,2055],{"class":273}," 1080",[32,2057,1141],{"class":424},[32,2059,236],{"class":106},[32,2061,2062],{"class":34,"line":95},[32,2063,241],{"class":106},[32,2065,2066,2068],{"class":34,"line":113},[32,2067,43],{"class":42},[32,2069,220],{"class":106},[32,2071,2072,2074,2076,2079,2082],{"class":34,"line":123},[32,2073,2050],{"class":225},[32,2075,229],{"class":106},[32,2077,2078],{"class":273}," 10",[32,2080,2081],{"class":424},"vh",[32,2083,236],{"class":106},[32,2085,2086],{"class":34,"line":785},[32,2087,241],{"class":106},[18,2089,2090,2091],{},"% (percentage)：相對 parent element 的值\n",[22,2092,2094],{"className":24,"code":2093,"language":26,"meta":27,"style":27},"body {\n  height: 1080px;\n}\nh1 {\n  height: 10%;\n}\n",[29,2095,2096,2102,2114,2118,2124,2136],{"__ignoreMap":27},[32,2097,2098,2100],{"class":34,"line":35},[32,2099,1881],{"class":42},[32,2101,220],{"class":106},[32,2103,2104,2106,2108,2110,2112],{"class":34,"line":84},[32,2105,2050],{"class":225},[32,2107,229],{"class":106},[32,2109,2055],{"class":273},[32,2111,1141],{"class":424},[32,2113,236],{"class":106},[32,2115,2116],{"class":34,"line":95},[32,2117,241],{"class":106},[32,2119,2120,2122],{"class":34,"line":113},[32,2121,43],{"class":42},[32,2123,220],{"class":106},[32,2125,2126,2128,2130,2132,2134],{"class":34,"line":123},[32,2127,2050],{"class":225},[32,2129,229],{"class":106},[32,2131,2078],{"class":273},[32,2133,425],{"class":424},[32,2135,236],{"class":106},[32,2137,2138],{"class":34,"line":785},[32,2139,241],{"class":106},[11,2141,2143],{"id":2142},"width-height","width & height",[185,2145,2146],{},"定義固定寬高",[15,2148,2149,2152],{},[18,2150,2151],{},"width：500px",[18,2153,2154],{},"height：500px",[185,2156,2157],{},"隨著畫面縮放依比例變更大小",[15,2159,2160,2163,2168,2171],{},[18,2161,2162],{},"min-width：300px",[18,2164,2165,2166],{},"max-width：1000px ",[1102,2167],{},[18,2169,2170],{},"min-height：30px",[18,2172,2173],{},"max-height：100px",[11,2175,2176],{"id":2176},"background",[15,2178,2179,2223,2257,2268,2340],{},[18,2180,2181,2182,2187,2214],{},"background-color",[15,2183,2184],{},[18,2185,2186],{},"transparent",[22,2188,2190],{"className":24,"code":2189,"language":26,"meta":27,"style":27},"h1 {\n  background-color: transparent;\n}\n",[29,2191,2192,2198,2210],{"__ignoreMap":27},[32,2193,2194,2196],{"class":34,"line":35},[32,2195,43],{"class":42},[32,2197,220],{"class":106},[32,2199,2200,2203,2205,2208],{"class":34,"line":84},[32,2201,2202],{"class":225},"  background-color",[32,2204,229],{"class":106},[32,2206,2207],{"class":232}," transparent",[32,2209,236],{"class":106},[32,2211,2212],{"class":34,"line":95},[32,2213,241],{"class":106},[182,2215,2216],{},[185,2217,2218,2219,2222],{},"其餘同 ",[832,2220,198],{"href":2221},"#Color"," 用法",[18,2224,2225,2226],{},"background-image",[22,2227,2229],{"className":24,"code":2228,"language":26,"meta":27,"style":27},"h1 {\n  background-image: url(.\u002Fimage\u002Fphoto.jpg);\n}\n",[29,2230,2231,2237,2253],{"__ignoreMap":27},[32,2232,2233,2235],{"class":34,"line":35},[32,2234,43],{"class":42},[32,2236,220],{"class":106},[32,2238,2239,2242,2244,2246,2248,2251],{"class":34,"line":84},[32,2240,2241],{"class":225},"  background-image",[32,2243,229],{"class":106},[32,2245,1616],{"class":266},[32,2247,270],{"class":106},[32,2249,2250],{"class":1621},".\u002Fimage\u002Fphoto.jpg",[32,2252,287],{"class":106},[32,2254,2255],{"class":34,"line":95},[32,2256,241],{"class":106},[18,2258,2259,2260],{},"background-size",[15,2261,2262,2265],{},[18,2263,2264],{},"auto：保持原尺寸",[18,2266,2267],{},"contain：等比例縮放，不剪裁拉伸。",[18,2269,2270,2271,2315],{},"background-repeat：在 contain 模式下，若圖片小於容器選擇是否要重複圖片",[22,2272,2274],{"className":24,"code":2273,"language":26,"meta":27,"style":27},"h1 {\n  background-size: contain;\n  \u002F* 預設為repeat *\u002F\n  background-repeat: no-repeat;\n}\n",[29,2275,2276,2282,2294,2299,2311],{"__ignoreMap":27},[32,2277,2278,2280],{"class":34,"line":35},[32,2279,43],{"class":42},[32,2281,220],{"class":106},[32,2283,2284,2287,2289,2292],{"class":34,"line":84},[32,2285,2286],{"class":225},"  background-size",[32,2288,229],{"class":106},[32,2290,2291],{"class":232}," contain",[32,2293,236],{"class":106},[32,2295,2296],{"class":34,"line":95},[32,2297,2298],{"class":532},"  \u002F* 預設為repeat *\u002F\n",[32,2300,2301,2304,2306,2309],{"class":34,"line":113},[32,2302,2303],{"class":225},"  background-repeat",[32,2305,229],{"class":106},[32,2307,2308],{"class":232}," no-repeat",[32,2310,236],{"class":106},[32,2312,2313],{"class":34,"line":123},[32,2314,241],{"class":106},[15,2316,2317,2320,2323,2326,2329,2332],{},[18,2318,2319],{},"cover：等比例縮放到完全覆蓋容器，尺寸跟容器不同時即自動裁切",[18,2321,2322],{},"background-position",[18,2324,2325],{},"top",[18,2327,2328],{},"bottom",[18,2330,2331],{},"left",[18,2333,2334,2335],{},"right\n",[182,2336,2337],{},[185,2338,2339],{},"設定背景對齊位置",[18,2341,2342,2343,2348],{},"background (shorthand)",[182,2344,2345],{},[185,2346,2347],{},"以 \"background: 參數\" 設定值，省略 color、image、size etc.",[22,2349,2351],{"className":24,"code":2350,"language":26,"meta":27,"style":27},"h1 {\n  background: green;\n  background: url(.\u002Fimage\u002Fphoto.jpg);\n}\n",[29,2352,2353,2359,2371,2385],{"__ignoreMap":27},[32,2354,2355,2357],{"class":34,"line":35},[32,2356,43],{"class":42},[32,2358,220],{"class":106},[32,2360,2361,2364,2366,2369],{"class":34,"line":84},[32,2362,2363],{"class":225},"  background",[32,2365,229],{"class":106},[32,2367,2368],{"class":232}," green",[32,2370,236],{"class":106},[32,2372,2373,2375,2377,2379,2381,2383],{"class":34,"line":95},[32,2374,2363],{"class":225},[32,2376,229],{"class":106},[32,2378,1616],{"class":266},[32,2380,270],{"class":106},[32,2382,2250],{"class":1621},[32,2384,287],{"class":106},[32,2386,2387],{"class":34,"line":113},[32,2388,241],{"class":106},[11,2390,2392],{"id":2391},"box-model","Box Model",[182,2394,2395],{},[185,2396,2397],{},"每個 block element 都是一個 box",[185,2399,2402],{"className":2400},[2401],"indent_2",[2403,2404],"img",{"src":2405,"width":2406},"https:\u002F\u002Fi.imgur.com\u002FL9XTrLY.png",250,[15,2408,2409,2463,2603,2682,2690,2703,2764],{},[18,2410,2411,2412],{},"context (內容)：顯示內容區域，用 width 和 height 調整大小",[22,2413,2415],{"className":24,"code":2414,"language":26,"meta":27,"style":27},"h1 {\n  width: 500px;\n  height: 300px;\n  background: green;\n}\n",[29,2416,2417,2423,2436,2449,2459],{"__ignoreMap":27},[32,2418,2419,2421],{"class":34,"line":35},[32,2420,43],{"class":42},[32,2422,220],{"class":106},[32,2424,2425,2427,2429,2432,2434],{"class":34,"line":84},[32,2426,1989],{"class":225},[32,2428,229],{"class":106},[32,2430,2431],{"class":273}," 500",[32,2433,1141],{"class":424},[32,2435,236],{"class":106},[32,2437,2438,2440,2442,2445,2447],{"class":34,"line":95},[32,2439,2050],{"class":225},[32,2441,229],{"class":106},[32,2443,2444],{"class":273}," 300",[32,2446,1141],{"class":424},[32,2448,236],{"class":106},[32,2450,2451,2453,2455,2457],{"class":34,"line":113},[32,2452,2363],{"class":225},[32,2454,229],{"class":106},[32,2456,2368],{"class":232},[32,2458,236],{"class":106},[32,2460,2461],{"class":34,"line":123},[32,2462,241],{"class":106},[18,2464,2465,2466],{},"padding (留白)：介在 context 跟 border 之間的距離夾層，使用 padding 屬性調整大小",[15,2467,2468,2471,2474,2477,2482],{},[18,2469,2470],{},"padding-top",[18,2472,2473],{},"padding-right",[18,2475,2476],{},"padding-bottom",[18,2478,2479,2480],{},"padding-left ",[1102,2481],{},[18,2483,2484,2485],{},"shorthand\n",[22,2486,2488],{"className":24,"code":2487,"language":26,"meta":27,"style":27},"h1 {\n  \u002F* 套用四邊 *\u002F\n  padding: 1rem;\n}\nh1 {\n  \u002F* 垂直, 水平 *\u002F\n  padding: 5%, 10%;\n}\nh1 {\n  \u002F* 上, 右, 下, 左 *\u002F\n  padding: 10px, 22%, 3.5rem, 1.5em;\n}\n",[29,2489,2490,2496,2501,2515,2519,2525,2530,2549,2553,2559,2565,2598],{"__ignoreMap":27},[32,2491,2492,2494],{"class":34,"line":35},[32,2493,43],{"class":42},[32,2495,220],{"class":106},[32,2497,2498],{"class":34,"line":84},[32,2499,2500],{"class":532},"  \u002F* 套用四邊 *\u002F\n",[32,2502,2503,2506,2508,2511,2513],{"class":34,"line":95},[32,2504,2505],{"class":225},"  padding",[32,2507,229],{"class":106},[32,2509,2510],{"class":273}," 1",[32,2512,1328],{"class":424},[32,2514,236],{"class":106},[32,2516,2517],{"class":34,"line":113},[32,2518,241],{"class":106},[32,2520,2521,2523],{"class":34,"line":123},[32,2522,43],{"class":42},[32,2524,220],{"class":106},[32,2526,2527],{"class":34,"line":785},[32,2528,2529],{"class":532},"  \u002F* 垂直, 水平 *\u002F\n",[32,2531,2532,2534,2536,2539,2541,2543,2545,2547],{"class":34,"line":1319},[32,2533,2505],{"class":225},[32,2535,229],{"class":106},[32,2537,2538],{"class":273}," 5",[32,2540,425],{"class":424},[32,2542,277],{"class":106},[32,2544,2078],{"class":273},[32,2546,425],{"class":424},[32,2548,236],{"class":106},[32,2550,2551],{"class":34,"line":1333},[32,2552,241],{"class":106},[32,2554,2555,2557],{"class":34,"line":1932},[32,2556,43],{"class":42},[32,2558,220],{"class":106},[32,2560,2562],{"class":34,"line":2561},10,[32,2563,2564],{"class":532},"  \u002F* 上, 右, 下, 左 *\u002F\n",[32,2566,2568,2570,2572,2574,2576,2578,2581,2583,2585,2588,2590,2592,2594,2596],{"class":34,"line":2567},11,[32,2569,2505],{"class":225},[32,2571,229],{"class":106},[32,2573,2078],{"class":273},[32,2575,1141],{"class":424},[32,2577,277],{"class":106},[32,2579,2580],{"class":273}," 22",[32,2582,425],{"class":424},[32,2584,277],{"class":106},[32,2586,2587],{"class":273}," 3.5",[32,2589,1328],{"class":424},[32,2591,277],{"class":106},[32,2593,1957],{"class":273},[32,2595,1922],{"class":424},[32,2597,236],{"class":106},[32,2599,2601],{"class":34,"line":2600},12,[32,2602,241],{"class":106},[18,2604,2605,2606,2644,2649,2677],{},"border (邊框)：使用 border 屬性調整大小",[22,2607,2609],{"className":24,"code":2608,"language":26,"meta":27,"style":27},"h1 {\n  \u002F* content *\u002F\n  \u002F* padding *\u002F\n  border: 10px;\n}\n",[29,2610,2611,2617,2622,2627,2640],{"__ignoreMap":27},[32,2612,2613,2615],{"class":34,"line":35},[32,2614,43],{"class":42},[32,2616,220],{"class":106},[32,2618,2619],{"class":34,"line":84},[32,2620,2621],{"class":532},"  \u002F* content *\u002F\n",[32,2623,2624],{"class":34,"line":95},[32,2625,2626],{"class":532},"  \u002F* padding *\u002F\n",[32,2628,2629,2632,2634,2636,2638],{"class":34,"line":113},[32,2630,2631],{"class":225},"  border",[32,2633,229],{"class":106},[32,2635,2078],{"class":273},[32,2637,1141],{"class":424},[32,2639,236],{"class":106},[32,2641,2642],{"class":34,"line":123},[32,2643,241],{"class":106},[15,2645,2646],{},[18,2647,2648],{},"border-radius (半徑)：邊界線條圓滑度",[22,2650,2652],{"className":24,"code":2651,"language":26,"meta":27,"style":27},"h1 {\n  border-radius: 5px;\n}\n",[29,2653,2654,2660,2673],{"__ignoreMap":27},[32,2655,2656,2658],{"class":34,"line":35},[32,2657,43],{"class":42},[32,2659,220],{"class":106},[32,2661,2662,2665,2667,2669,2671],{"class":34,"line":84},[32,2663,2664],{"class":225},"  border-radius",[32,2666,229],{"class":106},[32,2668,2538],{"class":273},[32,2670,1141],{"class":424},[32,2672,236],{"class":106},[32,2674,2675],{"class":34,"line":95},[32,2676,241],{"class":106},[182,2678,2679],{},[185,2680,2681],{},"在同寬高的 box，設定 border-radius: 50% 可以畫出整個圓",[18,2683,2684,2685],{},"margin (邊界)：使用 margin 屬性調整大小",[182,2686,2687],{},[185,2688,2689],{},"同 padding 寫法",[18,2691,2692,2693,2698],{},"width：預設為 context 的寬度",[182,2694,2695],{},[185,2696,2697],{},"⚠️當 box-sizing 為 border-box 時，會設定 border 的寬度",[182,2699,2700],{},[185,2701,2702],{},"任何 block element 預設 width 為 100%",[18,2704,2705,2706,2711,2716,2721,2732],{},"height：預設為 context 的高度",[182,2707,2708],{},[185,2709,2710],{},"⚠️當 box-sizing 為 border-box 時，會設定 border 的高度",[182,2712,2713],{},[185,2714,2715],{},"當對 box 設定 height 使用 % 時，由於 parent element 預設 height 是 auto，因此會導致計算結果 Undefined，除非有先對 parent (如 html, body) 設定 height 為 100%",[182,2717,2718],{},[185,2719,2720],{},"絕大多數情況不用設定 box 的高度，如果有設定要考慮 overflow (內容超過設定容量) 的處理方式：",[15,2722,2723,2726,2729],{},[18,2724,2725],{},"visible：(預設) content 不會被修剪，會直接呈現在元素框外",[18,2727,2728],{},"hidden：直接裁切，溢出部分隱藏，不會有滾動軸",[18,2730,2731],{},"scroll：顯示滾動軸",[22,2733,2735],{"className":24,"code":2734,"language":26,"meta":27,"style":27},"p {\n  overflow: scroll;\n  \u002F* 可單獨設定overflow-x或overflow-y *\u002F\n}\n",[29,2736,2737,2743,2755,2760],{"__ignoreMap":27},[32,2738,2739,2741],{"class":34,"line":35},[32,2740,185],{"class":42},[32,2742,220],{"class":106},[32,2744,2745,2748,2750,2753],{"class":34,"line":84},[32,2746,2747],{"class":225},"  overflow",[32,2749,229],{"class":106},[32,2751,2752],{"class":232}," scroll",[32,2754,236],{"class":106},[32,2756,2757],{"class":34,"line":95},[32,2758,2759],{"class":532},"  \u002F* 可單獨設定overflow-x或overflow-y *\u002F\n",[32,2761,2762],{"class":34,"line":113},[32,2763,241],{"class":106},[18,2765,2766,2767],{},"box-sizing",[15,2768,2769,2777],{},[18,2770,2771,2772],{},"content-box (預設)\n",[182,2773,2774],{},[185,2775,2776],{},"width 跟 height 決定整個 content 的寬高，padding 跟 border 外加",[18,2778,2779,2780,2809],{},"border-box > width 跟 height 決定整個 box 的寬高，即包含 border、padding、content\n",[22,2781,2783],{"className":24,"code":2782,"language":26,"meta":27,"style":27},"- {\n  box-sizing: border-box;\n}\n",[29,2784,2785,2793,2805],{"__ignoreMap":27},[32,2786,2787,2790],{"class":34,"line":35},[32,2788,2789],{"class":38},"- ",[32,2791,2792],{"class":106},"{\n",[32,2794,2795,2798,2800,2803],{"class":34,"line":84},[32,2796,2797],{"class":225},"  box-sizing",[32,2799,229],{"class":106},[32,2801,2802],{"class":232}," border-box",[32,2804,236],{"class":106},[32,2806,2807],{"class":34,"line":95},[32,2808,241],{"class":106},[182,2810,2811],{},[185,2812,2813,2814],{},"content-box => 設定內部 content 大小，外加模式\nborder-box  => 設定整個 box 大小，內縮模式\n💡絕大多數網頁使用 ",[188,2815,2816],{},"border-box",[11,2818,2820],{"id":2819},"display","Display",[15,2822,2823,2837],{},[18,2824,2825,2826],{},"outer display type",[15,2827,2828,2831,2834],{},[18,2829,2830],{},"block：寬高可指定，會換行",[18,2832,2833],{},"inline：寬高不可指定，不會換行",[18,2835,2836],{},"inline-block：寬高可指定，不會換行",[18,2838,2839,2840],{},"inner display type",[15,2841,2842,2845],{},[18,2843,2844],{},"flex",[18,2846,2847],{},"grid",[185,2849,2850],{},[2403,2851],{"src":2852,"width":2853},"https:\u002F\u002Fi.imgur.com\u002F4XcF9sm.png","100%",[11,2855,2857],{"id":2856},"position","Position",[182,2859,2860],{},[185,2861,2862],{},"由 top、right、bottom、left 決定 element 的最終位置",[15,2864,2865,2873,2886,2894,2907],{},[18,2866,2867,2868],{},"static (靜態) (預設)",[182,2869,2870],{},[185,2871,2872],{},"根據 normal flow 定位，top、right、bottom、left、z-index 無效\nnormal flow：瀏覽器正常排版規則，包含 block 換行，inline 並排 etc.\nz-index：決定圖層覆蓋的參數。z-index 較大的元素，重疊時會覆蓋較小元素\nz-index 只會套用到 positioned element\n⚠️只有 static 不是 positioned element",[18,2874,2875,2876,2881],{},"relative (相對)",[182,2877,2878],{},[185,2879,2880],{},"根據 normal flow 定位，依照 top、right、bottom、left 的值相對自身進行偏移\n即 \"相對原點所要偏移的位置\"",[182,2882,2883],{},[185,2884,2885],{},"若有 element 需要成為 positioned element，可以直接給予 position: relative; 不用給予偏移量即可",[18,2887,2888,2889],{},"absolute (絕對值)",[182,2890,2891],{},[185,2892,2893],{},"從 normal flow 移除，不保留空間，依照 top、right、bottom、left 的值相對自身進行定位\n參考對象為 closet positioned ancestor (最近的 positioned element 祖先，即從 parent 往上找的第一個 positioned element)，若找不到則定為 initial containing block (瀏覽器初始視窗)",[18,2895,2896,2897,2902],{},"fixed (固定)",[182,2898,2899],{},[185,2900,2901],{},"從 normal flow 移除，不保留空間，依照 top、right、bottom、left 的值相對自身進行定位，不隨滾動軸拉動改變。",[182,2903,2904],{},[185,2905,2906],{},"參考對象是 viewport 形成的 initial containing block",[18,2908,2909,2910,2915],{},"sticky (沾黏)",[182,2911,2912],{},[185,2913,2914],{},"relative 跟 fixed 的混合體\n預設為相對定位，達到指定的 threshold (臨界點) 則改為固定定位",[22,2916,2918],{"className":24,"code":2917,"language":26,"meta":27,"style":27},"#box_1 {\n  position: sticky;\n  top: 10px;\n  \u002F* 直到距離top 10px之前都是相對移動位置 *\u002F\n  \u002F* 達到距離top 10px以後就固定在畫面上 *\u002F\n}\n",[29,2919,2920,2929,2941,2954,2959,2964],{"__ignoreMap":27},[32,2921,2922,2924,2927],{"class":34,"line":35},[32,2923,568],{"class":98},[32,2925,2926],{"class":102},"box_1",[32,2928,220],{"class":106},[32,2930,2931,2934,2936,2939],{"class":34,"line":84},[32,2932,2933],{"class":225},"  position",[32,2935,229],{"class":106},[32,2937,2938],{"class":232}," sticky",[32,2940,236],{"class":106},[32,2942,2943,2946,2948,2950,2952],{"class":34,"line":95},[32,2944,2945],{"class":225},"  top",[32,2947,229],{"class":106},[32,2949,2078],{"class":273},[32,2951,1141],{"class":424},[32,2953,236],{"class":106},[32,2955,2956],{"class":34,"line":113},[32,2957,2958],{"class":532},"  \u002F* 直到距離top 10px之前都是相對移動位置 *\u002F\n",[32,2960,2961],{"class":34,"line":123},[32,2962,2963],{"class":532},"  \u002F* 達到距離top 10px以後就固定在畫面上 *\u002F\n",[32,2965,2966],{"class":34,"line":785},[32,2967,241],{"class":106},[11,2969,2971],{"id":2970},"stacking-context","Stacking Context",[182,2973,2974],{},[185,2975,2976],{},"element 位置重疊時，依虛擬 z 軸堆疊的情況",[15,2978,2979,2986,3005],{},[18,2980,2981,2982,2985],{},"Root element of the document (",[29,2983,2984],{},"\u003Chtml>",")",[18,2987,2988,2989,2992,2993,2996,2997,3000],{},"任何 ",[188,2990,2991],{},"position 為 relative 或 absolute","，且 ",[188,2994,2995],{},"z-index 的值不是 auto","，則",[188,2998,2999],{},"內部形成新的 stacking context",[182,3001,3002],{},[185,3003,3004],{},"內部形成新的 stacking 之後，z-index 值就不會跟 parent element (含) 以上的 element 比較",[18,3006,3007],{},"任何 position 為 fixed 或 sticky 的 element",[11,3009,3011],{"id":3010},"table-style","Table Style",[15,3013,3014,3086],{},[18,3015,3016,3017],{},"border collapse",[22,3018,3020],{"className":24,"code":3019,"language":26,"meta":27,"style":27},"table,\nth,\ntr,\ntd {\n  border: 1px solid black;\n  border-collapse: collapse;\n  \u002F* 將圖1轉為圖2邊框 *\u002F\n}\n",[29,3021,3022,3029,3035,3042,3048,3065,3077,3082],{"__ignoreMap":27},[32,3023,3024,3027],{"class":34,"line":35},[32,3025,3026],{"class":42},"table",[32,3028,752],{"class":106},[32,3030,3031,3033],{"class":34,"line":84},[32,3032,1402],{"class":42},[32,3034,752],{"class":106},[32,3036,3037,3040],{"class":34,"line":95},[32,3038,3039],{"class":42},"tr",[32,3041,752],{"class":106},[32,3043,3044,3046],{"class":34,"line":113},[32,3045,1395],{"class":42},[32,3047,220],{"class":106},[32,3049,3050,3052,3054,3056,3058,3061,3063],{"class":34,"line":123},[32,3051,2631],{"class":225},[32,3053,229],{"class":106},[32,3055,2510],{"class":273},[32,3057,1141],{"class":424},[32,3059,3060],{"class":232}," solid",[32,3062,989],{"class":232},[32,3064,236],{"class":106},[32,3066,3067,3070,3072,3075],{"class":34,"line":785},[32,3068,3069],{"class":225},"  border-collapse",[32,3071,229],{"class":106},[32,3073,3074],{"class":232}," collapse",[32,3076,236],{"class":106},[32,3078,3079],{"class":34,"line":1319},[32,3080,3081],{"class":532},"  \u002F* 將圖1轉為圖2邊框 *\u002F\n",[32,3083,3084],{"class":34,"line":1333},[32,3085,241],{"class":106},[18,3087,3088],{},"圖 1",[185,3090,3093],{"className":3091},[3092],"indent_4",[2403,3094],{"src":3095,"width":3096},"https:\u002F\u002Fi.imgur.com\u002FLkHmDww.png","300 px",[15,3098,3099],{},[18,3100,3101],{},"圖 2",[185,3103,3105],{"className":3104},[3092],[2403,3106],{"src":3107,"width":3096},"https:\u002F\u002Fi.imgur.com\u002FUkcas3z.png",[11,3109,3111],{"id":3110},"opacity-不透明度-cursor-游標樣式","Opacity (不透明度) & Cursor (游標樣式)",[15,3113,3114,3117],{},[18,3115,3116],{},"Opacity：設置元素的不透明度，0 (完全透明) ~ 1 (預設) (不透明)",[18,3118,3119,3120],{},"Cursor：設定游標樣式\n",[15,3121,3122],{},[18,3123,3124,3125],{},"pointer > 常搭配:hover\n",[182,3126,3127],{},[185,3128,3129],{},[832,3130,3134],{"href":3131,"rel":3132},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fcursor",[3133],"nofollow","🔗style list",[11,3136,3138],{"id":3137},"transition-過渡","Transition (過渡)",[182,3140,3141],{},[185,3142,3143],{},"設定 css 屬性轉換時的 easing (緩動) 跟 speed",[15,3145,3146],{},[18,3147,2484,3148,3153],{},[182,3149,3150],{},[185,3151,3152],{},"property name | duration | easing function | delay",[15,3154,3155,3158,3165,3274],{},[18,3156,3157],{},"property name：指定要轉換的 CSS 屬性",[18,3159,3160,3161,3164],{},"duration：轉換需要的時間，",[188,3162,3163],{},"預設 0","，單位為 s 或 ms",[18,3166,3167,3168,3171,3265],{},"easing-function：轉換時的速度曲線，",[188,3169,3170],{},"預設 ease",[3026,3172,3173,3190],{},[3174,3175,3176],"thead",{},[3039,3177,3178,3181,3184],{},[1402,3179,3180],{"align":2331},"名稱",[1402,3182,3183],{"align":2331},"說明",[1402,3185,3186,3187,3189],{"align":2331},"=cubic-bezier",[1102,3188],{},"(X,X,X,X)",[3191,3192,3193,3204,3215,3226,3237,3248],"tbody",{},[3039,3194,3195,3198,3201],{},[1395,3196,3197],{"align":2331},"linear",[1395,3199,3200],{"align":2331},"均速",[1395,3202,3203],{"align":2331},"cubic-bezier(0,0,1,1)",[3039,3205,3206,3209,3212],{},[1395,3207,3208],{"align":2331},"ease",[1395,3210,3211],{"align":2331},"緩入中間快緩出，預設值",[1395,3213,3214],{"align":2331},"cubic-bezier(.25,.1,.25,1)",[3039,3216,3217,3220,3223],{},[1395,3218,3219],{"align":2331},"ease-in",[1395,3221,3222],{"align":2331},"緩入",[1395,3224,3225],{"align":2331},"cubic-bezier(.42,0,1,1)",[3039,3227,3228,3231,3234],{},[1395,3229,3230],{"align":2331},"ease-out",[1395,3232,3233],{"align":2331},"緩出",[1395,3235,3236],{"align":2331},"cubic-bezier(0,0,.58,1)",[3039,3238,3239,3242,3245],{},[1395,3240,3241],{"align":2331},"ease-in-out",[1395,3243,3244],{"align":2331},"緩入緩出 (對比於 ease 較平緩)",[1395,3246,3247],{"align":2331},"cubic-bezier(.42,0,.58,1)",[3039,3249,3250,3256,3262],{},[1395,3251,3252,3253,3255],{"align":2331},"cubic-bezier",[1102,3254],{},"(n,n,n,n)",[1395,3257,3258,3259,3261],{"align":2331},"利用貝茲曲線自定義速度模式，",[1102,3260],{},"n = 0 ~ 1 中的數值",[1395,3263,3264],{"align":2331},"cubic-bezier(n,n,n,n)",[182,3266,3267],{},[185,3268,3269],{},[832,3270,3273],{"href":3271,"rel":3272},"https:\u002F\u002Feasings.net\u002Fzh-tw",[3133],"🔗More easing function",[18,3275,3276,3277,3164],{},"delay：延遲多久轉換，",[188,3278,3163],{},[11,3280,3282],{"id":3281},"transform-轉換","Transform (轉換)",[182,3284,3285],{},[185,3286,3287],{},"將 element 進行旋轉、縮放、傾斜、平移 etc.\n瀏覽器透過內部矩陣乘法計算結果位置、大小、形狀\n搭配 Transition 使用",[182,3289,3290],{},[185,3291,3292],{},"以下參數皆可設定 x, y, z 方向",[15,3294,3295,3395,3432],{},[18,3296,3297,3298,3303,3349],{},"translate (位移)",[182,3299,3300],{},[185,3301,3302],{},"依照自身中心點做計算",[22,3304,3306],{"className":24,"code":3305,"language":26,"meta":27,"style":27},"box {\n  top: 50%;\n  left: 50%;\n  \u002F* 以左上角的頂點會相對parent element置中 *\u002F\n}\n",[29,3307,3308,3315,3327,3340,3345],{"__ignoreMap":27},[32,3309,3310,3313],{"class":34,"line":35},[32,3311,3312],{"class":38},"box ",[32,3314,2792],{"class":106},[32,3316,3317,3319,3321,3323,3325],{"class":34,"line":84},[32,3318,2945],{"class":225},[32,3320,229],{"class":106},[32,3322,1892],{"class":273},[32,3324,425],{"class":424},[32,3326,236],{"class":106},[32,3328,3329,3332,3334,3336,3338],{"class":34,"line":95},[32,3330,3331],{"class":225},"  left",[32,3333,229],{"class":106},[32,3335,1892],{"class":273},[32,3337,425],{"class":424},[32,3339,236],{"class":106},[32,3341,3342],{"class":34,"line":113},[32,3343,3344],{"class":532},"  \u002F* 以左上角的頂點會相對parent element置中 *\u002F\n",[32,3346,3347],{"class":34,"line":123},[32,3348,241],{"class":106},[22,3350,3352],{"className":24,"code":3351,"language":26,"meta":27,"style":27},"box {\n  transform: translate(-50%, -50%);\n  \u002F* 依照box中心點為基準設為parent element置中 *\u002F\n}\n",[29,3353,3354,3360,3386,3391],{"__ignoreMap":27},[32,3355,3356,3358],{"class":34,"line":35},[32,3357,3312],{"class":38},[32,3359,2792],{"class":106},[32,3361,3362,3365,3367,3370,3372,3375,3377,3379,3382,3384],{"class":34,"line":84},[32,3363,3364],{"class":225},"  transform",[32,3366,229],{"class":106},[32,3368,3369],{"class":266}," translate",[32,3371,270],{"class":106},[32,3373,3374],{"class":273},"-50",[32,3376,425],{"class":424},[32,3378,277],{"class":106},[32,3380,3381],{"class":273}," -50",[32,3383,425],{"class":424},[32,3385,287],{"class":106},[32,3387,3388],{"class":34,"line":95},[32,3389,3390],{"class":532},"  \u002F* 依照box中心點為基準設為parent element置中 *\u002F\n",[32,3392,3393],{"class":34,"line":113},[32,3394,241],{"class":106},[18,3396,3397,3398],{},"rotate (旋轉)",[22,3399,3401],{"className":24,"code":3400,"language":26,"meta":27,"style":27},"box {\n  transform: rotate(45deg);\n}\n",[29,3402,3403,3409,3428],{"__ignoreMap":27},[32,3404,3405,3407],{"class":34,"line":35},[32,3406,3312],{"class":38},[32,3408,2792],{"class":106},[32,3410,3411,3413,3415,3418,3420,3423,3426],{"class":34,"line":84},[32,3412,3364],{"class":225},[32,3414,229],{"class":106},[32,3416,3417],{"class":266}," rotate",[32,3419,270],{"class":106},[32,3421,3422],{"class":273},"45",[32,3424,3425],{"class":424},"deg",[32,3427,287],{"class":106},[32,3429,3430],{"class":34,"line":95},[32,3431,241],{"class":106},[18,3433,3434,3435],{},"scale (縮放)",[22,3436,3438],{"className":24,"code":3437,"language":26,"meta":27,"style":27},"box {\n  \u002F* transform: scale(all) *\u002F\n  \u002F* transform: scale(寬,高) *\u002F\n  transform: scale(2);\n}\n",[29,3439,3440,3446,3451,3456,3472],{"__ignoreMap":27},[32,3441,3442,3444],{"class":34,"line":35},[32,3443,3312],{"class":38},[32,3445,2792],{"class":106},[32,3447,3448],{"class":34,"line":84},[32,3449,3450],{"class":532},"  \u002F* transform: scale(all) *\u002F\n",[32,3452,3453],{"class":34,"line":95},[32,3454,3455],{"class":532},"  \u002F* transform: scale(寬,高) *\u002F\n",[32,3457,3458,3460,3462,3465,3467,3470],{"class":34,"line":113},[32,3459,3364],{"class":225},[32,3461,229],{"class":106},[32,3463,3464],{"class":266}," scale",[32,3466,270],{"class":106},[32,3468,3469],{"class":273},"2",[32,3471,287],{"class":106},[32,3473,3474],{"class":34,"line":123},[32,3475,241],{"class":106},[11,3477,3479],{"id":3478},"animation","Animation",[182,3481,3482],{},[185,3483,3484],{},"transition + transform 可以完成簡單動畫，animation 可以完成更複雜的動畫設定",[15,3486,3487],{},[18,3488,2484,3489,3644],{},[15,3490,3491,3494,3501,3506,3511,3574,3621,3638],{},[18,3492,3493],{},"name：自訂名稱",[18,3495,3496,3497],{},"duration：同 ",[832,3498,3500],{"href":3499},"#Transition-%E9%81%8E%E6%B8%A1","Transition",[18,3502,3503,3504],{},"easing-function：同 ",[832,3505,3500],{"href":3499},[18,3507,3508,3509],{},"delay：同 ",[832,3510,3500],{"href":3499},[18,3512,3513,3514],{},"iteration-count\n",[15,3515,3516,3545],{},[18,3517,3518,3519],{},"number\n",[22,3520,3522],{"className":24,"code":3521,"language":26,"meta":27,"style":27},"box {\n  animation-iteration-count: 5;\n}\n",[29,3523,3524,3530,3541],{"__ignoreMap":27},[32,3525,3526,3528],{"class":34,"line":35},[32,3527,3312],{"class":38},[32,3529,2792],{"class":106},[32,3531,3532,3535,3537,3539],{"class":34,"line":84},[32,3533,3534],{"class":225},"  animation-iteration-count",[32,3536,229],{"class":106},[32,3538,2538],{"class":273},[32,3540,236],{"class":106},[32,3542,3543],{"class":34,"line":95},[32,3544,241],{"class":106},[18,3546,3547,3548],{},"infinite\n",[22,3549,3551],{"className":24,"code":3550,"language":26,"meta":27,"style":27},"box {\n  animation-iteration-count: infinite;\n}\n",[29,3552,3553,3559,3570],{"__ignoreMap":27},[32,3554,3555,3557],{"class":34,"line":35},[32,3556,3312],{"class":38},[32,3558,2792],{"class":106},[32,3560,3561,3563,3565,3568],{"class":34,"line":84},[32,3562,3534],{"class":225},[32,3564,229],{"class":106},[32,3566,3567],{"class":232}," infinite",[32,3569,236],{"class":106},[32,3571,3572],{"class":34,"line":95},[32,3573,241],{"class":106},[18,3575,3576,3577],{},"direction\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",[3026,3578,3579,3587],{},[3174,3580,3581],{},[3039,3582,3583,3585],{},[1402,3584,3180],{"align":2331},[1402,3586,3183],{"align":2331},[3191,3588,3589,3597,3605,3613],{},[3039,3590,3591,3594],{},[1395,3592,3593],{"align":2331},"normal",[1395,3595,3596],{"align":2331},"預設值，正常播放，順向 從 0%→100%",[3039,3598,3599,3602],{},[1395,3600,3601],{"align":2331},"reverse",[1395,3603,3604],{"align":2331},"反向播放，逆向 從 100%→0%",[3039,3606,3607,3610],{},[1395,3608,3609],{"align":2331},"alternate",[1395,3611,3612],{"align":2331},"正逆向輪流播放，奇數次為 0%→100%，偶數次為 100%→0% 若動畫播放次數只有一次就只會正常播放。",[3039,3614,3615,3618],{},[1395,3616,3617],{"align":2331},"alternate-reverse",[1395,3619,3620],{"align":2331},"alternate 的相反，奇數次為 100%→0%，偶數次為 0%→100% 若動畫播放次數只有一次就只會反向播放。",[18,3622,3623,3624],{},"fill-mode\n",[15,3625,3626,3629,3632,3635],{},[18,3627,3628],{},"none：(預設) 返回最初狀態",[18,3630,3631],{},"forwards：停留在結束的狀態",[18,3633,3634],{},"backwards：停留在剛開始的狀態",[18,3636,3637],{},"both：依據開始或結束決定呈現的狀態",[18,3639,3640,3641,3643],{},"play-state - running：(預設) 播放 - pause：暫停 ",[1102,3642],{},"\nSample",[22,3645,3647],{"className":24,"code":3646,"language":26,"meta":27,"style":27},"box {\n  animation: ChangeColor 1s ease-in 0s infinite alternate forwards;\n}\n@keyframes ChangeColor {\n  from {\n    top: 0;\n    left: 0;\n  }\n  to {\n    top: 400px;\n    left: 400px;\n  }\n",[29,3648,3649,3655,3689,3693,3703,3710,3721,3732,3737,3744,3757,3769],{"__ignoreMap":27},[32,3650,3651,3653],{"class":34,"line":35},[32,3652,3312],{"class":38},[32,3654,2792],{"class":106},[32,3656,3657,3660,3662,3665,3668,3671,3674,3677,3679,3681,3684,3687],{"class":34,"line":84},[32,3658,3659],{"class":225},"  animation",[32,3661,229],{"class":106},[32,3663,3664],{"class":38}," ChangeColor ",[32,3666,3667],{"class":273},"1",[32,3669,3670],{"class":424},"s",[32,3672,3673],{"class":232}," ease-in",[32,3675,3676],{"class":273}," 0",[32,3678,3670],{"class":424},[32,3680,3567],{"class":232},[32,3682,3683],{"class":232}," alternate",[32,3685,3686],{"class":232}," forwards",[32,3688,236],{"class":106},[32,3690,3691],{"class":34,"line":95},[32,3692,241],{"class":106},[32,3694,3695,3698,3701],{"class":34,"line":113},[32,3696,3697],{"class":1588},"@keyframes",[32,3699,3700],{"class":1621}," ChangeColor",[32,3702,220],{"class":106},[32,3704,3705,3708],{"class":34,"line":123},[32,3706,3707],{"class":217},"  from",[32,3709,220],{"class":106},[32,3711,3712,3715,3717,3719],{"class":34,"line":785},[32,3713,3714],{"class":225},"    top",[32,3716,229],{"class":106},[32,3718,3676],{"class":273},[32,3720,236],{"class":106},[32,3722,3723,3726,3728,3730],{"class":34,"line":1319},[32,3724,3725],{"class":225},"    left",[32,3727,229],{"class":106},[32,3729,3676],{"class":273},[32,3731,236],{"class":106},[32,3733,3734],{"class":34,"line":1333},[32,3735,3736],{"class":106},"  }\n",[32,3738,3739,3742],{"class":34,"line":1932},[32,3740,3741],{"class":217},"  to",[32,3743,220],{"class":106},[32,3745,3746,3748,3750,3753,3755],{"class":34,"line":2561},[32,3747,3714],{"class":225},[32,3749,229],{"class":106},[32,3751,3752],{"class":273}," 400",[32,3754,1141],{"class":424},[32,3756,236],{"class":106},[32,3758,3759,3761,3763,3765,3767],{"class":34,"line":2567},[32,3760,3725],{"class":225},[32,3762,229],{"class":106},[32,3764,3752],{"class":273},[32,3766,1141],{"class":424},[32,3768,236],{"class":106},[32,3770,3771],{"class":34,"line":2600},[32,3772,3736],{"class":106},[11,3774,3776],{"id":3775},"rwd-responsive-web-design","RWD (Responsive Web Design)",[182,3778,3779],{},[185,3780,3781],{},"RWD 沒有通用的標準，只要達成不同裝置以不同解析度檢視網頁都能適當呈現，減少縮放、平移、捲動即可",[763,3783,3784],{"id":3784},"設計思路與原則",[1219,3786,3787,3804,3810,3813],{},[18,3788,3789,3790],{},"專注螢幕大小而非裝置，一般來說最多設計小、中、大、超大的類型即可\n",[182,3791,3792],{},[185,3793,3794,3795,3799,3800,3803],{},"320",[3796,3797,3798],"del",{},"480px 為行動裝置\n481","768px 為平板裝置\n769",[3796,3801,3802],{},"1024px 為小螢幕及筆電\n1025","1200px 為桌機\n1200px 以上為大型螢幕或電視",[18,3805,3806,3807],{},"⭐",[188,3808,3809],{},"優先用 flexbox，否則就用 media query 處理",[18,3811,3812],{},"element 跟圖片都要隨著螢幕大小變化而改變",[18,3814,3815],{},"不能做出 \"X 軸\" (水平滾動軸)",[763,3817,3818],{"id":3818},"可採取策略",[15,3820,3821,3829,4024],{},[18,3822,3823,3824],{},"element 跟圖片皆使用 relative unit",[182,3825,3826],{},[185,3827,3828],{},"rem、%、vw、vh etc.",[18,3830,3831,3832,3867,3875,4014,4016,4019],{},"Media query：定義在不同寬度時要採用的 css",[22,3833,3835],{"className":24,"code":3834,"language":26,"meta":27,"style":27},"@media not|only mediator and (mediafeature and|or|not mediafeature) {\n  \u002F*CSS-Code;*\u002F\n}\n",[29,3836,3837,3858,3863],{"__ignoreMap":27},[32,3838,3839,3842,3845,3848,3851,3854,3856],{"class":34,"line":35},[32,3840,3841],{"class":1588},"@media",[32,3843,3844],{"class":38}," not|only mediator ",[32,3846,3847],{"class":55},"and",[32,3849,3850],{"class":106}," (",[32,3852,3853],{"class":38},"mediafeature and|or|not mediafeature",[32,3855,2985],{"class":106},[32,3857,220],{"class":106},[32,3859,3860],{"class":34,"line":84},[32,3861,3862],{"class":532},"  \u002F*CSS-Code;*\u002F\n",[32,3864,3865],{"class":34,"line":95},[32,3866,241],{"class":106},[15,3868,3869,3872],{},[18,3870,3871],{},"max-width：最大寬度 (\u003C=)",[18,3873,3874],{},"min-width：最小寬度 (>=)\nsample",[22,3876,3878],{"className":24,"code":3877,"language":26,"meta":27,"style":27},"@media (max-width: 767px) {\n}\n@media (max-width: 480px) {\n}\n@media (min-width: 768px) and (max-width: 979px) {\n}\n@media (min-width: 980px) {\n}\n@media (min-width: 1200px) {\n}\n",[29,3879,3880,3901,3905,3924,3928,3964,3968,3987,3991,4010],{"__ignoreMap":27},[32,3881,3882,3884,3886,3890,3892,3895,3897,3899],{"class":34,"line":35},[32,3883,3841],{"class":1588},[32,3885,3850],{"class":106},[32,3887,3889],{"class":3888},"sZMiF","max-width",[32,3891,229],{"class":106},[32,3893,3894],{"class":273}," 767",[32,3896,1141],{"class":424},[32,3898,2985],{"class":106},[32,3900,220],{"class":106},[32,3902,3903],{"class":34,"line":84},[32,3904,241],{"class":106},[32,3906,3907,3909,3911,3913,3915,3918,3920,3922],{"class":34,"line":95},[32,3908,3841],{"class":1588},[32,3910,3850],{"class":106},[32,3912,3889],{"class":3888},[32,3914,229],{"class":106},[32,3916,3917],{"class":273}," 480",[32,3919,1141],{"class":424},[32,3921,2985],{"class":106},[32,3923,220],{"class":106},[32,3925,3926],{"class":34,"line":113},[32,3927,241],{"class":106},[32,3929,3930,3932,3934,3937,3939,3942,3944,3946,3949,3951,3953,3955,3958,3960,3962],{"class":34,"line":123},[32,3931,3841],{"class":1588},[32,3933,3850],{"class":106},[32,3935,3936],{"class":3888},"min-width",[32,3938,229],{"class":106},[32,3940,3941],{"class":273}," 768",[32,3943,1141],{"class":424},[32,3945,2985],{"class":106},[32,3947,3948],{"class":55}," and",[32,3950,3850],{"class":106},[32,3952,3889],{"class":3888},[32,3954,229],{"class":106},[32,3956,3957],{"class":273}," 979",[32,3959,1141],{"class":424},[32,3961,2985],{"class":106},[32,3963,220],{"class":106},[32,3965,3966],{"class":34,"line":785},[32,3967,241],{"class":106},[32,3969,3970,3972,3974,3976,3978,3981,3983,3985],{"class":34,"line":1319},[32,3971,3841],{"class":1588},[32,3973,3850],{"class":106},[32,3975,3936],{"class":3888},[32,3977,229],{"class":106},[32,3979,3980],{"class":273}," 980",[32,3982,1141],{"class":424},[32,3984,2985],{"class":106},[32,3986,220],{"class":106},[32,3988,3989],{"class":34,"line":1333},[32,3990,241],{"class":106},[32,3992,3993,3995,3997,3999,4001,4004,4006,4008],{"class":34,"line":1932},[32,3994,3841],{"class":1588},[32,3996,3850],{"class":106},[32,3998,3936],{"class":3888},[32,4000,229],{"class":106},[32,4002,4003],{"class":273}," 1200",[32,4005,1141],{"class":424},[32,4007,2985],{"class":106},[32,4009,220],{"class":106},[32,4011,4012],{"class":34,"line":2561},[32,4013,241],{"class":106},[1102,4015],{},[2403,4017],{"alt":27,"src":4018},"https:\u002F\u002Fblog.hinablue.me\u002Fcontent\u002Fimages\u002F2014\u002FNov\u002Fresponsive-reference.png",[832,4020,4023],{"href":4021,"rel":4022},"https:\u002F\u002Fblog.hinablue.me\u002Fcss-media-query-tips\u002F",[3133],"🔗設定臨界點與 max、min 使用思路",[18,4025,4026,4027,4030,4031,4038,4040,4041],{},"使用 Flexbox 自動排版 > 讓容器改變寬高跟順序，以最好填充可利用空間 - flex container > ",[29,4028,4029],{},"display: flex"," 是一種 inner display type",[22,4032,4036],{"className":4033,"code":4035,"language":932},[4034],"language-text","    > 任何定義 `display: flex` 的element都是flex container，其child element都是flex item\n\n    > flex item可以再定義 `display: flex` ，同時為flex item跟flex container\n    > 此時outer display type為flex item\n    > inner display type為flex\n    >\n    > 所以只要inline element放進flex container就能成為flex item，避免[display type為inline時的限制](#Display)\n    ```html\n    \u003C!-- html -->\n    \u003Cdiv class=\"box\">\n      \u003Ca href=\"\">link_1\u003C\u002Fa>\n    \u003C\u002Fdiv>\n    ```\n    ```css\n    \u002F* css *\u002F\n    div.box {\n      display: flex;\n    }\n    ```\n    - flex-direction：設定main axis (主要方向)\n        - ➡️row (預設)\n        - ⬇️column\n        - ⬅️row-reverse\n        - ⬆️column-reverse\n    - flex-wrap：設定換行規則\n        - nowrap：(預設) 強制在一行，若容量不夠會壓縮content\n        - wrap：自動換行\n    - justify-content：設定main axis對齊方式\n    \u003Cimg src=\"https:\u002F\u002Fi.imgur.com\u002F3tuzb7t.png\" width=\"50%\">\n    \u003Cimg src=\"https:\u002F\u002Fi.imgur.com\u002FfZUSMU1.png\" width=\"50%\">\n        👆以flex-direction預設row示範\n\n        - start：靠容器開頭\n        - end：靠容器結尾\n        - center：於基準線置中\n        - space-between：分散對齊(不留頭尾)\n        - space-around：分散對齊(留頭尾)\n        - space-evenly：分散對齊，頭尾間隔只有element間隔的一半\n    - align-items：設定cross axis(交錯軸) 對齊方式\n    \u003Cimg src=\"https:\u002F\u002Fi.imgur.com\u002F3V6iWcq.png\" width=\"50%\">\n        - stretch：(預設) 當child element沒有設定高度時，會被拉長到符合parent element一樣的長度\n        - flex-start：靠容器開頭(的順時針90度)\n        - flex-end：靠容器結尾(的順時針90度)\n        - center：於交錯軸置中\n        - baseline：以文字為準對齊交錯軸\n\n        > cross axis即跟main axis垂直的方向，當flex-direction為預設row，則\n        > justify-content => 水平對齊方式\n        > align-items => 垂直對齊方式\n- flex items\n    - shorthand\n        - flex-grow：將container的剩餘空間分配給items的伸展係數\n            > 剩餘空間：flex container - 所有flex item的大小總和\n\n            > 填入伸展係數 0 ~ 無限，決定該item可以吃下剩餘空間的分量，未設定則不會分配剩餘空間\n        - flex-shrink：container裝不下items時，該item可接受的被壓縮係數\n            > 填入壓縮係數 0 ~ 無限 (預設為1)，決定該item被壓縮的比例\n        - flex-basis：item基本大小 (預設為0)\n            > basis代表的是寬還是高同樣取決於main axis\n\n        usage：\n        ```css\n        \u002F* 1 value，無單位：grow *\u002F\n        flex: 2;\n\n        \u002F* 1 value，有單位：basis *\u002F\n        flex: 10em;\n        flex: 30px;\n        flex: min-content;\n\n        \u002F* 2 value：grow | basis *\u002F\n        flex: 1 30px;\n\n        \u002F* 2 value：grow | shrink *\u002F\n        flex: 2 2;\n\n        \u002F* 3 value：grow | shrink | basis *\u002F\n        flex: 2 2 10%;\n        ```\n\n        sample 1：\n        ```css\n        .red{\n          flex: 1 2 100px;\n        }\n        .blue{\n          flex: 2 2 100px;\n        }\n        \u002F* 當container > 200px：red佔1\u002F3，blue佔2\u002F3 *\u002F\n        \u002F* 當container \u003C 200px：red佔2\u002F3，blue佔1\u002F3 *\u002F\n        ```\n        ![](https:\u002F\u002Fi.imgur.com\u002FMSWkGeH.png)\n        \u003Cbr>\n        sample 2：\n        ```css\n        .red{\n          flex-grow: 2;\n          flex-basis: 100px;\n        }\n        .blue{\n          flex-grow: 1;\n          flex-shrink: 0;\n          flex-basis: 100px;\n        }\n        ```\n        ![](https:\u002F\u002Fi.imgur.com\u002FLW8OCtQ.png)\n    - no-shorthand\n        - align-self：為單個item覆寫預設對齊方式 (用法同align-items)\n            > 例如container內有3個items\n",[29,4037,4035],{"__ignoreMap":27},[1102,4039],{},"設定 align-items 為 center\n中間 2 號 item 單獨設定 align-self: flex-end\n",[2403,4042],{"alt":27,"src":4043},"https:\u002F\u002Fi.imgur.com\u002F8ZHcQSI.png",[182,4045,4046],{},[185,4047,4048],{},"關於 Figma \u003C=> CSS\n flex-grow：在 figma parent > autolayout 的 main axis\n  -> 0: fixed mode\n  -> 1: fill mode\n align-self：在 figma parent > autolayout 的 cross axis\n  -> flex-start: fixed mode\n  -> stretch: fill mode",[11,4050,4052],{"id":4051},"sassscss-syntactically-awesome-stylesheets","SASS\u002FSCSS (Syntactically Awesome Stylesheets)",[182,4054,4055],{},[185,4056,4057],{},"一種將 CSS 視為程式語言的網頁開發技術\nSASS 支援設定變數、函數、import、nested etc.\n有高相容性，跨瀏覽器的特性\n如 Bootstrap 即透過 SASS 實現",[182,4059,4060],{},[185,4061,4062],{},[832,4063,4066],{"href":4064,"rel":4065},"https:\u002F\u002Fmedium.com\u002F@onepiece0328\u002F%E5%95%8F%E9%81%8E%E4%B8%80%E7%99%BE%E6%AC%A1%E7%9A%84%E5%95%8F%E9%A1%8C%E4%B9%8B-sass-%E5%92%8C-scss-%E7%9A%84%E5%B7%AE%E5%88%A5-5bd7fd78942a",[3133],"🔗延伸閱讀：問過一百次的問題之 Sass 和 SCSS 的差別",[185,4068,4069],{},"以下以 SCSS 作為範例",[15,4071,4072,4201,4260,4303,4348],{},[18,4073,4074,4075],{},"Nested CSS：用巢狀寫法，交給 compiler 改寫成 css 語法",[22,4076,4080],{"className":4077,"code":4078,"language":4079,"meta":27,"style":27},"language-scss shiki shiki-themes material-theme-lighter github-light github-dark","header {\n  nav {\n    ul {\n      display: flex;\n      flex-wrap: wrap;\n      li {\n        list-style-type: none;\n        a {\n          color: red;\n          text-decoration: none;\n        }\n      }\n    }\n  }\n}\n","scss",[29,4081,4082,4089,4096,4103,4115,4127,4134,4146,4153,4164,4175,4180,4185,4191,4196],{"__ignoreMap":27},[32,4083,4084,4087],{"class":34,"line":35},[32,4085,4086],{"class":42},"header",[32,4088,220],{"class":106},[32,4090,4091,4094],{"class":34,"line":84},[32,4092,4093],{"class":42},"  nav",[32,4095,220],{"class":106},[32,4097,4098,4101],{"class":34,"line":95},[32,4099,4100],{"class":42},"    ul",[32,4102,220],{"class":106},[32,4104,4105,4108,4110,4113],{"class":34,"line":113},[32,4106,4107],{"class":225},"      display",[32,4109,229],{"class":106},[32,4111,4112],{"class":232}," flex",[32,4114,236],{"class":106},[32,4116,4117,4120,4122,4125],{"class":34,"line":123},[32,4118,4119],{"class":225},"      flex-wrap",[32,4121,229],{"class":106},[32,4123,4124],{"class":232}," wrap",[32,4126,236],{"class":106},[32,4128,4129,4132],{"class":34,"line":785},[32,4130,4131],{"class":42},"      li",[32,4133,220],{"class":106},[32,4135,4136,4139,4141,4144],{"class":34,"line":1319},[32,4137,4138],{"class":225},"        list-style-type",[32,4140,229],{"class":106},[32,4142,4143],{"class":232}," none",[32,4145,236],{"class":106},[32,4147,4148,4151],{"class":34,"line":1333},[32,4149,4150],{"class":42},"        a",[32,4152,220],{"class":106},[32,4154,4155,4158,4160,4162],{"class":34,"line":1932},[32,4156,4157],{"class":225},"          color",[32,4159,229],{"class":106},[32,4161,233],{"class":232},[32,4163,236],{"class":106},[32,4165,4166,4169,4171,4173],{"class":34,"line":2561},[32,4167,4168],{"class":225},"          text-decoration",[32,4170,229],{"class":106},[32,4172,4143],{"class":232},[32,4174,236],{"class":106},[32,4176,4177],{"class":34,"line":2567},[32,4178,4179],{"class":106},"        }\n",[32,4181,4182],{"class":34,"line":2600},[32,4183,4184],{"class":106},"      }\n",[32,4186,4188],{"class":34,"line":4187},13,[32,4189,4190],{"class":106},"    }\n",[32,4192,4194],{"class":34,"line":4193},14,[32,4195,3736],{"class":106},[32,4197,4199],{"class":34,"line":4198},15,[32,4200,241],{"class":106},[18,4202,4203,4204],{},"Parameter setting：只要修改自定義變數，就能直接影響多個 element",[22,4205,4209],{"className":4206,"code":4207,"language":4208,"meta":27,"style":27},"language-sass shiki shiki-themes material-theme-lighter github-light github-dark","$Color_theme: red;\n\na {\n  color: $Color_theme;\n}\nh1 {\n  color: $Color_theme;\n}\nh2 {\n  color: $Color_theme;\n}\n","sass",[29,4210,4211,4216,4220,4225,4230,4234,4239,4243,4247,4252,4256],{"__ignoreMap":27},[32,4212,4213],{"class":34,"line":35},[32,4214,4215],{},"$Color_theme: red;\n",[32,4217,4218],{"class":34,"line":84},[32,4219,1390],{"emptyLinePlaceholder":1389},[32,4221,4222],{"class":34,"line":95},[32,4223,4224],{},"a {\n",[32,4226,4227],{"class":34,"line":113},[32,4228,4229],{},"  color: $Color_theme;\n",[32,4231,4232],{"class":34,"line":123},[32,4233,241],{},[32,4235,4236],{"class":34,"line":785},[32,4237,4238],{},"h1 {\n",[32,4240,4241],{"class":34,"line":1319},[32,4242,4229],{},[32,4244,4245],{"class":34,"line":1333},[32,4246,241],{},[32,4248,4249],{"class":34,"line":1932},[32,4250,4251],{},"h2 {\n",[32,4253,4254],{"class":34,"line":2561},[32,4255,4229],{},[32,4257,4258],{"class":34,"line":2567},[32,4259,241],{},[18,4261,4262,4263,4266,4267,4271],{},"self ampersand：使用 ",[29,4264,4265],{},"&"," 表示自己，可以直接設定如 ",[832,4268,4270],{"href":4269},"#Selectors","pseudo Selectors",[22,4272,4274],{"className":4206,"code":4273,"language":4208,"meta":27,"style":27},"a {\n  color: pink;\n  &:hover {\n    background-color: aquamarine;\n  }\n}\n",[29,4275,4276,4280,4285,4290,4295,4299],{"__ignoreMap":27},[32,4277,4278],{"class":34,"line":35},[32,4279,4224],{},[32,4281,4282],{"class":34,"line":84},[32,4283,4284],{},"  color: pink;\n",[32,4286,4287],{"class":34,"line":95},[32,4288,4289],{},"  &:hover {\n",[32,4291,4292],{"class":34,"line":113},[32,4293,4294],{},"    background-color: aquamarine;\n",[32,4296,4297],{"class":34,"line":123},[32,4298,3736],{},[32,4300,4301],{"class":34,"line":785},[32,4302,241],{},[18,4304,4305,4306,4315],{},"import：將其他 scss 檔案導入到同一個 scss 檔中，方便分類跟重複利用",[182,4307,4308],{},[185,4309,4310,4311,4314],{},"⚠️注意，除了主 scss 檔案外，其他的 scss 檔案務必要以",[29,4312,4313],{},"_","做為命名開頭\n在 import 時，sass 會自動將前面的底線去掉\nsample",[22,4316,4318],{"className":4077,"code":4317,"language":4079,"meta":27,"style":27},"\u002F\u002F創建_font.scss檔案\n\n\u002F\u002F於main.scss檔案進行import\n@import \".\u002Ffont\";\n",[29,4319,4320,4325,4329,4334],{"__ignoreMap":27},[32,4321,4322],{"class":34,"line":35},[32,4323,4324],{"class":532},"\u002F\u002F創建_font.scss檔案\n",[32,4326,4327],{"class":34,"line":84},[32,4328,1390],{"emptyLinePlaceholder":1389},[32,4330,4331],{"class":34,"line":95},[32,4332,4333],{"class":532},"\u002F\u002F於main.scss檔案進行import\n",[32,4335,4336,4339,4341,4344,4346],{"class":34,"line":113},[32,4337,4338],{"class":1588},"@import",[32,4340,1547],{"class":158},[32,4342,4343],{"class":162},".\u002Ffont",[32,4345,159],{"class":158},[32,4347,236],{"class":106},[18,4349,4350,4351],{},"mixin：相當於 function 或 method",[22,4352,4354],{"className":4077,"code":4353,"language":4079,"meta":27,"style":27},"\u002F\u002F 打包並提供formal parameter (形式參數)\n@mixin flexbox($direction) {\n  display: flex;\n  direction: $direction;\n}\n\nbox_1 {\n  \u002F\u002F載入並給定actual parameter (實際參數)\n  @include flexbox(row);\n}\n",[29,4355,4356,4361,4380,4391,4403,4407,4411,4418,4423,4437],{"__ignoreMap":27},[32,4357,4358],{"class":34,"line":35},[32,4359,4360],{"class":532},"\u002F\u002F 打包並提供formal parameter (形式參數)\n",[32,4362,4363,4366,4370,4372,4376,4378],{"class":34,"line":84},[32,4364,4365],{"class":1588},"@mixin",[32,4367,4369],{"class":4368},"sGLFI"," flexbox",[32,4371,270],{"class":106},[32,4373,4375],{"class":4374},"sMMDD","$direction",[32,4377,2985],{"class":106},[32,4379,220],{"class":106},[32,4381,4382,4385,4387,4389],{"class":34,"line":95},[32,4383,4384],{"class":225},"  display",[32,4386,229],{"class":106},[32,4388,4112],{"class":232},[32,4390,236],{"class":106},[32,4392,4393,4396,4398,4401],{"class":34,"line":113},[32,4394,4395],{"class":225},"  direction",[32,4397,229],{"class":106},[32,4399,4400],{"class":4374}," $direction",[32,4402,236],{"class":106},[32,4404,4405],{"class":34,"line":123},[32,4406,241],{"class":106},[32,4408,4409],{"class":34,"line":785},[32,4410,1390],{"emptyLinePlaceholder":1389},[32,4412,4413,4416],{"class":34,"line":1319},[32,4414,4415],{"class":38},"box_1 ",[32,4417,2792],{"class":106},[32,4419,4420],{"class":34,"line":1333},[32,4421,4422],{"class":532},"  \u002F\u002F載入並給定actual parameter (實際參數)\n",[32,4424,4425,4428,4430,4432,4435],{"class":34,"line":1932},[32,4426,4427],{"class":1588},"  @include",[32,4429,4369],{"class":4368},[32,4431,270],{"class":106},[32,4433,4434],{"class":232},"row",[32,4436,287],{"class":106},[32,4438,4439],{"class":34,"line":2561},[32,4440,241],{"class":106},[90,4442,4443],{},"html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s83vy, html code.shiki .s83vy{--shiki-light:#E2931D;--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .smGrS, html code.shiki .smGrS{--shiki-light:#39ADB5;--shiki-default:#D73A49;--shiki-dark:#F97583}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .stp6e, html code.shiki .stp6e{--shiki-light:#39ADB5;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sPLZw, html code.shiki .sPLZw{--shiki-light:#F76D47;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sQzsp, html code.shiki .sQzsp{--shiki-light:#E53935;--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s9AJx, html code.shiki .s9AJx{--shiki-light:#9C3EDA;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sjJ54, html code.shiki .sjJ54{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sbgvK, html code.shiki .sbgvK{--shiki-light:#E2931D;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .soE4H, html code.shiki .soE4H{--shiki-light:#8796B0;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s_hVV, html code.shiki .s_hVV{--shiki-light:#90A4AE;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sptTA, html code.shiki .sptTA{--shiki-light:#6182B8;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .srdBf, html code.shiki .srdBf{--shiki-light:#F76D47;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s39Yj, html code.shiki .s39Yj{--shiki-light:#39ADB5;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sw1J6, html code.shiki .sw1J6{--shiki-light:#F76D47;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sutJx, html code.shiki .sutJx{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#6A737D;--shiki-dark-font-style:inherit}html pre.shiki code .sVHd0, html code.shiki .sVHd0{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .s99_P, html code.shiki .s99_P{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#E36209;--shiki-default-font-style:inherit;--shiki-dark:#FFAB70;--shiki-dark-font-style:inherit}html pre.shiki code .sZMiF, html code.shiki .sZMiF{--shiki-light:#E2931D;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sGLFI, html code.shiki .sGLFI{--shiki-light:#6182B8;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sMMDD, html code.shiki .sMMDD{--shiki-light:#90A4AE;--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":27,"searchDepth":95,"depth":95,"links":4445},[4446,4447,4448,4449,4450,4451,4452,4453,4454,4455,4456,4457,4458,4459,4460,4461,4462,4466],{"id":13,"depth":84,"text":13},{"id":198,"depth":84,"text":199},{"id":446,"depth":84,"text":447},{"id":1267,"depth":84,"text":1268},{"id":1839,"depth":84,"text":1840},{"id":2142,"depth":84,"text":2143},{"id":2176,"depth":84,"text":2176},{"id":2391,"depth":84,"text":2392},{"id":2819,"depth":84,"text":2820},{"id":2856,"depth":84,"text":2857},{"id":2970,"depth":84,"text":2971},{"id":3010,"depth":84,"text":3011},{"id":3110,"depth":84,"text":3111},{"id":3137,"depth":84,"text":3138},{"id":3281,"depth":84,"text":3282},{"id":3478,"depth":84,"text":3479},{"id":3775,"depth":84,"text":3776,"children":4463},[4464,4465],{"id":3784,"depth":95,"text":3784},{"id":3818,"depth":95,"text":3818},{"id":4051,"depth":84,"text":4052},"CSS","2024-09-13","CSS 基礎屬性與樣式",false,"md",null,{},"\u002Fblog\u002Fcss\u002Fnote",{"title":5,"description":4469},"blog\u002Fcss\u002Fnote",[4478,4467],"Frontend","2024-09-21","sUgQUwygwyJ4gXkKF4g-MfRvc_uymsDE8d7BFCjINMI",1780512500929]