# CSS 學習筆記

## 讓元素置中在另外個元素上

**外層需先下一個```position: relative;```**

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

## 偽元素 ::before ::after

https://wcc723.github.io/css/2013/09/22/css-pseudo-element/
https://www.oxxostudio.tw/articles/201706/pseudo-element-1.html

**<p style="font-size:20px">HTML</p>**

<div>大家好，我是div</div>

**<p style="font-size:20px">CSS</p>**

div::before{
content:"我是 before"; //一定要加Content
color:red;
}
div::after{
content:"我是 after"; //一定要加Content
color:red;
}
**<p style="font-size:20px">效果</p>**

### content 使用url放入圖片的功能

div::before{
content:url(圖片網址) url(圖片網址) url(圖片網址);
}

## IMG
**img 跟其他元素下有2~3px**
可以使用display:block來取消空隙

圖片有固定寬高時，可使用

來防止變形

## 字型
**先載英文再載入中文字體**

	body {
	  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", Roboto, "Helvetica Neue", Arial, sans-serif;
			/* mac, IOS 系統字體    	Windows 英文系統字  微軟正黑體 		Android 系統字  IOS 系統字  通用字體 */             
	}

## overflow 可控制會溢出區塊的內容
### overflow 屬性具有以下值：

visible- 默認。溢出不會被剪裁。內容呈現在元素框外
hidden - 溢出被剪裁，其餘內容將不可見
scroll - 裁剪溢出，並添加滾動條以查看其餘內容
auto- 與 類似scroll，但僅在必要時添加滾動條

## white-space 決定如何處理元素內的空白字元
### white-space 常用屬性具有以下值：

normal - 連續的空白字元會被合併，換行字元被視為空白字元
nowrap - 對待空白字元的方式跟 normal 一樣，且會強制不換行
pre - 連續的空白字元都會被保留

## RWD 必使用元素

1. 992px ipad
1. 767px 手機
2. 中文內文單行字元 30～40 個字元會比較好閱讀
3. 英文內文單行字元 32～80 個字元會比較好閱讀



**寬度使用%百分比表示，做比例分配**

### vw vh 可視範圍百分比

**設計自適應性網頁（RWD）時我們會希望我們的圖片隨著螢幕的大小而改變，這時候我們就可以利用到這兩個單位。**

#### vw 螢幕可視範圍寬度度的百分比
	width:80vw (可視寬度80%)
#### vh 螢幕可視範圍高度的百分比
	height:50vh (可視高度50%)
	
![](https://i.imgur.com/SVPiIth.png)


### max-width
1.最打可達指定px
2.自適應父層解析度

	.container{
	  max-width: 1200px; //自適應
	  margin: 0 auto;
	  padding: 10px;
	}
	
	@media(max-width:768px) { 如果解析度小於768px
		<-- code -->
	}
### min-width

	@media(min-width:768px) { //如果解析度大於768px
		<-- code -->
	}

### img
	img {
		max-width: 100%; //圖片在小螢幕會跟著伸縮
		height: auto;
	}

### box-sizing


border-box 排版方式不用額外加入寬度

	*,*::before,*::after{
	  box-sizing: border-box;
	}

border: 1px solid blue;
box-sizing: border-box;

## float 浮動元素

CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。

Float（浮動），往往是用於圖像，但它在佈局時一樣非常有用。

https://developer.mozilla.org/en-US/docs/Web/CSS/float

	float:left

## Logo 文字隱藏

**HTML**

<h1 class="box">
<a href="#">hexSchool</a>
</h1>

**CSS**

.box a {
display: block;
width: 200px;
height: 50px;
background: url(images/logo.png) no-repeat;
text-indent: 100%; //必要
white-space: nowrap; //必要
overflow: hidden; //必要
}

**效果**

![](https://i.imgur.com/p75hPSj.png)

**text-indent: 100%;** 縮行100% 把文字移走
**white-space: nowrap;** 不讓文字斷行
**overflow: hidden;** 把被強制縮行導致溢位的文字隱藏


## Background 背景

### 設置背景顏色

.box {
background-color: #5422ad;
background: #5422ad;
}

### 設置背景圖片

.box {
background-image: url(image/logo.png);
background: url(image/logo.png);
}

### background-position 背景位置

.box {
background-position: 50px 120px ; //向右移動50px 向下移動120px
}

![](https://i.imgur.com/XwPPDXw.png)

.box {
background-position: right bottom ; // 在右下角
}

![](https://i.imgur.com/V5t1BxT.png)


### 使用background縮寫

#### 原始：

.box {
background-image: url(images/logo.png);
background-repeat: no-repeat;
background-color: red;
background-position: 50px 120px;
}

#### 簡寫成：

.box {
background: url(images/logo.png) no-repeat red 50px 120px;
}

## Flex 排版

flex-basis : 容器大小
flex-order: 
flex-grow:
flex-shrink:

## flex-flow
flex-direction 跟 flex-wrap結合體
flex-flow: (flex-direction) (flex-wrap);
EX:

	flex-flow:column wrap;

只對下一層有效

https://codepen.io/peiqun/full/WYzzYX

![](https://i.imgur.com/SqrN591.png)


	display:必備屬性
	flex-direction:決定flex軸線
	flex-wrap:決定換行的屬性
	justify-content:主要軸線的對齊
	align-items:交錯軸線的對齊


特性：

**寬度會隨外容器等比調整
高度依照item最高來定**

### flex-direction(設定主軸方向)
**寫在container裡面**

	flex-direction:row;(從左到右)
	flex-direction:row-reverse;(從右到左)
	flex-direction:column;(從上到下)
	flex-direction:column-reverse;(從下到上)

### Justify-Content 主軸對齊方式

**依照主軸線來進行對齊**

![](https://i.imgur.com/GOooKUj.png)

#### justify-content: flex-start;(預設值 從主軸線起點對齊)

![](https://i.imgur.com/waU0UZD.png)

#### justify-content: flex-end;(從主軸線終點對齊)

![](https://i.imgur.com/H3fV6NS.png)

#### justify-content: center;(居中)

![](https://i.imgur.com/vptP1uj.png)


![](https://i.imgur.com/Sf0A0MA.png)


#### justify-content: space-around;(item間格為container與item間格一半)

![](https://i.imgur.com/bGDWWOV.png)
	
#### justify-content: space-between;(貼齊起點終點)

![](https://i.imgur.com/Ejgpv4T.png)

#### justify-content: space-evenly;(間格平均)

![](https://i.imgur.com/HPGQxQ8.png)

### Flex Wrap 決定換行屬性

	flex-warp:wrap(item溢位自動換行)
	
### Align-Items 交錯軸對齊方式
![](https://i.imgur.com/cg7V4KR.jpg)

### Align-self 控制單個元素交錯軸對齊方式

### Align-Content 交錯軸使用主軸線語法對齊

## nth-child() 使用進階

	n值從0開始
	
	nth-child(2n+1)選取 奇數
	nth-child(2n) 選取 偶數

	
	nth-last-child(-n+4) 選取容器中最後四個元素
	
	.class li:nth-of-type(n) a {}  // 選擇第三個li裡面的a標籤
	
	.ul :nth-child(n+1):nth-child(-n+3) //範圍，選取締1到第3個

## Form 表單

	<form action="/index.html" method="get">
			送到index.html ，傳送方式為Get
	</form>
	
### input

type = tel 電話

type = date 日期 //不建議，格式不統一

type = number //數字

type = checkbox //樣式不能更改

type = radio // 樣式不能更改

type = button //

readonly = disabled //屬性，只讀模式

	<label for="myName">姓名</label>
	<input type="text" value="wilson" name="myName" id="myName" readonly>
//

value = 可以放入預設值

### Select

下拉式選單樣式不能更改

## CSS Reset 
1. https://meyerweb.com/eric/tools/css/reset/
	
2. https://necolas.github.io/normalize.css/

meyerweb css 清乾淨
normalize.css 保留基本與預設樣式

## 下載副件html
	<a href="#" download="ex.zip"></a> 點擊後可以下載ex.zip

## Boostrap 5

### Grid System 格線系統

	<div class="container"></div> 水平居中
	<div class="container-fluid"></div> 滿版

![](https://i.imgur.com/Ey5sED2.png)

BS5全家桶 = 容器 + 元件 + 通用類別

[網格系統](https://bootstrap5.hexschool.com/docs/5.0/layout/grid/)

[BS4 layoutit](https://www.layoutit.com/build)

結構為 container > row > col

row滿板為12 (col-a col-b 即 **a+b 必需小於等於12**)
**row 本身是 d-flex**

**<font color="ff0000">column(col)的外層只能是row </font>**

	<div class="container">
		<div class="row">
			<div class="col-3 green">
				<h2>選單</h2>
			</div>
			<div class="col-9 green">
				<h2>內容</h2>
			</div>
		</div>
		<div class="row">
			<div class="col-3 green">
				<h2>列表標題</h2>
			</div>

			<div class="col-6 green" style="border-left:none ;">
				<h2>列表標題</h2>
			</div>

			<div class="col-3 green" style="border-left:none ;">
				<h2>列表標題</h2>
			</div>
		</div>
	</div>
	
### 斷點設計 break Point

我們的網格系統支援**[六個響應式斷點](https://bootstrap5.hexschool.com/docs/5.0/layout/breakpoints/)**。 斷點主要是基於 **min-width** 來設置 media queries, 這代表著它們將會影響該斷點及其上的所有斷點（例如，.col-sm-4 適用於sm，md，lg，xl 和 xxl）。 這也意味著您可以通過每個斷點控制容器和欄的大小以及行為。

![](https://i.imgur.com/cXqW27x.png)

	<div class="container">
		<div class="row">
			<div class="col-md-3"> //大於768以上，才設為col-3
				<h2>選單</h2>
			</div>
			<div class="col-md-9"> //大於768以上，才設為col-3
				<h2>內容</h2>
			</div>
		</div>
	</div>
	
### 1.大於768時
![](https://i.imgur.com/f4LGZWU.png)

### 2.小於768時(手機版)
![](https://i.imgur.com/3nXlRXV.png)

	自定class元件 card、util、text-primary、mb-3 mb-md-3 pt-3
	
### 變數自訂

#### 81行 自訂顏色

**更改主題顏色**
![](https://i.imgur.com/MlnSk9U.png)


#### 250 Spacer大小更改

**更改間格字號，亦可增加**
**預設為1rem(16px)**

![](https://i.imgur.com/86FyQvj.png)

> EX: mt-3 = margin-top: 16px

#### 279 body設定

![](https://i.imgur.com/iRnBk7K.png)

#### 419 字型設定

![](https://i.imgur.com/ZEMCyWt.png)

#### 453 字體大小設定

**h1~h6的大小，亦可增加**
![](https://i.imgur.com/FOr3zgA.png)

### ios 樣式跑掉問題

    -webkit-appearance: none;  /* Safari 和 Chrome，常用於iOS下移除內建樣式 */
    -moz-appearance: none;     /* FireFox */
    appearance: none;

## Animation 動畫效果
	
### 宣告動畫 @keyframes
	@keyframes name {
	  0%   {background-color:pink; left:0px; top:0px;}
	  25%  {background-color:yellow; left:200px; top:0px;}
	  50%  {background-color:blue; left:200px; top:200px;}
	  75%  {background-color:green; left:0px; top:200px;}
	  100% {background-color:red; left:0px; top:50px;}
	}
### 套用動畫名稱 animation-name
	animation-name: name;
### 動畫執行時間 animation-duration
	animation-duration: 4s;
### 動畫延遲觸發 animation-delay
	animation-delay: 2s;
### 動畫執行次數 animation-iteration-count
	animation-iteration-count: 1; //動畫執行2次
	animation-iteration-count: infinite; //動畫循環執行
### 動畫停留位置 animation-fill-mode
	animation-fill-mode:forwards 停留在最後一個位置
	animation-fill-mode:backwards: 留在第一個位置
	animation-fill-mode:both 擁有前兩者功能

### [Animate.css](https://animate.style/)

## Transform 變形動畫

[Transform MDN](https://developer.mozilla.org/zh-TW/docs/Web/CSS/transform)

**可以觸發顯示卡的3D加速**

	div img {
	/*  旋轉  */
		transition: 2s;

	  transform: rotate(20deg);
	/* 放大倍率 */
	/*   transform: scale(2); */
	/* 移動 */
	/*   transform: translateX(100px); */
	}

## AOS 視差滾動

[AOS官網](https://michalsnik.github.io/aos/)

### AOS載入 在結尾 結尾 </body>前的位置插入程式碼
	<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css"/>
	<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
	<script>
	 AOS.init();
	</script>
	
### AOS 單一設計
	<div
		data-aos="fade-up"
		data-aos-offset="200"
		data-aos-delay="50"
		data-aos-duration="1000"
		data-aos-easing="ease-in-out"
		data-aos-mirror="true"
		data-aos-once="false"
		data-aos-anchor-placement="top-center">
	  </div>
	  
### AOS 全域設計
	AOS.init({
	  // Global settings:
	  disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
	  startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
	  initClassName: 'aos-init', // class applied after initialization
	  animatedClassName: 'aos-animate', // class applied on animation
	  useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
	  disableMutationObserver: false, // disables automatic mutations' detections (advanced)
	  debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
	  throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)


	  // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
	  offset: 120, // 動畫觸發位置(px)[底部距離動畫元素的位置，不要太高]
	  delay: 0, // 動畫延遲
	  duration: 400, // 動畫執行時間(ms)
	  easing: 'ease', // default easing for AOS animations
	  once: false, // whether animation should happen only once - while scrolling down
	  mirror: false, // whether elements should animate out while scrolling past them
	  anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation

	});