GF / VS CODE 快捷鍵/ 區塊計算方式/ 浮動float
2021/11/02
1.假圖產生連結 假圖片生產器連結
2. ”class=自訂名稱“ float 寫在html 圖片語法後片設定圖片為靠左或靠右浮動，文字繞圖片
3.如果想要文字和圖片有距離 會搭配區塊的尺寸 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"
margin: auto 左右置中
通常使用float 會搭配 clear: both/ left/ right
讓父層可抓住高度 子層
2. html .class="一個warp裡面有三個 欄位 欄位裡面有圖片和文字標題和內容 + floatfix"
3. css 寫上.warp 樣式/.clunm欄位樣式/ .clunm img欄位裡面的圖片需要的匡/ ＋ .clear: both
2021/11/01
快捷鍵
移動游標指到的行 向下上移動 option＋上下箭頭
複製游標指到的行 shift+option ＋上下箭頭
一次編輯多行相同內容option＋command+上下箭頭
區塊計算方式
例如 網頁全寬為600px
在設定方匡時要加上內容物的寬度width＋border+padding+margin(有時不可見的距離）
ex: width: 158px;
border: 1px;
padding: 10px;
margin: 10px;
total : 200px*3=600px
margin: auto; 方匡置中
float: left;三個div變成橫排
