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

#### 最常用的屬性

* {
  box-sizing: border-box;
}

####
內容盒模型（Content Box）：這是 CSS 的預設盒模型。在此模型中，元素的寬度和高度只包括內容本身。邊框（border）和內邊距（padding）不包括在內，所以元素的總實際寬度會是你設定的寬度加上邊框和內邊距。

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

#### CSS 文字 ignore 点开事件

pointer-events: none;

#### 文字左右對齊

text-align-last: justify;
text-align: justify;
text-justify: distribute-all-lines; // 这行必加，兼容ie浏览器

#### IMG 父層多出4px

vertical-align: middle;

### 上到下背景漸層

 background: linear-gradient(#d40d23, #7c0719);

#### div根據文字長度變寬

width:fit-content;

#### 垂直置中

display:flex;
justify-content:center;

#### 垂直和水平置中

display:flex;
align-items:center;
justify-content:center;

or 

display:grid;
place-content: center;

#### 全螢幕背景

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按住選取問題

*: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處理中文正確斷行

white-space: pre-line;
word-break: break-all;

#### 文字過長時顯示...

overflow : hidden;
text-overflow : ellipsis;
white-space : nowrap;

#### 超過指定行數 才顯示 ...

-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

#### 大頭貼img等比

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用變數換算

width: calc(~"100% - 7.25em");
width: calc(@width - 50px);

### Animation筆記
#### Hover時放大

.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }"

### 產生黑色透明遮罩
####

&::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;
}

### 卷軸

&::-webkit-scrollbar {
    -webkit-appearance: none;
}

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

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