2025年7月6日 星期日

筆記 網頁切版直播班

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;
補充容器內容分離，容器僅負責定位
補充搭配以下語法可減少計算失誤
*{
 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.變數共用 + SCSS
css
:root {
    --text-green: #57A203;
}
.cgreen {
    color: var(--text-green);
}
scss  
$text-green: #57A203;

input : checked + span {
} // 點選物後方第一個元件套用 css

}

input : checked ~ span {
} // 點選物後方所有元件套用 css

.header{
   
  &-title{
    & 代表父元素
  }
}
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>
11.line-height
行高計算方式 = 文字大小 * 行高倍數（ex：font-size: 20px * line-height: 1.5 = 30px 行高）
12.background-image
background-image: 用來設定元素的背景圖片。最常見的用法是 url()，後面接圖片的路徑。
範例：
background-image: url('images/your-image.png');
background-repeat: 控制背景圖片是否重複。
space;四角。
no-repeat：圖片只顯示一次。
repeat：圖片在 X 和 Y 軸上重複 (預設值)。
repeat-x：圖片只在 X 軸上重複。
repeat-y：圖片只在 Y 軸上重複。
background-position: 設定背景圖片的位置。
可以使用關鍵字 (如 center, top right) 或座標值 (如 50% 50%, 10px 20px)。
background-size: 設定背景圖片的大小。
cover：圖片會盡可能地縮放以覆蓋整個背景區域，但可能會裁剪圖片一部分。
contain：圖片會盡可能地縮放以完全顯示在背景區域內，但可能會留下空白。
13.偽元素
 /* 用 ::before 在文字前面加東西 */
.class::before {
  content: "前面加";  
}

/* 用 ::after 在文字後面加東西 */
.class::after {
  content: "後面加";   
}
14.media query breakpooints
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);
15.bootstrap常用英文 
s => start (由左至右故 start 為左邊)
e => end (由左至右故 end 為右邊)
t => top
b => bottom
x => x 軸（左右）
y => y 軸（上下）
16.bootstrap $spacer 
基礎值 $spacer 預設為 16px
1： $spacer * 0.25 ＝ 4px
2： $spacer * 0.5 ＝ 8px
3： $spacer ＝ 16px
4： $spacer * 1.5 ＝ 24px
5： $spacer * 3 ＝ 48px

範例：
.mx-1 即為
margin-left: 4px; margin-right: 4px;
17.transform 
1.以物件自身為基準
2.每個class一個
3.順序會影響結果
4.位置不會變
5.外層套用內層也會
18.bootstrap row col 兩種寫法 
<div class="container">
  <div class="row">
    <div class="col-md-6">Column 1</div>
    <div class="col-md-6">Column 2</div>
  </div>
  <div class="row row-cols-lg-4">
    <div class="col">Column A</div>
    <div class="col">Column B</div>
    <div class="col">Column C</div>
    <div class="col">Column D</div>
  </div>
</div>
參考資料
六角學院直播課
flex
Meaning of relative weights
SASS ( CSS / SCSS ) 常見符號
AOS
swiperjs
animate css
於
標籤：