<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.變數共用 + 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: 控制背景圖片是否重複。 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.外層套用內層也會參考資料
六角線上課
flex
Meaning of relative weights
SASS ( CSS / SCSS ) 常見符號
AOS
swiperjs
animate css