GF / VS CODE 快捷鍵/ 區塊計算方式/ 浮動float
2021/11/02 1.假圖產生連結 假圖片生產器連結 < img src = "https://fakeimg.pl/250x150/eeeeee/">. 可改顏色和尺寸 2. ”class=自訂名稱“ float 寫在html 圖片語法後片 設定圖片為靠左或靠右浮動， 文字繞圖片 html < img src = "https://fakeimg.pl/250x150/eeeeee/" class="float-img"> 3.如果想要文字和圖片有距離 會搭配區塊的尺寸 margin 使用 css .float-img自訂名稱{ float: left; margin: } 兩個值 上下/ 左右 margin: 0px 20px; 三個職 上/ 左右 /下 四個值 上/ 右/ 下/ 左 需按順序 排版練習 1.假設 warp 是設定一個背景層（父層） 960px 並置中 margin: auto; {背景層（父層）的高度是由子層的內容物撐開的 所以可暫時不用設定高度} clunm 子層 背景層（ warp） 上面 三個300px的欄位 設定float-left後 如 warp不見了 是因為 clunm 子層 設定為浮動後 背景層（父層）就抓不到子層高度 通常子層使用float 會搭配 clear : both/ left/ right 父層物件 會閃開浮動物件子層 到最下方 故我們會將 clear寫在 html父層 warp最尾端 .class="自訂名稱 clearfix" 然後 css> . clearfix 自訂名稱 { clear: both/left/right; !ex float-img{ float: left/ right; margin: 0px 20px 10px 0px; ' class=" warp/ container" m