---
# System prepended metadata

title: 常用筆記

---

# 常用筆記
CSS快捷鍵案法列表
https://docs.emmet.io/cheat-sheet/
此網站列出常見的按法像是
fz + tab = "font-size:"
bgc + tab = "background-color:"
### CSS筆記

#### 最常用的屬性
``` css=
* {
  box-sizing: border-box;
}
```
#### 
內容盒模型（Content Box）：這是 CSS 的預設盒模型。在此模型中，元素的寬度和高度只包括內容本身。邊框（border）和內邊距（padding）不包括在內，所以元素的總實際寬度會是你設定的寬度加上邊框和內邊距。

邊框盒模型（Border Box）：當設置 box-sizing: border-box; 時，元素的寬度和高度將包括內容、內邊距和邊框，但不包括外邊距（margin）。這樣設定後，元素的總寬度和你設定的寬度相同，讓布局的計算更為直觀。

#### CSS 文字 ignore 点开事件
``` css=
pointer-events: none;
```

#### 文字左右對齊
``` css=
text-align-last: justify;
text-align: justify;
text-justify: distribute-all-lines; // 这行必加，兼容ie浏览器
```
#### IMG 父層多出4px
```css=
vertical-align: middle;
```

### 上到下背景漸層
``` css=
 background: linear-gradient(#d40d23, #7c0719);
```

#### div根據文字長度變寬
```css=
width:fit-content;
```

#### 垂直置中
```css=
display:flex;
justify-content:center;
``` 

#### 垂直和水平置中
```css=
display:flex;
align-items:center;
justify-content:center;

or 

display:grid;
place-content: center;
```

#### 全螢幕背景
```css=
html { 
    background: url('images/bg.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
```

#### IOS按住選取問題
```css=
*:not(input) {
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
```

#### 字串文本'\n'需要換行
white-space處理\n
word-break處理中文正確斷行
```css=
white-space: pre-line;
word-break: break-all;
```

#### 文字過長時顯示...
```css=
overflow : hidden;
text-overflow : ellipsis;
white-space : nowrap;
```

#### 超過指定行數 才顯示 ...
``` css=
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
```

#### 大頭貼img等比
```css=
div{
  overflow: hidden;
  margin-right: 5px;
  border-radius: 50%;
  background-color: #c2d6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover; //或是
    object-fit: contain;
    
  }
}
```

### LESS筆記
#### Calc用變數換算
```css=
width: calc(~"100% - 7.25em");
width: calc(@width - 50px);
```
### Animation筆記
#### Hover時放大
```css=
.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }"
```



### 產生黑色透明遮罩
#### 
```css=
&::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.459);
    left: 0;
    top: 0;
    border-radius: 10px;
    z-index: 0;
}
```

### 卷軸
``` css=
&::-webkit-scrollbar {
    -webkit-appearance: none;
}

&::-webkit-scrollbar:vertical {
    width: 6px;
}

&::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.3);
}
```