2025年7月9日 星期三

Git make sure you configure your 'user.name' and 'user.email' in git

VS Code Commit時出現的錯誤
make sure you configure your 'user.name' and 'user.email' in git
開啟終端機輸入以下指令
config --global user.name "你git上面的名稱"
config --global user.email 你git註冊的mail

2025年7月6日 星期日

CSS Flex練習 & 補充

1.將容器設定成flex
<div class="container"></div>
.container{
  display: flex;
}
2.外層容器屬性
2-1 主軸 justify-content
justify-content: center; 
justify-content: flex-start;
justify-content: flex-end; 
justify-content: space-between;左右"不"留白等距
justify-content: space-around; 左右留白等距
2-2 主軸方向 flex-direction
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
2-3 主軸換行 flex-wrap
flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
2-4 交錯線 align-items
常用如下更多請看下方參考資料
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: stretch;
補充1.容器內容分離,容器僅負責定位
補充2.搭配以下語法可減少計算失誤
*{
 box-sizing: border-box;
}

*,*::before,*::after {
    box-sizing: border-box;
}
補充3.如果為顯示類似購物車,可多一個col div來當容器
.col-1{
 width:calc(100%/12);
 padding-left:10px;
 padding-right:10px;
}

.col-2{
 width:calc(100%/12*2);
 padding-left:10px;
 padding-right:10px;
}

.col-12{
 width: 100%;
 padding-left:10px;
 padding-right:10px;
}
補充4.變數共用
:root {
    --text-green: #57A203;
}
.cgreen {
    color: var(--text-green);
}
補充5.手機板禁用X軸(下方左右卷軸),設定了固定的width就會產生此問題
補充6.max-width取代width,最好在最外層的container要設一下,解決補充5方法
1.如果父元素比較寬時,保持既有寬度
2.如果父元素比較窄時,依父元素寬度自動調整
補充7.Flex依比例調整寬度,下為左占2右邊占3
.left{
	flex:2;
}
.right{
	flex:3;
}
補充8.格線系統響應式小方法
@media screen and(max-width: 768px){	
	[class*="col-"]{
    	width:100%;
	}
}
補充9 權重
HTML 標籤:1 分
class 選擇器:10 分
ID 選擇器:100 分
inline style:1000 分
!important:10000 分

html body .container .box{22分}
.box.box.box{30分}
補充10圖片改變大小時換圖
<picture>
  <!-- 當螢幕寬度少於992px時,替換圖片 -->
  <source srcset="./images/M2.png" media="(max-width: 992px)">
  <!-- 預設圖片,通常是桌面版本 -->
  <img src="./images/M1.png" alt="Logo">
</picture>
參考資料
flex
六角線上課